diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css index afeadbd4d..03e2aa624 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css +++ b/gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/deckBuild.css @@ -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%); } \ No newline at end of file diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html b/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html index 3d4e4e7ea..c32beb048 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html +++ b/gemp-lotr/gemp-lotr-async/src/main/web/deckBuild.html @@ -105,11 +105,41 @@ -
Ring Bearer
+
+
+ Ring-bearer +
+ (Click here to select your Ring-bearer.) +
+
+
+
+
+ The One Ring +
+ (Click here to select your Ring.) +
+
+ +
+
+
+ Map +
+ (Click here to select your Map.) +

(Maps are now required for PC-Movie decks. They determine what site path you will use.) +
+
+
-
Ring
- -
Sites
+
+
+ Sites +
+ (To select sites, change the "All Card Types" dropdown to "Sites", and consider changing "Sort By" to "Site Number".) +
+
+
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js index a80dc632d..790c28f02 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js +++ b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/deckBuildingUi.js @@ -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 () { diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/jCardGroup.js b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/jCardGroup.js index c1c218383..02394bfe2 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/jCardGroup.js +++ b/gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/jCardGroup.js @@ -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 = $("
"); + if(existingDiv !== undefined) { + this.descDiv = existingDiv; + } + else { + this.descDiv = $("
"); + 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) {