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

Work on new deck builder.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,77 +13,9 @@
font-size: 12px; font-size: 12px;
} }
.borderOverlay { .panel {
border: 0px solid #000000; overflow: hidden !important;
} }
.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%;
}
</style> </style>
<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/dark-hive/jquery-ui-1.8.16.custom.css">
@@ -130,12 +62,25 @@
$(document).ready( $(document).ready(
function () { 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({ $('body').layout({
applyDefaultStyles:true, applyDefaultStyles:true,
onresize:function () { onresize:function () {
ui.layoutUI(true); doLayout();
}, },
north__minSize: 200 north__minSize: 200
}); });
@@ -143,30 +88,35 @@
$("#northPanel").layout({ $("#northPanel").layout({
applyDefaultStyles:true, applyDefaultStyles:true,
onresize:function() { onresize:function() {
ui.layoutUI(true); doLayout();
}, },
west__minSize: 340 west__minSize: 370
}); });
$(".ui-layout-pane").css({"background-color":"#000000"}); $(".ui-layout-pane").css({"background-color":"#000000"});
$(window).resize(function () { $(window).resize(function () {
ui.layoutUI(true); doLayout();
}); });
ui.layoutUI(true); doLayout();
}); });
</script> </script>
</head> </head>
<body> <body>
<div id='northPanel' class="ui-layout-north"> <div id='northPanel' class="ui-layout-north panel">
<div id="collectionFilterDiv" class="ui-layout-west"></div> <div id="collectionFilterDiv" class="ui-layout-west panel"></div>
<div id="collectionDiv" class="ui-layout-center"> <div id="collectionDiv" class="ui-layout-center panel">
<div id="paging"></div> <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> </div>
<div id="deckDiv" class="ui-layout-center"></div>
</body> </body>
</html> </html>

5
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js
View File

@@ -291,6 +291,11 @@ var CardFilter = Class.extend({
this.filterDiv.css({ position:"absolute", left:x, top:y + 80, width:width, height:80 }); 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 () { disableNavigation:function () {
this.previousPageBut.button("option", "disabled", true); this.previousPageBut.button("option", "disabled", true);
this.nextPageBut.button("option", "disabled", true); this.nextPageBut.button("option", "disabled", true);

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

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