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

Display count of cards in collection and updating them.

Browse Source
This commit is contained in:
marcins78@gmail.com
2012-12-22 20:29:19 +00:00
parent 3f94478a92
commit f8d3120a73
3 changed files with 99 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
View File

@@ -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;
}

64
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js
View File

@@ -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 {

44
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js
View File

@@ -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 = $("<div class='cardInCollection'></div>");
this.appendCardElemDetails(cardDiv, props);
cardDiv.append("<div class='count'></div>");
cardDiv.append("<div class='click'><img class='clickArea' src='images/pixel.png' width='100%' height='100%'></div>");
return cardDiv;
},
createDeckCardElem: function(props) {
var cardDiv = $("<div class='cardInDeck'></div>");
this.appendCardElemDetails(cardDiv, props);
cardDiv.append("<div class='click'><img class='clickArea' src='images/pixel.png' width='100%' height='100%'></div>");
return cardDiv;
},
@@ -148,8 +156,6 @@ var GempLotrDeckBuildingUI2 = Class.extend({
cardDiv.append("<div class='img'><img src='" + props["image"] + "' width='100%' height='100%'></div>");
if (props["type"] == "card")
cardDiv.append("<div class='border'><img src='images/pixel.png' width='100%' height='100%'></div>");
cardDiv.append("<div class='click'><img class='clickArea' src='images/pixel.png' width='100%' height='100%'></div>");
},
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) {