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

Display card information window.

Browse Source
This commit is contained in:
marcins78@gmail.com
2012-12-23 14:33:43 +00:00
parent 035d3923dc
commit c19f7b0100
4 changed files with 144 additions and 34 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

@@ -72,6 +72,7 @@
<script type="text/javascript" src="js/gemp-012/jCards.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/CardInformationDialog.js"></script>
<script type="text/javascript" src="js/gemp-012/deckBuildingUi2.js"></script>
<script type="text/javascript">

45
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardInformationDialog.js Normal file
View File

@@ -0,0 +1,45 @@
var CardInformationDialog = Class.extend({
infoDialog: null,
init:function () {
this.infoDialog = $("<div></div>")
.dialog({
autoOpen:false,
closeOnEscape:true,
resizable:false,
title:"Card information"
});
},
showCardInfo: function(blueprintId) {
var card = new Card(blueprintId);
this.infoDialog.html("");
this.infoDialog.html("<div style='scroll: auto'></div>");
this.infoDialog.append(createFullCardDiv(card.imageUrl, card.foil, card.horizontal, card.isPack()));
if (card.hasWikiInfo())
this.infoDialog.append("<div><a href='" + card.getWikiLink() + "' target='_blank'>Wiki</a></div>");
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var horSpace = 30;
var vertSpace = 45;
if (card.horizontal) {
// 500x360
this.infoDialog.dialog({width:Math.min(500 + horSpace, windowWidth), height:Math.min(380 + vertSpace, windowHeight)});
} else {
// 360x500
this.infoDialog.dialog({width:Math.min(360 + horSpace, windowWidth), height:Math.min(520 + vertSpace, windowHeight)});
}
this.infoDialog.dialog("open");
},
isOpened: function() {
return this.infoDialog.dialog("isOpen")
},
close: function() {
this.infoDialog.dialog("close");
}
});

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

@@ -60,7 +60,7 @@ var DeckPanel = Class.extend({
return true;
});
ringBearerGroup.setZIndexBase(100);
ringBearerGroup.setMaxCardHeight(200);
ringBearerGroup.setMaxCardHeight(300);
this.ringBearerContainer.addCardGroup("main", ringBearerGroup);
this.ringContainer = new CardContainer(this.ringDiv, this.layoutCardContainer);
@@ -69,7 +69,7 @@ var DeckPanel = Class.extend({
return true;
});
ringGroup.setZIndexBase(100);
ringGroup.setMaxCardHeight(200);
ringGroup.setMaxCardHeight(300);
this.ringContainer.addCardGroup("main", ringGroup);
this.sitesContainer = new CardContainer(this.sitesDiv, this.layoutCardContainer);
@@ -78,7 +78,7 @@ var DeckPanel = Class.extend({
return true;
});
sitesGroup.setZIndexBase(100);
sitesGroup.setMaxCardHeight(200);
sitesGroup.setMaxCardHeight(300);
this.sitesContainer.addCardGroup("main", sitesGroup);
this.fpContainer = new CardContainer(this.fpDiv, this.layoutCardContainer);
@@ -87,7 +87,7 @@ var DeckPanel = Class.extend({
return true;
});
fpGroup.setZIndexBase(100);
fpGroup.setMaxCardHeight(200);
fpGroup.setMaxCardHeight(300);
this.fpContainer.addCardGroup("main", fpGroup);
this.shadowContainer = new CardContainer(this.shadowDiv, this.layoutCardContainer);
@@ -96,7 +96,7 @@ var DeckPanel = Class.extend({
return true;
});
shadowGroup.setZIndexBase(100);
shadowGroup.setMaxCardHeight(200);
shadowGroup.setMaxCardHeight(300);
this.shadowContainer.addCardGroup("main", shadowGroup);
},

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

