ambidextrous/gemp-lotr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added UI handling for new Map card section, which only shows for PC-Movie and PC-Movie playtest.

Browse Source
This commit is contained in:
Christian 'ketura' McCarty
2024-04-19 09:13:33 -05:00
parent 769f127225
commit 488f152c02
4 changed files with 117 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css
View File

@@ -140,4 +140,22 @@ button.navigation-butt {
.notesDialog {
display: flex;
}
.card-group {
width: 100%;
height: 100%;
border-radius: 7px;
text-align: center;
}
.helper-text {
font-size: calc(0.3rem + 0.75vh);
position: relative;
top: 40%;
padding:10px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

38
gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html
View File

@@ -105,11 +105,41 @@
</select>
</div>
<div id="ringBearerDiv">Ring Bearer</div>
<div id="ringBearerDiv">
<div id="rb-content" class="ui-widget-content card-group">
Ring-bearer
<div class="helper-text">
(Click here to select your Ring-bearer.)
</div>
</div>
</div>
<div id="ringDiv">
<div id="ring-content" class="ui-widget-content card-group">
The One Ring
<div class="helper-text">
(Click here to select your Ring.)
</div>
</div>
</div>
<div id="map-div">
<div id="map-content" class="ui-widget-content card-group">
Map
<div class="helper-text" >
(Click here to select your Map.)
<br/><br/>(Maps are now required for PC-Movie decks. They determine what site path you will use.)
</div>
</div>
</div>
<div id="ringDiv">Ring</div>
<div id="sitesDiv">Sites</div>
<div id="sitesDiv">
<div id="sites-content" class="ui-widget-content card-group">
Sites
<div class="helper-text" style="top:10%">
(To select sites, change the "All Card Types" dropdown to "Sites", and consider changing "Sort By" to "Site Number".)
</div>
</div>
</div>
<div id="statsDiv">
<div id="deckStats"></div>

54
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js
View File

@@ -10,6 +10,10 @@ var GempLotrDeckBuildingUI = Class.extend({
ringDiv:null,
ringGroup:null,
mapDiv:null,
mapGroup:null,
showMap:false,
siteDiv:null,
siteGroup:null,
@@ -90,6 +94,13 @@ var GempLotrDeckBuildingUI = Class.extend({
$("#formatSelect").change(
function () {
that.deckModified(true);
let formatCode = that.formatSelect.val();
if(formatCode == "pc_movie" || formatCode == "test_pc_movie") {
that.setMapVisibility(true);
}
else {
that.setMapVisibility(false);
}
});
var collectionSelect = $("#collectionSelect");
@@ -196,7 +207,7 @@ var GempLotrDeckBuildingUI = Class.extend({
});
this.ringBearerGroup = new NormalCardGroup(this.ringBearerDiv, function (card) {
return true;
});
}, false, $("#rb-content"));
this.ringDiv = $("#ringDiv");
this.ringDiv.click(
@@ -206,12 +217,22 @@ var GempLotrDeckBuildingUI = Class.extend({
});
this.ringGroup = new NormalCardGroup(this.ringDiv, function (card) {
return true;
});
}, false, $("#ring-content"));
this.mapDiv = $("#map-div");
this.mapDiv.click(
function () {
if ($(".card", that.mapDiv).length == 0)
that.showPredefinedFilter("cardType:MAP type:card", that.mapDiv);
});
this.mapGroup = new NormalCardGroup(this.mapDiv, function (card) {
return true;
}, false, $("#map-content"));
this.siteDiv = $("#sitesDiv");
this.siteGroup = new VerticalBarGroup(this.siteDiv, function (card) {
return true;
}, true);
}, false, $("#sites-content"));
this.drawDeckDiv = $("#decksRegion");
this.fpDeckGroup = new NormalCardGroup(this.drawDeckDiv, function (card) {
@@ -289,6 +310,11 @@ var GempLotrDeckBuildingUI = Class.extend({
this.updateFormatOptions();
},
setMapVisibility:function(value) {
this.showMap = value;
this.layoutUI(true);
},
renameCurrentDeck:function() {
var that = this;
that.renameDeck(that.deckName, function (newDeckName) {
@@ -1035,6 +1061,7 @@ var GempLotrDeckBuildingUI = Class.extend({
//$('#formatSelect option[value="' + formatName + '"]').prop('selected', true);
this.formatSelect.val(formatCode);
this.formatSelect.change();
}
var notes = root.getElementsByTagName("notes");
@@ -1124,12 +1151,24 @@ var GempLotrDeckBuildingUI = Class.extend({
this.ringBearerDiv.css({ position:"absolute", left:padding, top:manageHeight + 2 * padding, width:Math.floor((sitesWidth - padding) / 2), height:rowHeight });
this.ringBearerGroup.setBounds(0, 0, Math.floor((sitesWidth - padding) / 2), rowHeight);
this.ringDiv.css({ position:"absolute", left:Math.floor((sitesWidth + 3 * padding) / 2), top:manageHeight + 2 * padding, width:Math.floor((sitesWidth - padding) / 2), height:rowHeight });
this.ringDiv.css({ display:"block", position:"absolute", left:Math.floor((sitesWidth + 3 * padding) / 2), top:manageHeight + 2 * padding, width:Math.floor((sitesWidth - padding) / 2), height:rowHeight });
this.ringGroup.setBounds(0, 0, Math.floor((sitesWidth - padding) / 2), rowHeight);
if(this.showMap) {
this.mapDiv.css({ display:"block", position:"absolute", left:padding, top:manageHeight + 2 * padding+ rowHeight, width:Math.floor((sitesWidth - padding) / 2), height:rowHeight });
this.mapGroup.setBounds(0, 0, Math.floor((sitesWidth - padding) / 2), rowHeight);
this.siteDiv.css({ position:"absolute", left:padding, top:manageHeight + 3 * padding + rowHeight, width:sitesWidth, height:deckHeight - rowHeight - 2 * padding});
this.siteGroup.setBounds(0, 0, sitesWidth, deckHeight - rowHeight - 2 * padding);
this.siteDiv.css({ position:"absolute", left:padding, top:manageHeight + 3 * padding + 2 * rowHeight, width:sitesWidth, height:deckHeight - rowHeight - 2 * padding});
this.siteGroup.setBounds(0, 0, sitesWidth, deckHeight - 2*rowHeight - 2 * padding);
}
else {
this.mapDiv.css({ display:"none"});
this.mapGroup.setBounds(0, 0, Math.floor((sitesWidth - padding) / 2), rowHeight);
this.siteDiv.css({ position:"absolute", left:padding, top:manageHeight + 3 * padding + rowHeight, width:sitesWidth, height:deckHeight - rowHeight - 2 * padding});
this.siteGroup.setBounds(0, 0, sitesWidth, deckHeight - rowHeight - 2 * padding);
}
this.drawDeckDiv.css({ position:"absolute", left:padding * 2 + sitesWidth, top:manageHeight + 2 * padding, width:deckWidth - (sitesWidth + padding) - padding, height:deckHeight - 2 * padding - 50 });
this.fpDeckGroup.setBounds(0, 0, deckWidth - (sitesWidth + padding) - padding, (deckHeight - 2 * padding - 50) / 2);
this.shadowDeckGroup.setBounds(0, (deckHeight - 2 * padding - 50) / 2, deckWidth - (sitesWidth + padding) - padding, (deckHeight - 2 * padding - 50) / 2);
@@ -1150,6 +1189,9 @@ var GempLotrDeckBuildingUI = Class.extend({
this.ringBearerGroup.layoutCards();
this.ringGroup.layoutCards();
this.siteGroup.layoutCards();
if(this.showMap) {
this.mapGroup.layoutCards();
}
},
layoutDeck:function () {

29
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/jCardGroup.js
View File

@@ -9,15 +9,20 @@ var CardGroup = Class.extend({
maxCardHeight:497,
descDiv:null,
init:function (container, belongTest, createDiv) {
init:function (container, belongTest, createDiv, existingDiv) {
this.container = container;
this.belongTestFunc = belongTest;
if (createDiv === undefined || createDiv) {
this.descDiv = $("<div class='ui-widget-content'></div>");
if(existingDiv !== undefined) {
this.descDiv = existingDiv;
}
else {
this.descDiv = $("<div class='ui-widget-content'></div>");
container.append(this.descDiv);
}
this.descDiv.css({"border-radius":"7px"});
container.append(this.descDiv);
}
},
@@ -59,8 +64,8 @@ var CardGroup = Class.extend({
});
var VerticalBarGroup = CardGroup.extend({
init:function (container, belongTest, createDiv) {
this._super(container, belongTest, createDiv);
init:function (container, belongTest, createDiv, existingDiv) {
this._super(container, belongTest, createDiv, existingDiv);
},
layoutCards:function () {
@@ -103,8 +108,8 @@ var VerticalBarGroup = CardGroup.extend({
});
var VerticalFlexGroup = CardGroup.extend({
init:function (container, belongTest, createDiv) {
this._super(container, belongTest, createDiv);
init:function (container, belongTest, createDiv, existingDiv) {
this._super(container, belongTest, createDiv, existingDiv);
},
setBounds:function (x, y, width, height) {
@@ -236,8 +241,8 @@ var AdvPathCardGroup = CardGroup.extend({
var NormalCardGroup = CardGroup.extend({
init:function (container, belongTest, createDiv) {
this._super(container, belongTest, createDiv);
init:function (container, belongTest, createDiv, existingDiv) {
this._super(container, belongTest, createDiv, existingDiv);
},
layoutCards:function () {
@@ -396,8 +401,8 @@ var NormalCardGroup = CardGroup.extend({
var NormalFlexGroup = CardGroup.extend({
init:function (container, belongTest, createDiv) {
this._super(container, belongTest, createDiv);
init:function (container, belongTest, createDiv, existingDiv) {
this._super(container, belongTest, createDiv, existingDiv);
},
setBounds:function (x, y, width, height) {