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

Working on new deck builder.

Browse Source
This commit is contained in:
marcins78@gmail.com
2012-11-22 21:04:35 +00:00
parent a67101834b
commit 47cb8052c6
9 changed files with 979 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,11 @@
.panel {
overflow: hidden !important;
}
}
.card {
position: absolute;
}
</style>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
@@ -32,7 +36,12 @@
<script type="text/javascript" src="js/gemp-011/communication.js"></script>
<script type="text/javascript" src="js/gemp-011/logging.js"></script>
<script type="text/javascript" src="js/gemp-011/commonUi.js"></script>
<script type="text/javascript" src="js/gemp-011/cardFilter.js"></script>
<script type="text/javascript" src="js/gemp-011/jCards.js"></script>
<script type="text/javascript" src="js/gemp-011/CardContainer.js"></script>
<script type="text/javascript" src="js/gemp-011/CardGroup.js"></script>
<script type="text/javascript" src="js/gemp-011/RowCardLayoutCardGroup.js"></script>
<script type="text/javascript" src="js/gemp-011/cardFilter2.js"></script>
<script type="text/javascript" src="js/gemp-011/DeckPanel.js"></script>
<script type="text/javascript" src="js/gemp-011/deckBuildingUi2.js"></script>
<script type="text/javascript">
@@ -67,7 +76,7 @@
$("#paging"),
$("#collectionContents"),
$("#deckDiv")
);
);
var doLayout = function() {
var collectionWidth = $("#collectionDiv").width();
@@ -107,11 +116,11 @@
</head>
<body>
<div id='northPanel' class="ui-layout-north panel">
<div id='northPanel' class="ui-layout-north panel" style="padding: 0;">
<div id="collectionFilterDiv" class="ui-layout-west panel"></div>
<div id="collectionDiv" class="ui-layout-center panel">
<div id="paging"></div>
<div id="collectionContents" class="ui-widget-content"></div>
<div id="collectionContents" class="ui-widget-content" style="position: relative"></div>
</div>
</div>
<div id="deckPanel" class="ui-layout-center panel">

168
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/AttachedCardsLayoutCardGroup.js Normal file
View File

@@ -0,0 +1,168 @@
var AttachedCardsLayoutCardGroup = RowCardLayoutCardGroup.extend({
attachedGroupsLeft: null,
attachedGroupsTop: null,
attachedGroupsFinderFunc: null,
attachedGroupsRootRecognizeFunc: null,
init: function (cardContainerDiv, cardContainFunc) {
this._super(cardContainerDiv, cardContainFunc);
this.attachedGroupsLeft = new Array();
this.attachedGroupsTop = new Array();
this.attachedGroupsFinderFunc = new Array();
this.attachedGroupsRootRecognizeFunc = new Array();
},
addAttachedGroup: function(left, top, rootRecognizeFunc, finderFunc) {
this.attachedGroupsLeft.push(left);
this.attachedGroupsTop.push(top);
this.attachedGroupsRootRecognizeFunc.push(rootRecognizeFunc);
this.attachedGroupsFinderFunc.push(finderFunc);
},
iterAttached: function(cardDiv, cardId, props, rootRecognizeFunc, finderFunc, func) {
if (!rootRecognizeFunc(cardDiv, cardId, props))
return;
$(".card", this.cardContainerDiv).each(
function() {
var cardDivAtt = $(this);
var cardIdAtt = cardDivAtt.data("id");
var propsAtt = cardDivAtt.data("props");
var layout = cardDivAtt.data("layout");
var widthToHeightScaleFunc = cardDivAtt.data("widthToHeight");
if (finderFunc(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt))
func(cardDivAtt, cardIdAtt, propsAtt, layout, widthToHeightScaleFunc);
});
},
getCardHeightScale: function(cardDiv, cardId, props) {
var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
return Math.min(1, 1 / (cardBox.bottom - cardBox.top));
},
getCardBox: function(cardDiv, cardId, props) {
var cardRatio = cardDiv.data("widthToHeight")(cardId, props);
var result = {};
result.left = 0;
result.top = 0;
result.right = Math.min(1, cardRatio);
result.bottom = Math.min(1, 1 / cardRatio);
return result;
},
getCardGroupBox: function(cardDiv, cardId, props) {
var that = this;
var minLeft = 0;
var minTop = 0;
var maxRight = Math.min(1, cardDiv.data("widthToHeight")(cardId, props));
var maxBottom = Math.min(1, 1 / cardDiv.data("widthToHeight")(cardId, props));
var cardWidth = maxRight;
var cardHeight = maxBottom;
for (var i = 0; i < this.attachedGroupsFinderFunc.length; i++) {
var attachFunc = this.attachedGroupsFinderFunc[i];
var rootRecognizeFunc = this.attachedGroupsRootRecognizeFunc[i];
var attachLeft = this.attachedGroupsLeft[i];
var attachTop = this.attachedGroupsTop[i];
var attIndex = 0;
this.iterAttached(cardDiv, cardId, props, rootRecognizeFunc, attachFunc,
function(attCardDiv, attCardId, attProps, layout, attWidthToHeightRatioFunc) {
attIndex++;
var attBox = that.getCardBox(attCardDiv, attCardId, attProps);
var attWidth = attBox.right - attBox.left;
var attHeight = attBox.bottom - attBox.top;
if (attachLeft < 0) {
maxRight = Math.max(maxRight, attachLeft * attIndex + attWidth);
} else if (attachLeft > 0) {
minLeft = Math.min(minLeft, cardWidth + attachLeft*attIndex - attWidth);
}
if (attachTop < 0) {
maxBottom = Math.max(maxBottom, attachTop * attIndex + attHeight);
} else if (attachTop > 0) {
minTop = Math.min(minTop, cardHeight + attachTop*attIndex - attHeight);
}
});
if (attachLeft < 0)
minLeft = Math.min(minLeft, attachLeft * attIndex);
else
maxRight = Math.max(maxRight, cardWidth + attachLeft * attIndex);
if (attachTop < 0)
minTop = Math.min(minTop, attachTop * attIndex);
else
maxBottom = Math.max(maxBottom, cardHeight + attachTop * attIndex);
}
var result = {};
result.left = minLeft;
result.top = minTop;
result.right = maxRight;
result.bottom = maxBottom;
return result;
},
getCardBoxRatio: function(cardDiv, cardId, props) {
var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
var result = {};
result.x = cardBox.right - cardBox.left;
result.y = cardBox.bottom - cardBox.top;
return result;
},
layoutCardGroup: function(cardDiv, cardId, props, layout, zIndex, cardBox, boxLeft, boxTop, boxWidth, boxHeight) {
var that = this;
var pixelSize = boxWidth / (cardBox.right - cardBox.left);
var cardGroupHeight = pixelSize * (cardBox.bottom - cardBox.top);
var cardGroupWidth = pixelSize * (cardBox.right - cardBox.left);
var cardRatio = cardDiv.data("widthToHeight")(cardId, props);
var cardWidth = pixelSize * Math.min(1, cardRatio);
var cardHeight = cardWidth / cardRatio;
var cardLeft = boxLeft - cardBox.left * pixelSize;
var cardTop = boxTop - cardBox.top * pixelSize + (boxHeight - cardGroupHeight) / 2;
this.layoutOneCard(cardDiv, cardId, props, layout, zIndex, cardLeft, cardTop, cardWidth, cardHeight);
zIndex--;
for (var i = 0; i < this.attachedGroupsFinderFunc.length; i++) {
var attachFunc = this.attachedGroupsFinderFunc[i];
var rootRecognizeFunc = this.attachedGroupsRootRecognizeFunc[i];
var attachLeft = this.attachedGroupsLeft[i];
var attachTop = this.attachedGroupsTop[i];
var index = 0;
this.iterAttached(cardDiv, cardId, props, rootRecognizeFunc, attachFunc,
function(attCardDiv, attCardId, attProps, layout, attWidthToHeightRatioFunc) {
index++;
var attCardBox = that.getCardBox(attCardDiv, attCardId, attProps);
var attWidth = pixelSize * (attCardBox.right - attCardBox.left);
var attHeight = pixelSize * (attCardBox.bottom - attCardBox.top);
var attLeft;
if (attachLeft <= 0)
attLeft = cardLeft + index * pixelSize * attachLeft;
else
attLeft = cardLeft + cardWidth - attWidth + index * pixelSize * attachLeft;
var attTop;
if (attachTop <= 0)
attTop = cardTop + index * pixelSize * attachTop;
else
attTop = cardTop + cardHeight - attHeight + index * pixelSize * attachTop;
that.layoutOneCard(attCardDiv, attCardId, attProps, layout, zIndex,
attLeft, attTop,
attWidth, attHeight);
zIndex--;
});
}
},
layoutCardBox: function(cardDiv, cardId, props, layout, boxLeft, boxTop, boxWidth, boxHeight, ratio) {
var that = this;
var zIndex = this.zIndexBase;
var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
this.layoutCardGroup(cardDiv, cardId, props, layout, zIndex, cardBox, boxLeft, boxTop, boxWidth, boxHeight);
}
});

38
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardContainer.js Normal file
View File

@@ -0,0 +1,38 @@
// This is a logical, and not a physical object.
// Its purpose is to maintain order and control over multiple card groups
var CardContainer = Class.extend({
cardContainerDiv: null,
cardGroups: null,
layoutFunc: null,
init: function(cardContainerDiv, layoutFunc) {
this.cardContainerDiv = cardContainerDiv;
this.cardGroups = {};
this.layoutFunc = layoutFunc;
},
addCard: function(elem, cardId, props, layoutFunc, widthToHeightScaleFunc) {
var cardDiv = $("<div class='card'></div>");
cardDiv.append(elem);
this.cardContainerDiv.append(cardDiv);
cardDiv.data("id", cardId);
cardDiv.data("props", props);
cardDiv.data("layout", layoutFunc);
cardDiv.data("widthToHeight", widthToHeightScaleFunc);
},
addCardGroup: function(name, cardGroup) {
this.cardGroups[name] = cardGroup;
},
setLayout: function(left, top, width, height) {
this.layoutFunc(this.cardGroups, left, top, width, height);
},
layoutCards: function() {
iterObj(this.cardGroups,
function (groupName, cardGroup) {
cardGroup.layoutCards();
});
}
});

52
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/CardGroup.js Normal file
View File

@@ -0,0 +1,52 @@
var CardGroup = Class.extend({
cardContainerDiv: null,
cardContainFunc: null,
left: null,
top: null,
width: null,
height: null,
init: function(cardContainerDiv, cardContainFunc) {
this.cardContainerDiv = cardContainerDiv;
this.cardContainFunc = cardContainFunc;
},
iterCards: function(func) {
var that = this;
$(".card", this.cardContainerDiv).each(
function() {
var cardDiv = $(this);
var cardId = cardDiv.data("id");
var props = cardDiv.data("props");
var layout = cardDiv.data("layout");
if (that.cardContainFunc(cardDiv, cardId, props))
func(cardDiv, cardId, props, layout);
});
},
findCardPropsById: function(cardId) {
var result = null;
$(".card", this.cardContainerDiv).each(
function() {
var cardDiv = $(this);
var foundCardId = cardDiv.data("id");
if (foundCardId == cardId)
result = cardDiv.data("props");
});
return result;
},
setLayout: function(left, top, width, height) {
this.left = left;
this.top = top;
this.width = width;
this.height = height;
this.layoutCards();
},
layoutCards: function() {
log("CardGroup::layoutCards - This method should be overriden");
}
});

17
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/DeckPanel.js Normal file
View File

@@ -0,0 +1,17 @@
var DeckPanel = Class.extend({
deckDiv:null,
init:function (deckDiv) {
this.deckDiv = deckDiv;
$(this.deckDiv).tabs();
},
clearDeck: function() {
},
layoutUi: function(x, y, width, height) {
}
});

185
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/RowCardLayoutCardGroup.js Normal file
View File

@@ -0,0 +1,185 @@
var RowCardLayoutCardGroup = CardGroup.extend({
padding: 3,
zIndexBase: 0,
maxCardHeight: null,
init: function (cardContainerDiv, cardContainFunc) {
this._super(cardContainerDiv, cardContainFunc);
},
setMaxCardHeight: function(maxCardHeight) {
this.maxCardHeight = maxCardHeight;
},
setZIndexBase: function(zIndexBase) {
this.zIndexBase = zIndexBase;
},
getCardHeightScale: function(cardDiv, cardId, props) {
return 1;
},
getCardBoxRatio: function(cardDiv, cardId, props) {
var result = {};
result.x = Math.min(1, cardDiv.data("widthToHeight")(cardId, props));
result.y = Math.min(1, 1 / cardDiv.data("widthToHeight")(cardId, props));
return result;
},
layoutCards: function() {
var that = this;
var ratios = {};
var scale = 1;
this.iterCards(
function(cardDiv, cardId, props, layout) {
ratios[cardId] = that.getCardBoxRatio(cardDiv, cardId, props);
scale = Math.min(scale, that.getCardHeightScale(cardDiv, cardId, props));
});
if (!this.tryLayoutInOneRow(ratios, scale)) {
var rows = 2;
if (this.maxCardHeight != null)
rows = Math.max(rows, Math.ceil((this.height + this.padding) / (this.maxCardHeight + this.padding)));
while (true) {
if (this.canLayoutInRows(ratios, rows, scale)) {
this.layoutInRows(ratios, rows, scale);
return;
}
rows++;
}
}
},
canLayoutInRows: function(ratios, rows, scale) {
//log("Can layout in rows: "+rows);
var that = this;
var rowHeight = this.height / rows - this.padding * (rows - 1);
var ascentLeft = 0;
var cardRowCount = 0;
var row = 0;
this.iterCards(
function(cardDiv, cardId, props, layout) {
var cardWidth = ratios[cardId].x * rowHeight * scale;
cardRowCount++;
if (cardRowCount == 1) {
ascentLeft += that.padding + cardWidth;
} else {
if (ascentLeft + that.padding + cardWidth > that.width) {
ascentLeft = 0;
row++;
ascentLeft += that.padding + cardWidth;
cardRowCount = 1;
} else {
ascentLeft += that.padding + cardWidth;
}
}
});
return row < rows;
},
layoutInRows: function(ratios, rows, scale) {
var that = this;
var rowHeight = this.height / rows - this.padding * (rows - 1);
var ascentLeft = 0;
var ascentTop = 0;
var cardRowCount = 0;
this.iterCards(
function(cardDiv, cardId, props, layout) {
var ratio = ratios[cardId];
var boxWidth = ratio.x * rowHeight * scale;
cardRowCount++;
if (cardRowCount == 1) {
that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
ascentLeft += that.padding + boxWidth;
} else {
if (ascentLeft + that.padding + boxWidth > that.width) {
ascentLeft = 0;
ascentTop += that.padding + rowHeight;
that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
ascentLeft += that.padding + boxWidth;
cardRowCount = 1;
} else {
that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
ascentLeft += that.padding + boxWidth;
}
}
});
},
tryLayoutInOneRow: function(ratios, scale) {
var totalRatio = 0;
var cardCount = 0;
this.iterCards(
function(cardDiv, cardId, props, layout) {
cardCount++;
totalRatio += ratios[cardId].x;
});
var availableCardsWidth = this.width - this.padding * (cardCount - 1);
var maxCardHeight = this.height;
if (this.maxCardHeight != null)
maxCardHeight = Math.min(this.maxCardHeight, maxCardHeight);
var oneRowCardWidths = maxCardHeight * totalRatio * scale;
if (oneRowCardWidths <= availableCardsWidth) {
this.layoutInOneFullRow(ratios, scale);
return true;
} else {
var cardHeightInTwoRows = this.height / 2 - this.padding;
var cardHeightToFitAll = availableCardsWidth / (totalRatio * scale)
if (cardHeightToFitAll >= cardHeightInTwoRows) {
this.layoutInOnePartialRow(ratios, cardHeightToFitAll, scale);
return true;
}
}
return false;
},
layoutInOnePartialRow: function(ratios, rowHeight, scale) {
var that = this;
var left = 0;
var index = 0;
this.iterCards(
function(cardDiv, cardId, props, layout) {
var ratio = ratios[cardId];
var boxWidth = ratio.x * rowHeight * scale;
that.layoutCardBox(cardDiv, cardId, props, layout, that.left + left, that.top, boxWidth, rowHeight, ratio);
left += boxWidth + that.padding;
index++;
});
},
layoutInOneFullRow: function(ratios, scale) {
var that = this;
var left = 0;
var index = 0;
this.iterCards(
function(cardDiv, cardId, props, layout) {
var ratio = ratios[cardId];
var cardHeight = that.height;
if (that.maxCardHeight != null)
cardHeight = Math.min(cardHeight, that.maxCardHeight);
var boxWidth = ratio.x * cardHeight * scale;
that.layoutCardBox(cardDiv, cardId, props, layout, that.left + left, that.top, boxWidth, cardHeight, ratio);
left += boxWidth + that.padding;
index++;
});
},
layoutOneCard: function(cardDiv, cardId, props, layout, zIndex, cardLeft, cardTop, cardWidth, cardHeight) {
//log("layout card "+cardId+": "+cardLeft+","+cardTop+" "+cardWidth+"x"+cardHeight);
cardDiv.css({"zIndex": zIndex,"left": cardLeft + "px", "top": cardTop + "px", "width": cardWidth, "height": cardHeight});
layout(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight);
},
layoutCardBox: function(cardDiv, cardId, props, layout, boxLeft, boxTop, boxWidth, boxHeight, ratio) {
var cardLeft = boxLeft;
var cardWidth = boxWidth;
var cardHeight = cardWidth / cardDiv.data("widthToHeight")(cardId, props);
var cardTop = boxTop + (boxHeight - cardHeight) / 2;
this.layoutOneCard(cardDiv, cardId, props, layout, this.zIndexBase, cardLeft, cardTop, cardWidth, cardHeight);
}
});

400
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter2.js Normal file
View File

@@ -0,0 +1,400 @@
var CardFilter = Class.extend({
clearCollectionFunc:null,
addCardFunc:null,
finishCollectionFunc:null,
getCollectionFunc:null,
collectionType:null,
filter:null,
start:0,
count:18,
pageDiv:null,
fullFilterDiv:null,
filterDiv:null,
previousPageBut:null,
nextPageBut:null,
countSlider:null,
setSelect:null,
nameInput:null,
sortSelect:null,
raritySelect:null,
init:function (elem, pageElem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
this.getCollectionFunc = getCollectionFunc;
this.clearCollectionFunc = clearCollectionFunc;
this.addCardFunc = addCardFunc;
this.finishCollectionFunc = finishCollectionFunc;
this.filter = "";
this.buildUi(elem, pageElem);
},
enableDetailFilters:function (enable) {
$("#culture1").buttonset("option", "disabled", !enable);
$("#culture2").buttonset("option", "disabled", !enable);
$("#cardType").prop("disabled", !enable);
$("#keyword").prop("disabled", !enable);
},
setFilter:function (filter) {
this.filter = filter;
this.start = 0;
this.getCollection();
},
setType:function (typeValue) {
$("#type").val(typeValue);
},
buildUi:function (elem, pageElem) {
var that = this;
this.pageDiv = $("<div></div>");
this.previousPageBut = $("<button id='previousPage' style='float: left;'>Previous page</button>").button({
text:false,
icons:{
primary:"ui-icon-circle-triangle-w"
},
disabled:true
}).click(
function () {
that.disableNavigation();
that.start -= that.count;
that.getCollection();
});
this.nextPageBut = $("<button id='nextPage' style='float: right;'>Next page</button>").button({
text:false,
icons:{
primary:"ui-icon-circle-triangle-e"
},
disabled:true
}).click(
function () {
that.disableNavigation();
that.start += that.count;
that.getCollection();
});
this.countSlider = $("<div id='countSlider' style='left: 50px; top: 10px; width: 200px;'></div>").slider({
value:18,
min:4,
max:40,
step:1,
disabled:true,
slide:function (event, ui) {
that.start = 0;
that.count = ui.value;
that.getCollection();
}
});
this.pageDiv.append(this.previousPageBut);
this.pageDiv.append(this.nextPageBut);
this.pageDiv.append(this.countSlider);
pageElem.append(this.pageDiv);
this.fullFilterDiv = $("<div></div>");
this.setSelect = $("<select style='width: 130px; font-size: 80%;'>"
+ "<option value=''>All Sets</option>"
+ "<option value='fotr_block'>Fellowship Block</option>"
+ "<option value='ttt_block'>Towers Block</option>"
+ "<option value='king_block'>King Block</option>"
+ "<option value='war_block'>War of the Ring Block</option>"
+ "<option value='hunter_block'>Hunters Block</option>"
+ "<option value='towers_standard'>Towers Standard</option>"
+ "<option value='movie'>Movie Block</option>"
+ "<option value='war_standard'>War of the Ring standard</option>"
+ "<option value='standard'>Standard</option>"
+ "<option value='0'>00 - Promo</option>"
+ "<option value='1'>01 - The Fellowship of the Ring</option>"
+ "<option value='2'>02 - Mines of Moria</option>"
+ "<option value='3'>03 - Realms of the Elf-lords</option>"
+ "<option value='4'>04 - The Two Towers</option>"
+ "<option value='5'>05 - Battle of Helm's Deep</option>"
+ "<option value='6'>06 - Ents of Fangorn</option>"
+ "<option value='7'>07 - The Return of the King</option>"
+ "<option value='8'>08 - Siege of Gondor</option>"
+ "<option value='9'>09 - Reflections</option>"
+ "<option value='10'>10 - Mount Doom</option>"
+ "<option value='11'>11 - Shadows</option>"
+ "<option value='12'>12 - Black Rider</option>"
+ "<option value='13'>13 - Bloodlines</option>"
+ "<option value='14'>14 - Expanded Middle-earth</option>"
+ "<option value='15'>15 - The Hunters</option>"
+ "<option value='16'>16 - The Wraith Collection</option>"
+ "<option value='17'>17 - Rise of Saruman</option>"
+ "<option value='18'>18 - Treachery & Deceit</option>"
+ "<option value='19'>19 - Ages End</option>"
+ "</select>");
this.nameInput = $("<input type='text' value='Card name' style='width: 130px; font-size: 70%;'>");
this.sortSelect = $("<select style='width: 80px; font-size: 80%;'>"
+ "<option value=''>Sort by:</option>"
+ "<option value='name,collectorInfo'>Name</option>"
+ "<option value='twilight,name,collectorInfo'>Twilight</option>"
+ "<option value='siteNumber,name'>Site number</option>"
+ "<option value='strength,name,collectorInfo'>Strength</option>"
+ "<option value='vitality,name,collectorInfo'>Vitality</option>"
+ "<option value='cardType,name,collectorInfo'>Card type</option>"
+ "<option value='culture,name,collectorInfo'>Culture</option>"
+ "<option value='collectorInfo'>Collector's Info</option>"
+ "</select>");
this.raritySelect = $("<select style='width: 40px; font-size: 80%;'>"
+ "<option value=''>Rarity:</option>"
+ "<option value='R'>Rare</option>"
+ "<option value='U'>Uncommon</option>"
+ "<option value='C'>Common</option>"
+ "<option value='A'>Alternate Image</option>"
+ "<option value='P'>Promo</option>"
+ "<option value='X'>Rare+</option>"
+ "<option value='S'>Fixed</option>"
+ "</select>");
this.fullFilterDiv.append(this.setSelect);
this.fullFilterDiv.append(this.nameInput);
this.fullFilterDiv.append(this.sortSelect);
this.fullFilterDiv.append(this.raritySelect);
elem.append(this.fullFilterDiv);
this.filterDiv = $("<div></div>");
this.filterDiv.append("<div id='culture1'>"
+ "<input type='checkbox' id='DWARVEN'/><label for='DWARVEN' id='labelDWARVEN'><img src='images/cultures/dwarven.png'/></label>"
+ "<input type='checkbox' id='ELVEN'/><label for='ELVEN' id='labelELVEN'><img src='images/cultures/elven.png'/></label>"
+ "<input type='checkbox' id='GANDALF'/><label for='GANDALF' id='labelGANDALF'><img src='images/cultures/gandalf.png'/></label>"
+ "<input type='checkbox' id='GONDOR'/><label for='GONDOR' id='labelGONDOR'><img src='images/cultures/gondor.png'/></label>"
+ "<input type='checkbox' id='ROHAN'/><label for='ROHAN' id='labelROHAN'><img src='images/cultures/rohan.png'/></label>"
+ "<input type='checkbox' id='SHIRE'/><label for='SHIRE' id='labelSHIRE'><img src='images/cultures/shire.png'/></label>"
+ "<input type='checkbox' id='GOLLUM'/><label for='GOLLUM' id='labelGOLLUM'><img src='images/cultures/gollum.png'/></label>"
+ "</div>");
this.filterDiv.append("<div id='culture2'>"
+ "<input type='checkbox' id='DUNLAND'/><label for='DUNLAND' id='labelDUNLAND'><img src='images/cultures/dunland.png'/></label>"
+ "<input type='checkbox' id='ISENGARD'/><label for='ISENGARD' id='labelISENGARD'><img src='images/cultures/isengard.png'/></label>"
+ "<input type='checkbox' id='MEN'/><label for='MEN' id='labelMEN'><img src='images/cultures/men.png'/></label>"
+ "<input type='checkbox' id='MORIA'/><label for='MORIA' id='labelMORIA'><img src='images/cultures/moria.png'/></label>"
+ "<input type='checkbox' id='ORC'/><label for='ORC' id='labelORC'><img src='images/cultures/orc.png'/></label>"
+ "<input type='checkbox' id='RAIDER'/><label for='RAIDER' id='labelRAIDER'><img src='images/cultures/raider.png'/></label>"
+ "<input type='checkbox' id='SAURON'/><label for='SAURON' id='labelSAURON'><img src='images/cultures/sauron.png'/></label>"
+ "<input type='checkbox' id='URUK_HAI'/><label for='URUK_HAI' id='labelURUK_HAI'><img src='images/cultures/uruk_hai.png'/></label>"
+ "<input type='checkbox' id='WRAITH'/><label for='WRAITH' id='labelWRAITH'><img src='images/cultures/wraith.png'/></label>"
+ "</div>");
var combos = $("<div></div>");
combos.append(" <select id='cardType' style='font-size: 80%;'>"
+ "<option value=''>All Card Types</option>"
+ "<option value='COMPANION,ALLY,MINION'>Characters</option>"
+ "<option value='POSSESSION,ARTIFACT'>Items</option>"
+ "<option value='SITE'>Sites</option>"
+ "<option value='ALLY'>Allies</option>"
+ "<option value='ARTIFACT'>Artifacts</option>"
+ "<option value='COMPANION'>Companions</option>"
+ "<option value='CONDITION'>Conditions</option>"
+ "<option value='EVENT'>Events</option>"
+ "<option value='FOLLOWER'>Followers</option>"
+ "<option value='MINION'>Minions</option>"
+ "<option value='POSSESSION'>Possessions</option>"
+ "</select>");
combos.append(" <select id='keyword' style='font-size: 80%;'>"
+ "<option value=''>No keyword filtering</option>"
+ "<option value='ARCHER'>Archer</option>"
+ "<option value='BATTLEGROUND'>Battleground</option>"
+ "<option value='BESIEGER'>Besieger</option>"
+ "<option value='CORSAIR'>Corsair</option>"
+ "<option value='DWELLING'>Dwelling</option>"
+ "<option value='EASTERLING'>Easterling</option>"
+ "<option value='ENDURING'>Enduring</option>"
+ "<option value='ENGINE'>Engine</option>"
+ "<option value='FIERCE'>Fierce</option>"
+ "<option value='FOREST'>Forest</option>"
+ "<option value='FORTIFICATION'>Fortification</option>"
+ "<option value='HUNTER'>Hunter</option>"
+ "<option value='KNIGHT'>Knight</option>"
+ "<option value='LURKER'>Lurker</option>"
+ "<option value='MACHINE'>Machine</option>"
+ "<option value='MARSH'>Marsh</option>"
+ "<option value='MOUNTAIN'>Mountain</option>"
+ "<option value='MUSTER'>Muster</option>"
+ "<option value='PIPEWEED'>Pipeweed</option>"
+ "<option value='PLAINS'>Plains</option>"
+ "<option value='RANGER'>Ranger</option>"
+ "<option value='RING_BOUND'>Ring-bound</option>"
+ "<option value='RIVER'>River</option>"
+ "<option value='SEARCH'>Search</option>"
+ "<option value='SOUTHRON'>Southron</option>"
+ "<option value='SPELL'>Spell</option>"
+ "<option value='STEALTH'>Stealth</option>"
+ "<option value='TALE'>Tale</option>"
+ "<option value='TENTACLE'>Tentacle</option>"
+ "<option value='TRACKER'>Tracker</option>"
+ "<option value='TWILIGHT'>Twilight</option>"
+ "<option value='UNDERGROUND'>Underground</option>"
+ "<option value='UNHASTY'>Unhasty</option>"
+ "<option value='VALIANT'>Valiant</option>"
+ "<option value='VILLAGER'>Villager</option>"
+ "<option value='WARG_RIDER'>Warg-rider</option>"
+ "<option value='WEATHER'>Weather</option>"
+ "</select>");
combos.append(" <select id='type' style='font-size: 80%'>"
+ "<option value=''>All types</option>"
+ "<option value='pack'>Packs</option>"
+ "<option value='card'>Cards</option>"
+ "<option value='foil'>Foils</option>"
+ "<option value='nonFoil'>Non-foils</option>"
+ "<option value='tengwar'>Tengwar</option>"
+ "</select>");
this.filterDiv.append(combos);
elem.append(this.filterDiv);
$("#culture1").buttonset();
$("#culture2").buttonset();
var fullFilterChanged = function () {
that.start = 0;
that.getCollection();
return true;
};
this.setSelect.change(fullFilterChanged);
this.nameInput.change(fullFilterChanged);
this.sortSelect.change(fullFilterChanged);
this.raritySelect.change(fullFilterChanged);
var filterOut = function () {
that.filter = that.calculateNormalFilter();
that.start = 0;
that.getCollection();
return true;
};
$("#cardType").change(filterOut);
$("#keyword").change(filterOut);
$("#type").change(filterOut);
$("#labelDWARVEN,#labelELVEN,#labelGANDALF,#labelGONDOR,#labelROHAN,#labelSHIRE,#labelGOLLUM,#labelDUNLAND,#labelISENGARD,#labelMEN,#labelMORIA,#labelORC,#labelRAIDER,#labelSAURON,#labelURUK_HAI,#labelWRAITH").click(filterOut);
},
layoutUi:function (x, y, width, height) {
this.pageDiv.css({ position:"absolute", left:x, top:y, width:width, height:50 });
this.countSlider.css({width:width - 100});
this.fullFilterDiv.css({position:"absolute", left:x, top:y + 50, width:width, height:30});
this.filterDiv.css({ position:"absolute", left:x, top:y + 80, width:width, height:80 });
},
layoutPageUi: function(x, y, width) {
this.pageDiv.css({ left:x, top:y, width:width, height:36 });
this.countSlider.css({width:width - 100});
},
disableNavigation:function () {
this.previousPageBut.button("option", "disabled", true);
this.nextPageBut.button("option", "disabled", true);
this.countSlider.button("option", "disabled", true);
},
calculateNormalFilter:function () {
var cultures = new Array();
$("label", $("#culture1")).each(
function () {
if ($(this).hasClass("ui-state-active"))
cultures.push($(this).prop("id").substring(5));
});
$("label", $("#culture2")).each(
function () {
if ($(this).hasClass("ui-state-active"))
cultures.push($(this).prop("id").substring(5));
});
var cardType = $("#cardType option:selected").prop("value");
if (cardType == "")
cardType = "";
else
cardType = "cardType:" + cardType + " ";
var keyword = $("#keyword option:selected").prop("value");
if (keyword != "")
keyword = " keyword:" + keyword;
var type = $("#type option:selected").prop("value");
if (type != "")
type = " type:" + type;
if (cultures.length > 0)
return cardType + " culture:" + cultures + keyword + type;
else
return cardType + keyword + type;
},
calculateFullFilterPostfix:function () {
var setNo = $("option:selected", this.setSelect).prop("value");
if (setNo != "")
setNo = " set:" + setNo;
var sort = $("option:selected", this.sortSelect).prop("value");
if (sort != "")
sort = " sort:" + sort;
var cardName = this.nameInput.val();
if (cardName == "Card name")
cardName = "";
else {
var cardNameElems = cardName.split(" ");
cardName = "";
for (var i = 0; i < cardNameElems.length; i++)
cardName += " name:" + cardNameElems[i];
}
var rarity = $("option:selected", this.raritySelect).prop("value");
if (rarity != "")
rarity = " rarity:" + rarity;
return setNo + sort + cardName + rarity;
},
getCollection:function () {
var that = this;
this.getCollectionFunc((this.filter + this.calculateFullFilterPostfix()).trim(), this.start, this.count, function (xml) {
that.displayCollection(xml);
});
},
displayCollection:function (xml) {
log(xml);
var root = xml.documentElement;
this.clearCollectionFunc(root);
var packs = root.getElementsByTagName("pack");
for (var i = 0; i < packs.length; i++) {
var packElem = packs[i];
var blueprintId = packElem.getAttribute("blueprintId");
var count = packElem.getAttribute("count");
this.addCardFunc(packElem, "pack", blueprintId, count);
}
var cards = root.getElementsByTagName("card");
for (var i = 0; i < cards.length; i++) {
var cardElem = cards[i];
var blueprintId = cardElem.getAttribute("blueprintId");
var count = cardElem.getAttribute("count");
this.addCardFunc(cardElem, "card", blueprintId, count);
}
this.finishCollectionFunc();
$("#previousPage").button("option", "disabled", this.start == 0);
var cnt = parseInt(root.getAttribute("count"));
$("#nextPage").button("option", "disabled", (this.start + this.count) >= cnt);
$("#countSlider").slider("option", "disabled", false);
}
});

8
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/common.js
View File

@@ -19,3 +19,11 @@ function formatPrice(price) {
function getDateString(date) {
return date.substring(0, 4) + "-" + date.substring(4, 6) + "-" + date.substring(6, 8);
}
function iterObj(obj, func) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
func(key, obj[key]);
}
}
}

