Work on new deck builder.

2012-11-22 16:28:04 +00:00
parent 04596f4f57
commit f8311f3b50
5 changed files with 213 additions and 6 deletions
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
@@ -0,0 +1,172 @@
+<!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</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+    <meta http-equiv="Cache-Control" content="no-cache"/>
+    <meta http-equiv="Expires" content="-1">
+
+    <style type="text/css">
+        body {
+            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%;
+        }
+
+    </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="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.layout.js"></script>
+    <script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>
+
+    <script type="text/javascript" src="js/gemp-011/inheritance.js"></script>
+    <script type="text/javascript" src="js/gemp-011/common.js"></script>
+    <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/deckBuildingUi2.js"></script>
+
+    <script type="text/javascript">
+
+        // TODO: delete - Only for debugging
+        function getUrlParam(param) {
+            var search = window.location.search.substring(1);
+            if (search.indexOf('&') > -1) {
+                var params = search.split('&');
+                for (var i = 0; i < params.length; i++) {
+                    var key_value = params[i].split('=');
+                    if (key_value[0] == param) return key_value[1];
+                }
+            } else {
+                var params = search.split('=');
+                if (params[0] == param) return params[1];
+            }
+            return null;
+        }
+
+        function getMapSize(map) {
+            var size = 0, key;
+            for (key in map)
+                if (map.hasOwnProperty(key)) size++;
+            return size;
+        }
+
+        $(document).ready(
+                function () {
+                    var ui = new GempLotrDeckBuildingUI2($("#collectionFilterDiv"), $("#paging"));
+
+                    $('body').layout({
+                        applyDefaultStyles:true,
+                        onresize:function () {
+                            ui.layoutUI(true);
+                        },
+                        north__minSize: 200
+                    });
+
+                    $("#northPanel").layout({
+                        applyDefaultStyles:true,
+                        onresize:function() {
+                            ui.layoutUI(true);
+                        },
+                        west__minSize: 340
+
+                    });
+
+                    $(".ui-layout-pane").css({"background-color":"#000000"});
+
+                    $(window).resize(function () {
+                        ui.layoutUI(true);
+                    });
+
+                    ui.layoutUI(true);
+                });
+    </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="paging"></div>
+    </div>
+</div>
+<div id="deckDiv" class="ui-layout-center"></div>
+</body>
+</html>
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/cardFilter.js
@@ -23,7 +23,7 @@ var CardFilter = Class.extend({
    sortSelect:null,
    raritySelect:null,

-    init:function (elem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
+    init:function (elem, pageElem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
        this.getCollectionFunc = getCollectionFunc;
        this.clearCollectionFunc = clearCollectionFunc;
        this.addCardFunc = addCardFunc;
@@ -31,7 +31,7 @@ var CardFilter = Class.extend({

        this.filter = "";

-        this.buildUi(elem);
+        this.buildUi(elem, pageElem);
    },

    enableDetailFilters:function (enable) {
@@ -52,7 +52,7 @@ var CardFilter = Class.extend({
        $("#type").val(typeValue);
    },

-    buildUi:function (elem) {
+    buildUi:function (elem, pageElem) {
        var that = this;

        this.pageDiv = $("<div></div>");
@@ -100,7 +100,7 @@ var CardFilter = Class.extend({
        this.pageDiv.append(this.nextPageBut);
        this.pageDiv.append(this.countSlider);

-        elem.append(this.pageDiv);
+        pageElem.append(this.pageDiv);

        this.fullFilterDiv = $("<div></div>");
        this.setSelect = $("<select style='width: 130px; font-size: 80%;'>"
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi.js
@@ -50,7 +50,7 @@ var GempLotrDeckBuildingUI = Class.extend({

        this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);

-        this.cardFilter = new CardFilter($("#collectionDiv"),
+        this.cardFilter = new CardFilter($("#collectionDiv"),$("#collectionDiv"),
            function (filter, start, count, callback) {
                that.comm.getCollection(that.collectionType, filter, start, count, function (xml) {
                    callback(xml);
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
@@ -0,0 +1,35 @@
+var GempLotrDeckBuildingUI2 = Class.extend({
+    comm:null,
+    cardFilter:null,
+
+    init:function (filterDiv, pageDiv) {
+        var that = this;
+
+        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 () {
+                that.clearCollection();
+            },
+            function (elem, type, blueprintId, count) {
+                that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
+            },
+            function () {
+                that.finishCollection();
+            });
+        this.collectionType = "default";
+    },
+
+    layoutUI: function() {
+        
+    }
+});
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/merchantUi.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/merchantUi.js
@@ -23,7 +23,7 @@ var GempLotrMerchantUI = Class.extend({

        this.comm = new GempLotrCommunication("/gemp-lotr-server", that.processError);

-        this.cardFilter = new CardFilter(cardFilterElem,
+        this.cardFilter = new CardFilter(cardFilterElem, cardFilterElem,
            function (filter, start, count, callback) {
                that.comm.getMerchant(filter, that.ownedMin, start, count, callback);
            },