From f8d3120a73709da4b00fcbb2966d6916e46d3267 Mon Sep 17 00:00:00 2001 From: "marcins78@gmail.com" Date: Sat, 22 Dec 2012 20:29:19 +0000 Subject: [PATCH] Display count of cards in collection and updating them. --- .../src/main/webapp/deckBuild2.html | 8 +++ .../src/main/webapp/js/gemp-012/DeckPanel.js | 64 +++++++++++++++++-- .../webapp/js/gemp-012/deckBuildingUi2.js | 44 +++++++++---- 3 files changed, 99 insertions(+), 17 deletions(-) diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html index 90a7985c0..d70e4e18d 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html @@ -35,6 +35,14 @@ border: solid #000000; } + .card .count { + position: absolute; + font-weight: bolder; + display: table-cell; + text-align: right; + vertical-align: top; + } + .deckPart { position: relative; } diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js index 2c7c060e2..1294040b4 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js @@ -1,5 +1,6 @@ // Each card should have properties: // group: ring, ringBearer, site, fp, shadow +// blueprintId: blueprintId of the card var DeckPanel = Class.extend({ tabs:null, @@ -105,9 +106,62 @@ var DeckPanel = Class.extend({ this.shadowContainer.setLayout(0, 0, innerWidth, resultHeight); }, - addCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { - var selectedTabIndex = this.tabs.tabs('option', 'selected'); + getCardCount: function(blueprintId) { + var count = 0; + var incrementCount = + function(cardDiv, cardId, props, layout) { + if (props["blueprintId"] == blueprintId) + count++; + }; + + this.ringBearerContainer.iterCards(incrementCount); + this.ringContainer.iterCards(incrementCount); + this.sitesContainer.iterCards(incrementCount); + this.fpContainer.iterCards(incrementCount); + this.shadowContainer.iterCards(incrementCount); + + return count; + }, + + addCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { + var group = cardProps["group"]; + + var addCardToGroup = function (groupContainer) { + groupContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); + }; + + if (group == "ring") { + addCardToGroup(this.ringContainer); + } else if (group == "ringBearer" || group == "fp") { + addCardToGroup(this.fpContainer); + } else if (group == "site") { + addCardToGroup(this.sitesContainer); + } else if (group == "shadow") { + addCardToGroup(this.shadowContainer); + } + }, + + addRingBearerCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { + this.ringBearerContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); + }, + + finishAddingCards: function() { + var updateGroup = function (groupContainer, titlePrefix, tabHref) { + groupContainer.layoutCards(); + var count = groupContainer.getCardsCount(); + var title = titlePrefix + " (" + count + ")"; + $(".ui-tabs-nav a[href='#" + tabHref + "']", that.tabs).html(title); + }; + + updateGroup(this.ringContainer, "Ring", "ring"); + updateGroup(this.ringBearerContainer, "Ring-bearer", "ringBearer"); + updateGroup(this.sitesContainer, "Sites", "sites"); + updateGroup(this.fpContainer, "Free People", "fp"); + updateGroup(this.shadowContainer, "Shadow", "shadow"); + }, + + addSingleCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { var group = cardProps["group"]; var that = this; @@ -116,13 +170,15 @@ var DeckPanel = Class.extend({ groupContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); groupContainer.layoutCards(); var count = groupContainer.getCardsCount(); - var title = titlePrefix+" ("+count+")"; - $(".ui-tabs-nav a[href='#"+tabHref+"']", that.tabs).html(title); + var title = titlePrefix + " (" + count + ")"; + $(".ui-tabs-nav a[href='#" + tabHref + "']", that.tabs).html(title); }; if (group == "ring") { addCardToGroup(this.ringContainer, "Ring", "ring"); } else if (group == "ringBearer") { + var selectedTabIndex = this.tabs.tabs('option', 'selected'); + if (selectedTabIndex == 0) { addCardToGroup(this.ringBearerContainer, "Ring-bearer", "ringBearer"); } else { diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js index a5e983c6c..4d7affdf9 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js @@ -13,6 +13,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({ padding: 3, cardInCollectionId:0, + cardInDeckId:0, // Card properties: // type: pack, card @@ -83,9 +84,9 @@ var GempLotrDeckBuildingUI2 = Class.extend({ // If card in collection if (tar.hasClass("cardInCollection")) { // add card to deck - var cardId = cardElem.data("id"); var cardProps = cardElem.data("props"); - this.deckPanel.addCard(this.createDeckCardElem(cardProps), cardId, cardProps, this.layoutCardInCollection, this.widthToHeightScaleInCollection); + this.deckPanel.addSingleCard(this.createDeckCardElem(cardProps), ""+(this.cardInDeckId++), cardProps, this.layoutCardInDeck, this.widthToHeightScaleInCollection); + this.updateCardCount(cardElem, cardProps); } } return true; @@ -115,32 +116,39 @@ var GempLotrDeckBuildingUI2 = Class.extend({ } } else if (type == "card") { var countInDeck = 0; - $(".card", this.deckDiv).each( - function () { - var tempCardData = $(this).data("props"); - if (blueprintId == tempCardData["blueprintId"]) - countInDeck++; - }); - props["count"] = count-countInDeck; props["hor"] = card.horizontal; } props["image"] = card.imageUrl; props["group"] = group; - var cardDiv = this.createCollectionCardElem(props); + this.collectionContainer.addCard(this.createCollectionCardElem(props), ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection); + }, - this.collectionContainer.addCard(cardDiv, ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection); + updateCardCount: function(cardDiv, props) { + var count = props["count"] - this.deckPanel.getCardCount(props["blueprintId"]); + $(".count", cardDiv).html(count); + }, + + updateCardCounts: function() { + var that = this; + this.collectionContainer.iterCards( + function(cardDiv, cardId, props, layout) { + that.updateCardCount(cardDiv, props); + }); }, createCollectionCardElem: function(props) { var cardDiv = $("
"); this.appendCardElemDetails(cardDiv, props); + cardDiv.append("
"); + cardDiv.append("
"); return cardDiv; }, createDeckCardElem: function(props) { var cardDiv = $("
"); this.appendCardElemDetails(cardDiv, props); + cardDiv.append("
"); return cardDiv; }, @@ -148,8 +156,6 @@ var GempLotrDeckBuildingUI2 = Class.extend({ cardDiv.append("
"); if (props["type"] == "card") cardDiv.append("
"); - cardDiv.append("
"); - }, widthToHeightScaleInCollection: function(cardId, props) { @@ -160,6 +166,17 @@ var GempLotrDeckBuildingUI2 = Class.extend({ }, layoutCardInCollection: function(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight) { + $(".img", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight}); + var maxDimension = Math.max(cardWidth, cardHeight) + if (props["type"] == "card") { + var borderWidth = Math.floor(maxDimension / 30); + $(".border", cardDiv).css({"left":0, "top":0, "width":(cardWidth-2*borderWidth), "height":(cardHeight-2*borderWidth), "border-width": borderWidth+"px"}); + } + $(".count", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight, "font-size": maxDimension*1.5+"%"}); + $(".click", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight}); + }, + + layoutCardInDeck: function(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight) { $(".img", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight}); if (props["type"] == "card") { var borderWidth = Math.floor(Math.max(cardWidth, cardHeight) / 30); @@ -170,6 +187,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({ finishCollection: function() { this.collectionContainer.layoutCards(); + this.updateCardCounts(); }, layoutUI: function(collectionWidth, collectionHeight, deckWidth, deckHeight) {