118
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
View File

@@ -1,45 +1,121 @@
var GempLotrDeckBuildingUI2 = Class.extend({
comm:null,
collectionType:null,
cardFilter:null,
collectionContentsDiv:null,
deckDiv:null,
collectionContainer:null,
collectionGroup:null,
deckDiv: null,
cardFilter:null,
deckPanel:null,
padding: 3,
cardInCollectionId:0,
init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
this.collectionContentsDiv = collectionContentsDiv;
this.deckDiv = deckDiv;
var that = this;
this.collectionContainer = new CardContainer(collectionContentsDiv, this.layoutCollectionContainer);
this.collectionGroup = new RowCardLayoutCardGroup(collectionContentsDiv,
function() {
return true;
});
this.collectionGroup.setZIndexBase(10);
this.collectionContainer.addCardGroup("main", this.collectionGroup);
this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
this.cardFilter = new CardFilter(filterDiv, pageDiv,
function (filter, start, count, callback) {
that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
callback(xml);
}, {
"404":function () {
alert("You don't have collection of that type.");
}
function (filter, start, count, callback) {
that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
callback(xml);
}, {
"404":function () {
alert("You don't have collection of that type.");
}
});
},
function () {
that.clearCollection();
},
function (elem, type, blueprintId, count) {
that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
},
function () {
that.finishCollection();
});
},
function () {
that.clearCollection();
},
function (elem, type, blueprintId, count) {
that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
},
function () {
that.finishCollection();
});
this.deckPanel = new DeckPanel(deckDiv);
this.collectionType = "default";
this.cardFilter.getCollection();
},
layoutCollectionContainer : function(cardGroups, left, top, width, height) {
var padding = 3;
cardGroups["main"].setLayout(left + padding, top + padding, width - 2 * padding, height - 2 * padding);
},
clearCollection: function() {
$(".card", this.collectionContentsDiv).remove();
this.cardInCollectionId = 0;
},
addCardToCollection: function(type, blueprintId, count, side, contents) {
var props = {};
props["blueprintId"] = blueprintId;
props["count"] = count;
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;
}
} 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;
}
this.collectionContainer.addCard(cardDiv, ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
},
createCollectionCardElem: function(image) {
return "<img src='" + image + "' width='100%' height='100%'>";
},
widthToHeightScaleInCollection: function(cardId, props) {
if (props["hor"])
return 500/360;
else
return 360/500;
},
layoutCardInCollection: function() {
},
finishCollection: function() {
this.collectionContainer.layoutCards();
},
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.deckDiv.css({left: "0px", top: "0px", width: deckWidth+"px", height: deckHeight+"px"})
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.deckPanel.layoutUi(0, 0, deckWidth, deckHeight);
}
});