From 4bcfd257045b25f23abc4f4b4429a28dbf2a9dc9 Mon Sep 17 00:00:00 2001 From: "marcins78@gmail.com" Date: Sat, 22 Dec 2012 19:14:40 +0000 Subject: [PATCH] Working on deck builder version 2. --- .../src/main/webapp/deckBuild2.html | 27 +++++- .../src/main/webapp/js/gemp-012/DeckPanel.js | 83 +++++++++++++++++-- .../webapp/js/gemp-012/deckBuildingUi2.js | 70 ++++++++++++++-- 3 files changed, 166 insertions(+), 14 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 eca098584..90a7985c0 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html @@ -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; } @@ -33,13 +51,16 @@ + + + + + + - - - 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 b50442db3..786cbf874 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 @@ -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 = $(""); tabGroup.append("
  • Ring-bearer (0)
    • "); @@ -16,18 +22,63 @@ var DeckPanel = Class.extend({ tabGroup.append("
  • Shadow (0)
    • "); deckDiv.append(tabGroup); - this.ringBearerDiv = $("
    "); + this.ringBearerDiv = $("
    "); deckDiv.append(this.ringBearerDiv); - this.ringDiv = $("
    "); + this.ringDiv = $("
    "); deckDiv.append(this.ringDiv); - this.sitesDiv = $("
    "); + this.sitesDiv = $("
    "); deckDiv.append(this.sitesDiv); - this.fpDiv = $("
    "); + this.fpDiv = $("
    "); deckDiv.append(this.fpDiv); - this.shadowDiv = $("
    "); + this.shadowDiv = $("
    "); 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(); + } }); \ 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 52eb7f6c1..b354b6bb3 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 @@ -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 ""; + createCollectionCardElem: function(props) { + var cardDiv = $("
    "); + this.appendCardElemDetails(cardDiv, props); + return cardDiv; + }, + + createDeckCardElem: function(props) { + var cardDiv = $("
    "); + this.appendCardElemDetails(cardDiv, props); + return cardDiv; + }, + + appendCardElemDetails: function(cardDiv, props) { + cardDiv.append("
    "); + if (props["type"] == "card") + cardDiv.append("
    "); + cardDiv.append("
    "); + }, 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() {