Committing a half-finished rework of the deckbuilding UI to be completed later
This commit is contained in:
Christian 'ketura' McCarty
@@ -0,0 +1,248 @@
|
||||
body {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.borderOverlay {
|
||||
border: 0px solid #000000;
|
||||
}
|
||||
|
||||
.foilOverlay {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.selectableCard > .borderOverlay {
|
||||
border: 2px solid #00ff00;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedCard > .borderOverlay {
|
||||
border: 2px solid #00cccc;
|
||||
}
|
||||
|
||||
.cardCount {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
font-size: 120%;
|
||||
font-weight: bolder;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ui-layout-east {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#editingDeck {
|
||||
vertical-align: top;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#deckStats {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ui-button-text-only .ui-button-text {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
button.navigation-butt {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.navigation-butt.ui-button-icon-only > .ui-button-text{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navigation-butt.ui-button-icon-only {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.ui-button-icon-only .ui-button-icon-primary.ui-icon {
|
||||
margin: auto auto auto -4px;
|
||||
}
|
||||
|
||||
#set {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#cardType {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#fullFiltering select {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#fullFiltering input {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#filtering select {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#messageDiv {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 180%;
|
||||
}
|
||||
|
||||
.menu-button.ui-button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-button > .ui-button-text {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button.navigation-butt {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.navigation-butt.ui-button-icon-only > .ui-button-text{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navigation-butt.ui-button-icon-only {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.ui-button-icon-only .ui-button-icon-primary.ui-icon {
|
||||
margin: auto auto auto -4px;
|
||||
}
|
||||
|
||||
#culture-buttons .ui-button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#collectionSelect {
|
||||
order: 100;
|
||||
}
|
||||
|
||||
#editingDeck {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.notesText {
|
||||
flex-grow: 1;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.notesDialog {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-horiz {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.flex-vert {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.card-group {
|
||||
border-radius: 7px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
#top-level {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#deckDiv {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 2px !important;
|
||||
}
|
||||
|
||||
#manage-deck-menu {
|
||||
color: #ffffff;
|
||||
font-size: 180%;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
#formatSelect {
|
||||
float: right;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#deck-overview {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#deck-view {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#left-deck-parts {
|
||||
height: 100%;
|
||||
flex-grow: 0;
|
||||
width: 30vh;
|
||||
}
|
||||
|
||||
|
||||
#rb-sites-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#ring-pair {
|
||||
flex-grow: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#ringBearerDiv, #ringDiv, #map-div {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
min-width: max(13vw,49%);
|
||||
min-height: 14vh;
|
||||
}
|
||||
|
||||
#sitesDiv {
|
||||
flex-grow: 5;
|
||||
|
||||
padding: 0 10px 30px 0;
|
||||
}
|
||||
|
||||
#sites-content {
|
||||
|
||||
}
|
||||
|
||||
#decksRegion {
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#fp-cards, #sh-cards {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#statsDiv {
|
||||
flex-grow: 0;
|
||||
height: 70px;
|
||||
overflow: auto;
|
||||
}
|
||||
168
gemp-lotr/gemp-lotr-async/src/main/web/deckBuild2.html
Normal file
168
gemp-lotr/gemp-lotr-async/src/main/web/deckBuild2.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html
|
||||
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<title>GEMP: LotR-TCG - Deckbuilder</title>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="images/icons/site.webmanifest">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/gemp-001/deckBuild.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
|
||||
<link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
|
||||
|
||||
<script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery.spinnercontrol.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery.layout.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/gemp-022/inheritance.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/common.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/logging.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/chat.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/communication.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/deliveryService.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/commonUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/cardFilter.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/gemp-022/jCardGroup.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/hobbit.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/set40.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/jCards.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/PC_Cards.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/gemp-022/hallUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/leagueResultsUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/tournamentResultsUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/statsUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/playerStatsUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/gameHistoryUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/deckBuildingUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/gameUi.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/gameAnimations.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript" src="src/DeckBuilder/deckBuilder.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="ui-layout-container" cz-shortcut-listen="true">
|
||||
|
||||
|
||||
<div id="deckDiv" class="ui-layout-center ui-layout-pane ui-layout-pane-center" style="padding:0px !important">
|
||||
<div class="flex-vert" id="deck-overview">
|
||||
|
||||
<div id="manage-deck-menu">
|
||||
|
||||
<button id="newDeckBut" title="New deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-document"></span>
|
||||
</button>
|
||||
|
||||
<button id="saveDeckBut" title="Save deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-disk"></span>
|
||||
</button>
|
||||
|
||||
<button id="renameDeckBut" title="Rename deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-pencil"></span>
|
||||
</button>
|
||||
|
||||
<button id="copyDeckBut" title="Copy deck to new" class="menu-button">
|
||||
<span class="ui-icon ui-icon-copy"></span>
|
||||
</button>
|
||||
|
||||
<button id="importDeckBut" title="Import Deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
|
||||
</button>
|
||||
|
||||
<button id="libraryListBut" title="Open Library" class="menu-button">
|
||||
<span class="ui-icon ui-icon-bookmark"></span>
|
||||
</button>
|
||||
|
||||
<button id="deckListBut" title="Deck list" class="menu-button">
|
||||
<span class="ui-icon ui-icon-suitcase"></span>
|
||||
</button>
|
||||
|
||||
<select id="formatSelect" style="">
|
||||
<option value="fotr_block">Fellowship Block</option>
|
||||
</select>
|
||||
|
||||
<button id="notesBut" title="Add/Edit Notes" class="menu-button">
|
||||
<span class="ui-icon ui-icon-plus"></span>
|
||||
</button>
|
||||
|
||||
<span id="editingDeck">New deck</span>
|
||||
|
||||
<select id="collectionSelect">
|
||||
<option value="default">All cards</option>
|
||||
<option value="permanent">My cards</option>
|
||||
<option value="trophy">Trophies</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="deck-view" class="flex-horiz">
|
||||
<div id="left-deck-parts" class="flex-vert" >
|
||||
<div id="ring-pair" class="flex-horiz" >
|
||||
<div id="ringBearerDiv">
|
||||
Ring Bearer
|
||||
<div id="rb-content" class="ui-widget-content card-group"></div>
|
||||
</div>
|
||||
<div id="ringDiv">
|
||||
Ring
|
||||
<div id="ring-content" class="ui-widget-content card-group"></div>
|
||||
</div>
|
||||
<div id="map-div">
|
||||
Map
|
||||
<div id="map-content" class="ui-widget-content card-group"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sitesDiv">
|
||||
Sites
|
||||
<div id="sites-content" class="ui-widget-content card-group"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="decksRegion" class="flex-vert" >
|
||||
<div id="fp-cards">
|
||||
<div id="freeps-content" class="ui-widget-content"></div>
|
||||
</div>
|
||||
<div id="sh-cards">
|
||||
<div id="shadow-content" class="ui-widget-content"></div>
|
||||
</div>
|
||||
<div id="statsDiv">
|
||||
<div id="deckStats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="collectionDiv" class="ui-layout-east ui-layout-pane ">
|
||||
<div id="cardCollectionDiv"></div>
|
||||
</div>
|
||||
|
||||
<div id="cardInfoDiv" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1"
|
||||
role="dialog" aria-labelledby="ui-dialog-title-1">
|
||||
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
|
||||
<span class="ui-dialog-title" id="ui-dialog-title-1">Card information</span>
|
||||
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
|
||||
<span class="ui-icon ui-icon-closethick">close</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ui-dialog-content ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -102,6 +102,54 @@ var VerticalBarGroup = CardGroup.extend({
|
||||
}
|
||||
});
|
||||
|
||||
var VerticalFlexGroup = CardGroup.extend({
|
||||
init:function (container, belongTest, createDiv) {
|
||||
this._super(container, belongTest, createDiv);
|
||||
},
|
||||
|
||||
setBounds:function (x, y, width, height) {
|
||||
this.layoutCards();
|
||||
},
|
||||
|
||||
layoutCards:function () {
|
||||
var cardsToLayout = this.getCardElems();
|
||||
|
||||
var cardCount = cardsToLayout.length;
|
||||
var totalHeight = 0;
|
||||
|
||||
for (var cardIndex in cardsToLayout)
|
||||
totalHeight += cardsToLayout[cardIndex].data("card").getHeightForWidth(this.width);
|
||||
|
||||
var topGap = 20;
|
||||
|
||||
var resultPadding = Math.min(this.padding, (this.height - totalHeight - topGap) / (cardCount - 1));
|
||||
|
||||
var x = this.x;
|
||||
var y = this.y + topGap;
|
||||
var index = 10;
|
||||
for (var cardIndex in cardsToLayout) {
|
||||
var cardElem = cardsToLayout[cardIndex];
|
||||
var cardData = cardElem.data("card");
|
||||
var cardHeight = (cardElem.data("card").getHeightForWidth(this.width));
|
||||
|
||||
if (cardData.attachedCards.length == 1) {
|
||||
this.layoutCard(cardData.attachedCards[0], x + (this.width - cardHeight) / 2, y - (this.width - cardHeight) / 2, cardHeight, this.width, index);
|
||||
index++;
|
||||
} else {
|
||||
for (var i = 0; i < cardData.attachedCards.length; i++) {
|
||||
this.layoutCard(cardData.attachedCards[i], x + i * (this.width - cardHeight) / (cardData.attachedCards.length - 1), y - (this.width - cardHeight) / 2, cardHeight, this.width, index);
|
||||
index++;
|
||||
}
|
||||
}
|
||||
|
||||
this.layoutCard(cardElem, x, y, this.width, cardHeight, index);
|
||||
|
||||
y += cardHeight + resultPadding;
|
||||
index++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var AdvPathCardGroup = CardGroup.extend({
|
||||
positions:null,
|
||||
currentPlayerIndex:null,
|
||||
@@ -346,6 +394,171 @@ var NormalCardGroup = CardGroup.extend({
|
||||
}
|
||||
});
|
||||
|
||||
var NormalFlexGroup = CardGroup.extend({
|
||||
|
||||
init:function (container, belongTest, createDiv) {
|
||||
this._super(container, belongTest, createDiv);
|
||||
},
|
||||
|
||||
setBounds:function (x, y, width, height) {
|
||||
|
||||
this.layoutCards();
|
||||
},
|
||||
|
||||
layoutCards:function () {
|
||||
var cardsToLayout = this.getCardElems();
|
||||
|
||||
var proportionsArray = this.getCardsWithAttachmentWidthProportion(cardsToLayout);
|
||||
|
||||
var rows = 0;
|
||||
var result = false;
|
||||
do {
|
||||
rows++;
|
||||
result = this.layoutInRowsIfPossible(cardsToLayout, proportionsArray, rows);
|
||||
} while (!result);
|
||||
},
|
||||
|
||||
getAttachedCardsWidth:function (maxDimension, cardData) {
|
||||
var result = 0;
|
||||
for (var i = 0; i < cardData.attachedCards.length; i++) {
|
||||
var attachedCardData = cardData.attachedCards[i].data("card");
|
||||
result += attachedCardData.getWidthForMaxDimension(maxDimension);
|
||||
result += this.getAttachedCardsWidth(maxDimension, attachedCardData);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
getCardsWithAttachmentWidthProportion:function (cardsToLayout) {
|
||||
var proportionsArray = new Array();
|
||||
for (var cardIndex in cardsToLayout) {
|
||||
var cardData = cardsToLayout[cardIndex].data("card");
|
||||
var cardWithAttachmentWidth = cardData.getWidthForMaxDimension(1000);
|
||||
cardWithAttachmentWidth += this.getAttachedCardsWidth(1000, cardData) * 0.2;
|
||||
proportionsArray.push(cardWithAttachmentWidth / 1000);
|
||||
}
|
||||
return proportionsArray;
|
||||
},
|
||||
|
||||
layoutInRowsIfPossible:function (cardsToLayout, proportionsArray, rowCount) {
|
||||
if (rowCount == 1) {
|
||||
var oneRowHeight = this.getHeightForLayoutInOneRow(proportionsArray);
|
||||
if (oneRowHeight * 2 + this.padding > this.height) {
|
||||
this.layoutInRow(cardsToLayout, oneRowHeight);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
if (this.tryIfCanLayoutInRows(rowCount, proportionsArray)) {
|
||||
this.layoutInRows(rowCount, cardsToLayout);
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getHeightForLayoutInOneRow:function (proportionsArray) {
|
||||
var totalWidth = 0;
|
||||
for (var cardIndex in proportionsArray)
|
||||
totalWidth += proportionsArray[cardIndex] * this.height;
|
||||
|
||||
var widthWithoutPadding = this.width - (this.padding * (proportionsArray.length - 1));
|
||||
if (totalWidth > widthWithoutPadding) {
|
||||
return Math.floor(this.height / (totalWidth / widthWithoutPadding));
|
||||
} else {
|
||||
return this.height;
|
||||
}
|
||||
},
|
||||
|
||||
tryIfCanLayoutInRows:function (rowCount, proportionsArray) {
|
||||
var rowHeight = (this.height - (this.padding * (rowCount - 1))) / rowCount;
|
||||
if (this.maxCardHeight != null)
|
||||
rowHeight = Math.min(this.maxCardHeight, rowHeight);
|
||||
var totalWidth = 0;
|
||||
var row = 0;
|
||||
for (var cardIndex in proportionsArray) {
|
||||
var cardWidthWithAttachments = proportionsArray[cardIndex] * rowHeight;
|
||||
totalWidth += cardWidthWithAttachments;
|
||||
if (totalWidth > this.width) {
|
||||
row++;
|
||||
if (row >= rowCount)
|
||||
return false;
|
||||
totalWidth = cardWidthWithAttachments;
|
||||
}
|
||||
totalWidth += this.padding;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
layoutAttached:function (cardData, y, height, layoutVars) {
|
||||
for (var i = 0; i < cardData.attachedCards.length; i++) {
|
||||
var attachedCardData = cardData.attachedCards[i].data("card");
|
||||
var attachedCardWidth = attachedCardData.getWidthForMaxDimension(height);
|
||||
this.layoutAttached(attachedCardData, y, height, layoutVars);
|
||||
this.layoutCard(cardData.attachedCards[i], this.x + layoutVars.x, this.y + y, attachedCardWidth, attachedCardData.getHeightForWidth(attachedCardWidth), layoutVars.index);
|
||||
layoutVars.x += Math.floor(attachedCardWidth * 0.2);
|
||||
layoutVars.index++;
|
||||
}
|
||||
},
|
||||
|
||||
layoutInRow:function (cardsToLayout, height) {
|
||||
if (this.maxCardHeight != null)
|
||||
height = Math.min(this.maxCardHeight, height);
|
||||
var layoutVars = {};
|
||||
layoutVars.x = 0;
|
||||
var y = Math.floor((this.height - height) / 2);
|
||||
|
||||
for (var cardIndex in cardsToLayout) {
|
||||
layoutVars.index = 10;
|
||||
var cardElem = cardsToLayout[cardIndex];
|
||||
var cardData = cardElem.data("card");
|
||||
var cardWidth = cardData.getWidthForMaxDimension(height);
|
||||
|
||||
this.layoutAttached(cardData, y, height, layoutVars)
|
||||
|
||||
this.layoutCard(cardElem, this.x + layoutVars.x, this.y + y, cardWidth, cardData.getHeightForWidth(cardWidth), layoutVars.index);
|
||||
layoutVars.x += cardWidth;
|
||||
layoutVars.x += this.padding;
|
||||
}
|
||||
},
|
||||
|
||||
layoutInRows:function (rowCount, cardsToLayout) {
|
||||
var rowHeight = (this.height - ((rowCount - 1) * this.padding)) / rowCount;
|
||||
if (this.maxCardHeight != null)
|
||||
rowHeight = Math.min(this.maxCardHeight, rowHeight);
|
||||
var yBias = Math.floor((this.height - (rowHeight * rowCount) - (this.padding * (rowCount - 1))) / 2);
|
||||
var layoutVars = {};
|
||||
layoutVars.x = 0;
|
||||
var row = 0;
|
||||
var y = yBias;
|
||||
|
||||
for (var cardIndex in cardsToLayout) {
|
||||
layoutVars.index = 10;
|
||||
var cardElem = cardsToLayout[cardIndex];
|
||||
var cardData = cardElem.data("card");
|
||||
var cardWidth = cardData.getWidthForMaxDimension(rowHeight);
|
||||
|
||||
var attachmentWidths = this.getAttachedCardsWidth(rowHeight, cardData) * 0.2;
|
||||
var cardWidthWithAttachments = cardWidth + attachmentWidths;
|
||||
if (layoutVars.x + cardWidthWithAttachments > this.width) {
|
||||
row++;
|
||||
layoutVars.x = 0;
|
||||
y = yBias + row * (rowHeight + this.padding);
|
||||
}
|
||||
|
||||
this.layoutAttached(cardData, y, rowHeight, layoutVars);
|
||||
this.layoutCard(cardElem, this.x + layoutVars.x, this.y + y, cardWidth, cardData.getHeightForWidth(cardWidth), layoutVars.index);
|
||||
layoutVars.x += cardWidth;
|
||||
if (layoutVars.x > this.width)
|
||||
return false;
|
||||
layoutVars.x += this.padding;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
function layoutCardElem(cardElem, x, y, width, height, index) {
|
||||
x = Math.floor(x);
|
||||
y = Math.floor(y);
|
||||
|
||||
88
gemp-lotr/gemp-lotr-async/src/main/web/layoutest.html
Normal file
88
gemp-lotr/gemp-lotr-async/src/main/web/layoutest.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html
|
||||
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/gemp-001/deckBuild.css">
|
||||
|
||||
<body style="position: absolute; width:100%; height:100%; display: flex; margin: 0px;" class="ui-layout-container" cz-shortcut-listen="true">
|
||||
|
||||
<div id="top-level">
|
||||
|
||||
<div id="deckDiv" class="flex-vert ui-layout-center ui-layout-pane ui-layout-pane-center" style="flex-grow: 1;">
|
||||
|
||||
<div id="manageDecks" style="background-color: yellow">
|
||||
|
||||
<button id="newDeckBut" title="New deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-document"></span>
|
||||
</button>
|
||||
|
||||
<button id="saveDeckBut" title="Save deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-disk"></span>
|
||||
</button>
|
||||
|
||||
<button id="renameDeckBut" title="Rename deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-pencil"></span>
|
||||
</button>
|
||||
|
||||
<button id="copyDeckBut" title="Copy deck to new" class="menu-button">
|
||||
<span class="ui-icon ui-icon-copy"></span>
|
||||
</button>
|
||||
|
||||
<button id="importDeckBut" title="Import Deck" class="menu-button">
|
||||
<span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
|
||||
</button>
|
||||
|
||||
<button id="libraryListBut" title="Open Library" class="menu-button">
|
||||
<span class="ui-icon ui-icon-bookmark"></span>
|
||||
</button>
|
||||
|
||||
<button id="deckListBut" title="Deck list" class="menu-button">
|
||||
<span class="ui-icon ui-icon-suitcase"></span>
|
||||
</button>
|
||||
|
||||
<select id="formatSelect" style="float: right; width: 100px;">
|
||||
<option value="fotr_block">Fellowship Block</option>
|
||||
</select>
|
||||
|
||||
<button id="notesBut" title="Add/Edit Notes" class="menu-button">
|
||||
<span class="ui-icon ui-icon-plus"></span>
|
||||
</button>
|
||||
|
||||
<span id="editingDeck">New deck</span>
|
||||
|
||||
<select id="collectionSelect">
|
||||
<option value="default">All cards</option>
|
||||
<option value="permanent">My cards</option>
|
||||
<option value="trophy">Trophies</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="deck-view" class="flex-horiz" style="background-color: red;">
|
||||
<div id="decks" class="flex-vert" >
|
||||
<div id="ring-pair" cla-ss="flex-horiz" >
|
||||
<div id="ringBearerDiv" style="background-color:magenta">Ring Bearer</div>
|
||||
<div id="ringDiv" style="background-color: green">Ring</div>
|
||||
</div>
|
||||
|
||||
<div id="sitesDiv" style="background-color:brown">Sites</div>
|
||||
</div>
|
||||
|
||||
<div id="decksRegion" class="flex-vert" style="background-color:blue">
|
||||
<div id="fp-cards" style="background-color:teal"></div>
|
||||
<div id="sh-cards" style="background-color:brown"></div>
|
||||
<div id="statsDiv" style="background-color:blue">
|
||||
<div id="deckStats"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="collectionDiv" class="ui-layout-east ui-layout-pane ui-layout-pane-east" style="width: 328px; background-color:#333333; flex-grow: 0;">
|
||||
<div id="cardCollectionDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user