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

Working on deck builder version 2.

Browse Source
This commit is contained in:
marcins78@gmail.com
2012-12-22 19:14:40 +00:00
parent 5cdedf5597
commit 4bcfd25704
3 changed files with 166 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,24 @@
.card {
position: absolute;
overflow: hidden;
}
.card .img {
position: absolute;
}
.card .click {
position: absolute;
}
.card .border {
position: absolute;
border: solid #000000;
}
.deckPart {
position: relative;
}
</style>
@@ -33,13 +51,16 @@
<script type="text/javascript" src="js/gemp-012/inheritance.js"></script>
<script type="text/javascript" src="js/gemp-012/common.js"></script>
<script type="text/javascript" src="/generic-tcg/js/CardContainer.js"></script>
<script type="text/javascript" src="/generic-tcg/js/CardGroup.js"></script>
<script type="text/javascript" src="/generic-tcg/js/RowCardLayoutCardGroup.js"></script>
<script type="text/javascript" src="/generic-tcg/js/jquery/jquery-sizes.js"></script>
<script type="text/javascript" src="js/gemp-012/communication.js"></script>
<script type="text/javascript" src="js/gemp-012/logging.js"></script>
<script type="text/javascript" src="js/gemp-012/commonUi.js"></script>
<script type="text/javascript" src="js/gemp-012/jCards.js"></script>
<script type="text/javascript" src="/generic-tcg/js/CardContainer.js"></script>
<script type="text/javascript" src="/generic-tcg/js/CardGroup.js"></script>
<script type="text/javascript" src="/generic-tcg/js/RowCardLayoutCardGroup.js"></script>
<script type="text/javascript" src="js/gemp-012/cardFilter2.js"></script>
<script type="text/javascript" src="js/gemp-012/DeckPanel.js"></script>
<script type="text/javascript" src="js/gemp-012/deckBuildingUi2.js"></script>

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

