Work on new deck builder.

This commit is contained in:
marcins78
2012-11-22 17:22:15 +00:00
parent f8311f3b50
commit a67101834b
3 changed files with 50 additions and 85 deletions

View File

@@ -13,77 +13,9 @@
font-size: 12px;
}
.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;
}
#manageDecks {
color: #ffffff;
font-size: 180%;
}
#editingDeck {
vertical-align: top;
padding-left: 3px;
}
#deckStats {
color: #ffffff;
}
.ui-button-text-only .ui-button-text {
font-size: 70%;
}
#set {
width: 120px;
}
#cardType {
width: 100px;
}
#fullFiltering select {
font-size: 80%;
}
#fullFiltering input {
font-size: 80%;
}
#filtering select {
font-size: 80%;
}
.panel {
overflow: hidden !important;
}
</style>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
@@ -130,12 +62,25 @@
$(document).ready(
function () {
var ui = new GempLotrDeckBuildingUI2($("#collectionFilterDiv"), $("#paging"));
var ui = new GempLotrDeckBuildingUI2(
$("#collectionFilterDiv"),
$("#paging"),
$("#collectionContents"),
$("#deckDiv")
);
var doLayout = function() {
var collectionWidth = $("#collectionDiv").width();
var collectionHeight = $("#collectionDiv").height();
var deckWidth = $("#deckPanel").width();
var deckHeight = $("#deckPanel").height();
ui.layoutUI(collectionWidth, collectionHeight, deckWidth, deckHeight);
};
$('body').layout({
applyDefaultStyles:true,
onresize:function () {
ui.layoutUI(true);
doLayout();
},
north__minSize: 200
});
@@ -143,30 +88,35 @@
$("#northPanel").layout({
applyDefaultStyles:true,
onresize:function() {
ui.layoutUI(true);
doLayout();
},
west__minSize: 340
west__minSize: 370
});
$(".ui-layout-pane").css({"background-color":"#000000"});
$(window).resize(function () {
ui.layoutUI(true);
doLayout();
});
ui.layoutUI(true);
doLayout();
});
</script>
</head>
<body>
<div id='northPanel' class="ui-layout-north">
<div id="collectionFilterDiv" class="ui-layout-west"></div>
<div id="collectionDiv" class="ui-layout-center">
<div id='northPanel' class="ui-layout-north panel">
<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>
</div>
<div id="deckPanel" class="ui-layout-center panel">
<div id="deckDiv" class="ui-widget-content">
</div>
</div>
<div id="deckDiv" class="ui-layout-center"></div>
</body>
</html>

View File

@@ -291,6 +291,11 @@ var CardFilter = Class.extend({
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);

View File

@@ -1,13 +1,20 @@
var GempLotrDeckBuildingUI2 = Class.extend({
comm:null,
collectionType:null,
cardFilter:null,
collectionContentsDiv:null,
deckDiv:null,
padding: 3,
init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
this.collectionContentsDiv = collectionContentsDiv;
this.deckDiv = deckDiv;
init:function (filterDiv, pageDiv) {
var that = this;
this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);
this.cardFilter = new CardFilter(filterDiv, pageDiv,
this.cardFilter = new CardFilter(filterDiv, pageDiv,
function (filter, start, count, callback) {
that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
callback(xml);
@@ -27,9 +34,12 @@ var GempLotrDeckBuildingUI2 = Class.extend({
that.finishCollection();
});
this.collectionType = "default";
this.cardFilter.getCollection();
},
layoutUI: function() {
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"})
}
});