@@ -15,6 +15,8 @@ var GempLotrDeckBuildingUI2 = Class.extend({
cardInCollectionId:0,
cardInDeckId:0,
cardInformationDialog: null,
// Card properties:
// type: pack, card
// blueprintId: id of the blueprint as in server
@@ -65,10 +67,59 @@ var GempLotrDeckBuildingUI2 = Class.extend({
this.collectionType = "default";
this.cardFilter.getCollection();
this.cardInformationDialog = new CardInformationDialog();
$("body").click(
function (event) {
return that.clickCardFunction(event);
});
function (event) {
return that.clickCardFunction(event);
});
$("body").mousedown(
function (event) {
return that.dragStartCardFunction(event);
});
$("body").mouseup(
function (event) {
return that.dragStopCardFunction(event);
});
},
dragCardProps:null,
dragStartX:null,
dragStartY:null,
successfulDrag:null,
dragStartCardFunction:function (event) {
this.successfulDrag = false;
var tar = $(event.target);
if (tar.hasClass("clickArea")) {
tar = tar.parent();
tar = tar.parent();
var cardElem = tar.parent();
var cardProps = cardElem.data("props");
if (event.which == 1) {
this.dragCardProps = cardProps;
this.dragStartX = event.clientX;
this.dragStartY = event.clientY;
return false;
}
}
return true;
},
dragStopCardFunction:function (event) {
if (this.dragCardProps != null) {
if (this.dragStartY - event.clientY >= 20) {
this.cardInformationDialog.showCardInfo(this.dragCardProps["blueprintId"]);
this.successfulDrag = true;
}
this.dragCardProps = null;
this.dragStartX = null;
this.dragStartY = null;
return false;
}
return true;
},
clickCardFunction: function(event) {
@@ -76,22 +127,35 @@ var GempLotrDeckBuildingUI2 = Class.extend({
if (tar.length == 1 && tar[0].tagName == "A")
return true;
if (!this.successfulDrag && this.cardInformationDialog.isOpened()) {
this.cardInformationDialog.close();
event.stopPropagation();
return false;
}
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 cardProps = cardElem.data("props");
this.addCardToDeck(cardProps["type"], cardProps["group"],
cardProps["blueprintId"], cardProps["image"]);
this.updateCardCount(cardElem, cardProps);
} else if (tar.hasClass("cardInDeck")) {
// remove card from deck
this.deckPanel.removeCardAndUpdate(cardElem, cardElem.data("id"), cardElem.data("props"));
this.updateCardCounts();
var cardProps = cardElem.data("props");
if (event.which == 1) {
if (!this.successfulDrag) {
// If card in collection
if (event.shiftKey) {
this.cardInformationDialog.showCardInfo(cardProps["blueprintId"]);
} else if (tar.hasClass("cardInCollection")) {
// add card to deck
this.addCardToDeck(cardProps["type"], cardProps["group"],
cardProps["blueprintId"], cardProps["image"]);
this.updateCardCount(cardElem, cardProps);
} else if (tar.hasClass("cardInDeck")) {
// remove card from deck
this.deckPanel.removeCardAndUpdate(cardElem, cardElem.data("id"), cardProps);
this.updateCardCounts();
}
}
}
}
return true;
@@ -109,12 +173,12 @@ var GempLotrDeckBuildingUI2 = Class.extend({
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);
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) {
@@ -136,7 +200,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
props["image"] = card.imageUrl;
props["group"] = group;
this.collectionContainer.addCard(this.createCollectionCardElem(props), ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
this.collectionContainer.addCard(this.createCollectionCardElem(props), "" + (this.cardInCollectionId++), props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
},
updateCardCount: function(cardDiv, props) {
@@ -176,9 +240,9 @@ var GempLotrDeckBuildingUI2 = Class.extend({
widthToHeightScaleInCollection: function(cardId, props) {
if (props["hor"])
return 500/360;
else
return 360/500;
return 500 / 360;
else
return 360 / 500;
},
layoutCardInCollection: function(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight) {
@@ -186,9 +250,9 @@ var GempLotrDeckBuildingUI2 = Class.extend({
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"});
$(".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+"%"});
$(".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});
},
@@ -197,9 +261,9 @@ var GempLotrDeckBuildingUI2 = Class.extend({
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"});
$(".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+"%"});
$(".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"]);
@@ -213,7 +277,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
layoutUI: function(collectionWidth, collectionHeight, deckWidth, deckHeight) {
this.cardFilter.layoutPageUi(0, 0, collectionWidth);
this.collectionContentsDiv.css({left: "0px", top: "0px", width: collectionWidth - 3 + "px", height: collectionHeight - 38 + "px"});
this.collectionContainer.setLayout(0, 0, collectionWidth-3, collectionHeight-38);
this.collectionContainer.setLayout(0, 0, collectionWidth - 3, collectionHeight - 38);
this.deckPanel.layoutUi(0, 0, deckWidth, deckHeight);
}
});