@@ -7,6 +7,12 @@ var DeckPanel = Class.extend({
fpDiv:null,
shadowDiv:null,
ringBearerContainer:null,
ringContainer:null,
sitesContainer:null,
fpContainer:null,
shadowContainer:null,
init:function (deckDiv) {
var tabGroup = $("<ul></ul>");
tabGroup.append("<li><a href='#ringBearer'>Ring-bearer (0)</a></li>");
@@ -16,18 +22,63 @@ var DeckPanel = Class.extend({
tabGroup.append("<li><a href='#shadow'>Shadow (0)</a></li>");
deckDiv.append(tabGroup);
this.ringBearerDiv = $("<div id='ringBearer'></div>");
this.ringBearerDiv = $("<div id='ringBearer' class='deckPart'></div>");
deckDiv.append(this.ringBearerDiv);
this.ringDiv = $("<div id='ring'></div>");
this.ringDiv = $("<div id='ring' class='deckPart'></div>");
deckDiv.append(this.ringDiv);
this.sitesDiv = $("<div id='sites'></div>");
this.sitesDiv = $("<div id='sites' class='deckPart'></div>");
deckDiv.append(this.sitesDiv);
this.fpDiv = $("<div id='fp'></div>");
this.fpDiv = $("<div id='fp' class='deckPart'></div>");
deckDiv.append(this.fpDiv);
this.shadowDiv = $("<div id='shadow'></div>");
this.shadowDiv = $("<div id='shadow' class='deckPart'></div>");
deckDiv.append(this.shadowDiv);
this.tabs = $(deckDiv).tabs();
this.ringBearerContainer = new CardContainer(this.ringBearerDiv, this.layoutCardContainer);
var ringBearerGroup = new RowCardLayoutCardGroup(this.ringBearerDiv,
function() {
return true;
});
ringBearerGroup.setZIndexBase(10);
this.ringBearerContainer.addCardGroup("main", ringBearerGroup);
this.ringContainer = new CardContainer(this.ringDiv, this.layoutCardContainer);
var ringGroup = new RowCardLayoutCardGroup(this.ringDiv,
function() {
return true;
});
ringGroup.setZIndexBase(10);
this.ringContainer.addCardGroup("main", ringGroup);
this.sitesContainer = new CardContainer(this.sitesDiv, this.layoutCardContainer);
var sitesGroup = new RowCardLayoutCardGroup(this.sitesDiv,
function() {
return true;
});
sitesGroup.setZIndexBase(10);
this.sitesContainer.addCardGroup("main", sitesGroup);
this.fpContainer = new CardContainer(this.fpDiv, this.layoutCardContainer);
var fpGroup = new RowCardLayoutCardGroup(this.fpDiv,
function() {
return true;
});
fpGroup.setZIndexBase(10);
this.fpContainer.addCardGroup("main", fpGroup);
this.shadowContainer = new CardContainer(this.shadowDiv, this.layoutCardContainer);
var shadowGroup = new RowCardLayoutCardGroup(this.shadowDiv,
function() {
return true;
});
shadowGroup.setZIndexBase(10);
this.shadowContainer.addCardGroup("main", shadowGroup);
},
layoutCardContainer : function(cardGroups, left, top, width, height) {
var padding = 3;
cardGroups["main"].setLayout(left + padding, top + padding, width - 2 * padding, height - 2 * padding);
},
clearDeck: function() {
@@ -36,5 +87,27 @@ var DeckPanel = Class.extend({
layoutUi: function(x, y, width, height) {
this.tabs.css({"left": x, "top": y, "width": width, "height": height});
var border = this.tabs.border();
var innerWidth = width - border.left - border.right;
var innerHeight = height - border.top - border.bottom;
var resultHeight = innerHeight - $("ul", this.tabs).height();
resultHeight = resultHeight - 3;
this.ringBearerContainer.setLayout(0, 0, innerWidth, resultHeight);
this.ringContainer.setLayout(0, 0, innerWidth, resultHeight);
this.sitesContainer.setLayout(0, 0, innerWidth, resultHeight);
this.fpContainer.setLayout(0, 0, innerWidth, resultHeight);
this.shadowContainer.setLayout(0, 0, innerWidth, resultHeight);
},
addCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) {
var selectedTabIndex = this.tabs.tabs('option', 'selected');
this.ringBearerContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc);
this.ringBearerContainer.layoutCards();
}
});

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

@@ -14,6 +14,14 @@ var GempLotrDeckBuildingUI2 = Class.extend({
cardInCollectionId:0,
// Card properties:
// type: pack, card
// blueprintId: id of the blueprint as in server
// count: number of cards of that type
// contents: contents of selection pack
// hor: if card is horizontal
// image: image url
init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
this.collectionContentsDiv = collectionContentsDiv;
this.deckDiv = deckDiv;
@@ -54,6 +62,32 @@ var GempLotrDeckBuildingUI2 = Class.extend({
this.collectionType = "default";
this.cardFilter.getCollection();
$("body").click(
function (event) {
return that.clickCardFunction(event);
});
},
clickCardFunction: function(event) {
var tar = $(event.target);
if (tar.length == 1 && tar[0].tagName == "A")
return true;
if (tar.hasClass("clickArea")) {
tar = tar.parent();
tar = tar.parent();
var cardElem = tar.parent();
// 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);
}
}
return true;
},
layoutCollectionContainer : function(cardGroups, left, top, width, height) {
@@ -70,11 +104,10 @@ var GempLotrDeckBuildingUI2 = Class.extend({
var props = {};
props["blueprintId"] = blueprintId;
props["count"] = count;
props["type"] = type;
var card = new Card(blueprintId, "collection", "1", "player", null);
cardDiv = this.createCollectionCardElem(card.imageUrl);
var cardDiv;
if (type == "pack") {
if (blueprintId.substr(0, 3) == "(S)") {
props["contents"] = contents;
@@ -90,11 +123,31 @@ var GempLotrDeckBuildingUI2 = Class.extend({
props["count"] = count-countInDeck;
props["hor"] = card.horizontal;
}
props["image"] = card.imageUrl;
var cardDiv = this.createCollectionCardElem(props);
this.collectionContainer.addCard(cardDiv, ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
},
createCollectionCardElem: function(image) {
return "<img src='" + image + "' width='100%' height='100%'>";
createCollectionCardElem: function(props) {
var cardDiv = $("<div class='cardInCollection'></div>");
this.appendCardElemDetails(cardDiv, props);
return cardDiv;
},
createDeckCardElem: function(props) {
var cardDiv = $("<div class='cardInDeck'></div>");
this.appendCardElemDetails(cardDiv, props);
return cardDiv;
},
appendCardElemDetails: function(cardDiv, props) {
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) {
@@ -104,8 +157,13 @@ var GempLotrDeckBuildingUI2 = Class.extend({
return 360/500;
},
layoutCardInCollection: function() {
layoutCardInCollection: 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);
$(".border", cardDiv).css({"left":0, "top":0, "width":(cardWidth-2*borderWidth), "height":(cardHeight-2*borderWidth), "border-width": borderWidth+"px"});
}
$(".click", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight});
},
finishCollection: function() {