From f8311f3b503e1d32069ba42f57572f54e6e53bc0 Mon Sep 17 00:00:00 2001
From: marcins78 <marcins78@eb7970ca-0f6f-de4b-2938-835b230b9d1f>
Date: Thu, 22 Nov 2012 16:28:04 +0000
Subject: [PATCH] Work on new deck builder.

---
 .../src/main/webapp/deckBuild2.html           | 172 ++++++++++++++++++
 .../src/main/webapp/js/gemp-011/cardFilter.js |   8 +-
 .../main/webapp/js/gemp-011/deckBuildingUi.js |   2 +-
 .../webapp/js/gemp-011/deckBuildingUi2.js     |  35 ++++
 .../src/main/webapp/js/gemp-011/merchantUi.js |   2 +-
 5 files changed, 213 insertions(+), 6 deletions(-)
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
 create mode 100644 gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-011/deckBuildingUi2.js
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
new file mode 100644
index 000000000..afe9e9070
--- /dev/null
+++ 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>
diff --git 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
index 9c9f1f160..f53b1ceaa 100644
--- 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%;'>"
diff --git 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
index 63d21adc7..9618bea36 100644
--- 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);
diff --git 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
new file mode 100644
index 000000000..d569757fd
--- /dev/null
+++ 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() {
+        
+    }
+});
diff --git 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
index c68dd0bcb..5f0c38eee 100644
--- 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);
             },
