From bb3fa2ad126edd1b0c325dff177ff4ac39cd40cb Mon Sep 17 00:00:00 2001 From: "marcins78@gmail.com" Date: Sun, 23 Dec 2012 03:09:14 +0000 Subject: [PATCH] Work on deck panel. --- .../src/main/webapp/deckBuild2.html | 1 + .../src/main/webapp/js/gemp-012/DeckPanel.js | 121 +++++++++++------- .../webapp/js/gemp-012/deckBuildingUi2.js | 23 +++- 3 files changed, 98 insertions(+), 47 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 a982142ee..6f43d7957 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html @@ -109,6 +109,7 @@ ); var doLayout = function() { + log("deckBuild2.html::doLayout"); var collectionWidth = $("#collectionDiv").width(); var collectionHeight = $("#collectionDiv").height(); var deckWidth = $("#deckPanel").width(); 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 bcf19e4ea..c47778a70 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 @@ -50,7 +50,7 @@ var DeckPanel = Class.extend({ finished = true; } }); - + return first; }; @@ -79,31 +79,17 @@ var DeckPanel = Class.extend({ this.sitesContainer.addCardGroup("main", sitesGroup); this.fpContainer = new CardContainer(this.fpDiv, this.layoutCardContainer); - var fpGroup = new AttachedCardsLayoutCardGroup(this.fpDiv, + var fpGroup = new RowCardLayoutCardGroup(this.fpDiv, function(cardDiv, cardId, props) { return true; - }, - function(cardDiv, cardId, props) { - return isFirstWithSameBlueprintIdInGroup(cardId, fpGroup, props["blueprintId"]); - }); - fpGroup.addAttachedGroup(-1/7, 0, - function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) { - return propsAtt["blueprintId"] == props["blueprintId"]; }); fpGroup.setZIndexBase(100); this.fpContainer.addCardGroup("main", fpGroup); this.shadowContainer = new CardContainer(this.shadowDiv, this.layoutCardContainer); - var shadowGroup = new AttachedCardsLayoutCardGroup(this.shadowDiv, + var shadowGroup = new RowCardLayoutCardGroup(this.shadowDiv, function(cardDiv, cardId, props) { return true; - }, - function(cardDiv, cardId, props) { - return isFirstWithSameBlueprintIdInGroup(cardId, shadowGroup, props["blueprintId"]); - }); - shadowGroup.addAttachedGroup(-1/7, 0, - function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) { - return propsAtt["blueprintId"] == props["blueprintId"]; }); shadowGroup.setZIndexBase(100); this.shadowContainer.addCardGroup("main", shadowGroup); @@ -148,7 +134,7 @@ var DeckPanel = Class.extend({ var incrementCount = function(cardDiv, cardId, props, layout) { if (props["blueprintId"] == blueprintId) - count++; + count+=props["countInDeck"]; }; this.ringBearerContainer.iterCards(incrementCount); @@ -160,12 +146,21 @@ var DeckPanel = Class.extend({ return count; }, + getCardCountInGroup: function(groupContainer) { + var count = 0; + groupContainer.iterCards( + function(cardDiv, cardId, props) { + count+=props["countInDeck"]; + }); + return count; + }, + updateDeckCounts: function() { var that = this; var updateGroup = function (groupContainer, titlePrefix, tabHref) { groupContainer.layoutCards(); - var count = groupContainer.getCardsCount(); + var count = that.getCardCountInGroup(groupContainer); var title = titlePrefix + " (" + count + ")"; $(".ui-tabs-nav a[href='#" + tabHref + "']", that.tabs).html(title); }; @@ -177,61 +172,101 @@ var DeckPanel = Class.extend({ updateGroup(this.shadowContainer, "Shadow", "shadow"); }, + findCardPropsInGroup: function(groupContainer, blueprintId) { + var cardInGroupProps = null; + groupContainer.iterCards( + function(cardDiv, cardId, props) { + if (props["blueprintId"] == blueprintId) + cardInGroupProps = props; + }); + return cardInGroupProps; + }, + + addCardToGroup: function(groupContainer, cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { + var cardInGroupProps = this.findCardPropsInGroup(groupContainer, cardProps["blueprintId"]);; + if (cardInGroupProps == null) { + cardProps["countInDeck"] = 1; + groupContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); + } else { + cardInGroupProps["countInDeck"] = cardInGroupProps["countInDeck"] + 1; + } + }, + 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); + this.addCardToGroup(this.ringContainer); } else if (group == "ringBearer" || group == "fp") { - addCardToGroup(this.fpContainer); + this.addCardToGroup(this.fpContainer); } else if (group == "site") { - addCardToGroup(this.sitesContainer); + this.addCardToGroup(this.sitesContainer); } else if (group == "shadow") { - addCardToGroup(this.shadowContainer); + this.addCardToGroup(this.shadowContainer); } }, addRingBearerCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { - this.ringBearerContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); + this.addCardToGroup(this.ringBearerContainer, cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); + }, + + removeCardAndUpdate: function(cardElem, cardId, cardProps) { + var that = this; + var removeFromContainerIfThere = function(groupContainer, titlePrefix, tabHref) { + if (groupContainer.hasCardId(cardId)) { + var cardPropsInGroup = that.findCardPropsInGroup(groupContainer, cardProps["blueprintId"]); + if (cardPropsInGroup["countInDeck"]==1) + groupContainer.removeCard(cardId); + else + cardPropsInGroup["countInDeck"]=cardPropsInGroup["countInDeck"]-1; + groupContainer.layoutCards(); + + var count = that.getCardCountInGroup(groupContainer); + var title = titlePrefix + " (" + count + ")"; + $(".ui-tabs-nav a[href='#" + tabHref + "']", that.tabs).html(title); + } + }; + + removeFromContainerIfThere(this.ringBearerContainer, "Ring-bearer", "ringBearer"); + removeFromContainerIfThere(this.ringContainer, "Ring", "ring"); + removeFromContainerIfThere(this.sitesContainer, "Sites", "sites"); + removeFromContainerIfThere(this.fpContainer, "Free People", "fp"); + removeFromContainerIfThere(this.shadowContainer, "Shadow", "shadow"); }, finishAddingCards: function() { this.updateDeckCounts(); }, - addSingleCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { + addCardToGroupAndUpdate: function(groupContainer, titlePrefix, tabHref, cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { + this.addCardToGroup(groupContainer, cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); + groupContainer.layoutCards(); + var count = this.getCardCountInGroup(groupContainer); + var title = titlePrefix + " (" + count + ")"; + $(".ui-tabs-nav a[href='#" + tabHref + "']", this.tabs).html(title); + }, + + addCardAndUpdate: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) { var group = cardProps["group"]; var that = this; - var addCardToGroup = function (groupContainer, titlePrefix, tabHref) { - 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); - }; - if (group == "ring") { - addCardToGroup(this.ringContainer, "Ring", "ring"); + this.addCardToGroupAndUpdate(this.ringContainer, "Ring", "ring", cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); } else if (group == "ringBearer") { var selectedTabIndex = this.tabs.tabs('option', 'selected'); if (selectedTabIndex == 0) { - addCardToGroup(this.ringBearerContainer, "Ring-bearer", "ringBearer"); + this.addCardToGroupAndUpdate(this.ringBearerContainer, "Ring-bearer", "ringBearer", cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); } else { - addCardToGroup(this.fpContainer, "Free People", "fp"); + this.addCardToGroupAndUpdate(this.fpContainer, "Free People", "fp", cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); } } else if (group == "site") { - addCardToGroup(this.sitesContainer, "Sites", "sites"); + this.addCardToGroupAndUpdate(this.sitesContainer, "Sites", "sites", cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); } else if (group == "fp") { - addCardToGroup(this.fpContainer, "Free People", "fp"); + this.addCardToGroupAndUpdate(this.fpContainer, "Free People", "fp", cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); } else if (group == "shadow") { - addCardToGroup(this.shadowContainer, "Shadow", "shadow"); + this.addCardToGroupAndUpdate(this.shadowContainer, "Shadow", "shadow", cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc); } } }); \ No newline at end of file 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 15a8751e3..763771131 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 @@ -85,12 +85,12 @@ var GempLotrDeckBuildingUI2 = Class.extend({ if (tar.hasClass("cardInCollection")) { // add card to deck var cardProps = cardElem.data("props"); - this.deckPanel.addSingleCard(this.createDeckCardElem(cardProps), ""+(this.cardInDeckId++), cardProps, this.layoutCardInDeck, this.widthToHeightScaleInCollection); + this.addCardToDeck(cardProps["type"], cardProps["group"], + cardProps["blueprintId"], cardProps["image"]); this.updateCardCount(cardElem, cardProps); } else if (tar.hasClass("cardInDeck")) { // remove card from deck - cardElem.remove(); - this.deckPanel.updateDeckCounts(); + this.deckPanel.removeCardAndUpdate(cardElem, cardElem.data("id"), cardElem.data("props")); this.updateCardCounts(); } } @@ -107,6 +107,16 @@ var GempLotrDeckBuildingUI2 = Class.extend({ this.cardInCollectionId = 0; }, + addCardToDeck: function(type, group, blueprintId, image, horizontal) { + var cardProps = {}; + cardProps["type"]=type; + cardProps["group"]=group; + cardProps["blueprintId"]=blueprintId; + cardProps["image"]=image; + cardProps["hor"]=horizontal; + this.deckPanel.addCardAndUpdate(this.createDeckCardElem(cardProps), ""+(this.cardInDeckId++), cardProps, this.layoutCardInDeck, this.widthToHeightScaleInCollection); + }, + addCardToCollection: function(type, blueprintId, count, group, contents) { var props = {}; props["blueprintId"] = blueprintId; @@ -153,6 +163,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({ createDeckCardElem: function(props) { var cardDiv = $("
"); this.appendCardElemDetails(cardDiv, props); + cardDiv.append("
"); cardDiv.append("
"); return cardDiv; }, @@ -183,11 +194,15 @@ var GempLotrDeckBuildingUI2 = Class.extend({ layoutCardInDeck: 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(Math.max(cardWidth, cardHeight) / 30); + 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}); + + $(".count", cardDiv).html(props["countInDeck"]); }, finishCollection: function() {