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

Work on deck panel.

Browse Source
This commit is contained in:
marcins78@gmail.com
2012-12-23 03:09:14 +00:00
parent 2520f28b49
commit bb3fa2ad12
3 changed files with 98 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -109,6 +109,7 @@
);
var doLayout = function() {
log("deckBuild2.html::doLayout");
var collectionWidth = $("#collectionDiv").width();
var collectionHeight = $("#collectionDiv").height();
var deckWidth = $("#deckPanel").width();

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

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

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

@@ -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 = $("<div class='cardInDeck'></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;
},
@@ -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() {