[WebCards] Update from my local repos

8 files changed, 208 insertions, 83 deletions

diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js
index 015995d..0f045fe 100644
--- a/webcards/scripts/cards/card.js
+++ b/webcards/scripts/cards/card.js
@@ -1,45 +1,44 @@
-var CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"];
+const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"];
 
 // Card class represents one card.
 // Every card should have a deck.
 // Use deck.appendCard or deck.prependCard to make a card visible
 function Card (data) {
-    this.e = this.generateElements(data);
+    this.e = document.createElement("card");
+    this.generateElements(data);
     this.e.style.left = "0px";
     this.e.style.top = "0px";
 }
 
 // Internal
 Card.prototype = {
-    // Main generation func
+    // Main generation func, only for use in contructor
     generateElements: function (data) {
+        while(this.e.firstElementChild != null)
+            this.e.firstElementChild.remove();
+
         switch (typeof data) {
             case "object":
-                return this.generateObjectCard(data);
+                this.generateObjectCard(data, this.e);
+                break;
             case "string":
-                return this.generateBasicCard(data);
+                this.generateBasicCard(data, this.e);
+                break;
+            default:
+                this.generateErrorCard(this.e);
         }
-        let e = document.createElement("card");
-        let t = document.createElement("carea");
-        t.className = "mid";
-        t.innerText = "Card Error: data";
-        e.append(t);
-        return e;
     },
 
     // Generate a card with basic text only
-    generateBasicCard: function (data) {
-        let e = document.createElement("card");
+    generateBasicCard: function (data, el) {
         let t = document.createElement("carea");
         t.className = "mid";
         t.innerText = data;
-        e.appendChild(t);
-        return e;
+        el.appendChild(t);
     },
 
     // Generate a card with rich visuals
-    generateObjectCard: function (data) {
-        let e = document.createElement("card");
+    generateObjectCard: function (data, el) {
 
         // Check for an asset URL
         if (typeof data.assetURL != "string") {
@@ -48,16 +47,14 @@ Card.prototype = {
 
         // Set card styles
         for (let i in data.style) {
-            e.style[i] = data.style[i];
+            el.style[i] = data.style[i];
         }
 
         // Generate card areas.
         for (let i in CardPos) {
             if (typeof data[CardPos[i]] == "object")
-                e.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
+                el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
         }
-        
-        return e;
     },
 
     generateCArea: function (data, carea, assetURL) {
@@ -92,6 +89,10 @@ Card.prototype = {
         }
 
         return area;
-    }
+    },
 
+    generateErrorCard: function(el)
+    {
+        this.generateBasicCard("Card Error: data", el);
+    }
 };
\ No newline at end of file
diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js
index 544a9ef..620a038 100644
--- a/webcards/scripts/cards/deck.js
+++ b/webcards/scripts/cards/deck.js
@@ -1,6 +1,6 @@
 // Deck class represents multiple cards.
 // Can be arranged in multiple ways.
-function Deck (options = {}){
+function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){
     this.cards = [];
     
     // View mode
@@ -11,19 +11,19 @@ function Deck (options = {}){
     //          left (strip-hl)
     //          right (strip-hr)
     //      vertical
-    //          top (strip-vt)
-    //          bottom (strip-vb)
-    this.mode = options.mode;
+    //          up (strip-vu)
+    //          down (strip-vd)
+    this.inf = options.mode == "infdraw";
 
-    // Select mode
-    //  above
-    //  below
-    //  around
-    //  one
-    //  all
+    // Select mode - controls what other cards are selected when one card is selected
+    //  above - selectes cards above the selected one
+    //  below - selects cards below the selected one
+    //  around - selects cards above and below
+    //  one - selects only card chosen
+    //  all - selects all cards when card selected
     this.smode = options.smode;
     
-    // Select count (-1 = all available)
+    // Select count (negative defaults to 0)
     //  above - controls number of cards above clicked are selected
     //  below - controls number of cards below clicked are selected
     //  around
@@ -31,7 +31,7 @@ function Deck (options = {}){
     //      array - [first number: number above selected] [second number: number below selected]
     //  one - no effect
     //  all - no effect
-    this.sct = options.sct;
+    this.sct = options.sct > 0 ? options.sct : 0;
     
     // Position
     //  array of where the deck is centered
@@ -39,6 +39,9 @@ function Deck (options = {}){
     this.y = options.pos[1];
     
     this.e = document.createElement("deck");
+    this.e.style.left = this.x + "px";
+    this.e.style.top = this.y + "px";
+    this.e.setAttribute("mode", options.mode);
 }
 
 Deck.prototype = {
diff --git a/webcards/scripts/client.js b/webcards/scripts/client.js
index ea62e26..0bf2e75 100644
--- a/webcards/scripts/client.js
+++ b/webcards/scripts/client.js
@@ -26,13 +26,14 @@ Client.prototype = {
         if(m.type == "error" || m.type == "closed") {
             var t = m.type;
             t = t[0].toUpperCase() + t.slice(1)
-            this.lob.setState(t, "#D00", this.soc.server);
+            this.lob.setState(t, "closed", this.soc.server);
             this.tab.handleClose();
             return;
         }
 
         switch(this.state) {
             case "handshake":
+                this.lob.setState("Connected", "ok", this.soc.server);
                 this.handshake(m);
                 break;
             case "lobby":
@@ -49,7 +50,7 @@ Client.prototype = {
             case "verr":
                 this.soc.close();
                 alert(`Error connecting to server: version of client (${this.version}) not accepted.`);
-                console.error("Error connecting to server: version of client (${this.version}) not accepted.");
+                console.error(`Error connecting to server: version of client (${this.version}) not accepted.`);
                 console.error(m.data);
                 return;
             case "lobby":
diff --git a/webcards/scripts/cookie.js b/webcards/scripts/cookie.js
new file mode 100644
index 0000000..2eb5977
--- /dev/null
+++ b/webcards/scripts/cookie.js
@@ -0,0 +1,39 @@
+function CookieManager() {
+}
+
+CookieManager.prototype = {
+    getCookie: function(name){
+        let cookies = document.cookie.split(";");
+        for(let i in cookies) {
+            let cname = cookies[i].trim().split("=")[0];
+            if(cname == name){
+                return cookies[i].trim().slice(name.length + 1);
+            }
+        }
+        return "";
+    },
+
+    setCookie: function(name, value, data={}) {
+        let extra = "";
+
+        for(let key in data)
+        {
+            extra += "; " + key + "=" + data[key];
+        }
+
+        document.cookie = name + "=" + value + extra;
+    },
+
+    setYearCookie: function(name, value) {
+        var date = new Date(Date.now());
+        date.setFullYear(date.getFullYear() + 1);
+        this.setCookie(name, value, {expires: date.toUTCString()});
+    },
+
+    removeCookie: function(name) {
+        var date = new Date(0);
+        this.setCookie(name, "", {expires: date.toUTCString()});
+    }
+};
+
+var Cookies = new CookieManager();
\ No newline at end of file
diff --git a/webcards/scripts/gui/input.js b/webcards/scripts/gui/input.js
index c349a07..b0bbec0 100644
--- a/webcards/scripts/gui/input.js
+++ b/webcards/scripts/gui/input.js
@@ -1,24 +1,39 @@
-var inputFuncs = {
-    createInput: function(type = "text", wrapped = false, id) {
+function customSelectValue (el) {
+    var sel = el.getAttribute("selected");
+        
+    if(typeof sel != "undefined") {
+        return el.children[parseInt(sel)].getAttribute("value");
+    }
+
+    return "";
+}
+
+function customSelectOption (el) {
+    var sn = Array.prototype.indexOf.call(el.parentElement.children, el);
+    var psn = el.parentElement.getAttribute("selected");
+
+    if(typeof psn == "string")
+        el.parentElement.children[parseInt(psn)].setAttribute("selected", false);
+
+    if(typeof sn == "string")
+        el.parentElement.setAttribute("selected", parseInt(sn));
+
+    el.setAttribute("selected", true);
+    el.parentElement.setAttribute("selected", parseInt(sn));
+}
+
+var InputFuncs = {
+    createInput: function(type = "text", id) {
         var el = document.createElement("input");
         el.setAttribute("type", type);
         
         if(typeof id == "string")
             el.setAttribute("id", id);
 
-        if(wrapped) {
-            var wrapper = document.createElement("div");
-            wrapper.className = "input-container";
-            wrapper.setAttribute("type", type);
-            wrapper.setAttribute("onclick", "this.firstElementChild.click()");
-            wrapper.appendChild(el);
-            wrapper.input = el;
-            return wrapper;
-        }
-
         el.getValue = function () {
             return this.value;
         }
+
         return el;
     },
 
@@ -31,26 +46,27 @@ var inputFuncs = {
     },
 
     colorInput: function(value, id) {
-        var el = this.createInput("color", true, id);
+        var el = this.createInput("color", id);
         el.value = value;
         return el;
     },
 
     textInput: function(value, placeholder, id) {
-        var el = this.createInput("text", false, id);
+        var el = this.createInput("text", id);
         el.setAttribute("placeholder", placeholder);
         el.value = value;
         return el;
     },
 
     numberInput: function(value, id) {
-        var el = this.createInput("number", false, id);
+        var el = this.createInput("number", id);
         el.value = value;
         return el;
     },
 
+    //To fix
     fileInput: function(value, id) {
-        var el = this.createInput("file", true, id);
+        var el = this.createInput("file", id);
         
         el.value = value;
         
@@ -91,11 +107,21 @@ var inputFuncs = {
         return el;
     },
 
-    radioInputs: function(group, names, values, checked = 0) {
-        var wrapper = document.createElement("div");
-        wrapper.className = "input-container";
-        wrapper.setAttribute("type", "radio");
-        
+    radioInputs: function(group, names, values, checked = 0, id) {
+
+        let toWrap = [];
+
+        for(let i = 0; i < values.length; i++) {
+            toWrap.push(this.inputLabel(names[i], group+"-"+i));
+            if(i == checked)
+                toWrap.push(this.radioInput(group, values[i], true, group+"-"+i));
+            else
+                toWrap.push(this.radioInput(group, values[i], false, group+"-"+i));
+            toWrap.push(document.createElement("br"));
+        }
+
+        var wrapper = this.wrapInputs("radio", ...toWrap);
+
         wrapper.getValue = function() {
             for(let i = 0; i < this.children.length; i++){
                 if(this.children[i].checked)
@@ -103,30 +129,62 @@ var inputFuncs = {
             }
         };
 
-        for(let i = 0; i < values.length; i++) {
-            wrapper.appendChild(this.inputLabel(names[i], group+"-"+i));
-            if(i == checked)
-                wrapper.appendChild(this.radioInput(group, values[i], true, group+"-"+i));
-            else
-                wrapper.appendChild(this.radioInput(group, values[i], false, group+"-"+i));
-            wrapper.appendChild(document.createElement("br"));
-        }
+        if(typeof id == "string")
+            wrapper.setAttribute("id", id);
 
         return wrapper;
     },
 
-    wrapInput: function(el) {
+    selectOption: function(text, value, selected) {
+        var so = document.createElement("div");
+        so.innerText = text;
+        so.setAttribute("value", value);
+        so.addEventListener("mousedown", customSelectOption.bind(null, so));
+
+        if(selected === true)
+            so.setAttribute("selected", true);
+
+        return so
+    },
+
+    selectInput: function(names, values, id, select = 0) {
+        var se = document.createElement("div");
+        se.className = "input-select";
+        se.setAttribute("tabindex", 0);
+        se.setAttribute("selected", select);
+
+        for(let i in names)
+        {
+            se.appendChild(this.selectOption(names[i], values[i], i == select));
+        }
+
+        if(typeof id == "string")
+            se.setAttribute("id", id);
         
+        var wrapper = this.wrapInputs("select", se);
+        wrapper.getValue = customSelectValue.bind(null, se);
+        wrapper.setAttribute("tabindex", 0);
+
+        return wrapper;
+    },
+
+    wrapInputs: function(type, ...el) {
+
+        var wrapper = document.createElement("div");
+        wrapper.className = "input-container";
+        wrapper.setAttribute("type", type);
+
+        for(let i = 0; i < el.length; i++)
+        {
+            wrapper.appendChild(el[i]);
+        }
+
+        return wrapper;
     }
 };
 
-function Settings () {
-    this.settings = {
-        username: {
-            type: "text",
-            args: [Math.floor(Math.random() * 100000), "Username", "userName"]
-        }
-    };
+function Settings (settings = {}) {
+    this.settings = settings;
 
     this.genSettings();
 }
diff --git a/webcards/scripts/gui/lobby.js b/webcards/scripts/gui/lobby.js
index 731d9ec..07f8223 100644
--- a/webcards/scripts/gui/lobby.js
+++ b/webcards/scripts/gui/lobby.js
@@ -131,11 +131,12 @@ Lobby.prototype = {
     },
 
     // Called when the WebSocket state has changed.
-    setState: function(text, color, server) {
-        this.e.status.style.backgroundColor = color;
-        this.e.status.innerText = text;
+    setState: function(text, s, server) {
+        this.e.status.setAttribute("s", s);
+        if(this.e.status.innerText != "Error" || ( this.e.status.innerText == "Error" && text != "Closed"))
+            this.e.status.innerText = text;
         this.e.addr.innerText = server;
-        this.top.setColor(color);
+        this.top.setStatus(s);
     },
 
     // Called when we are resetting the game.
@@ -144,7 +145,7 @@ Lobby.prototype = {
             this.e.games.removeChild(this.e.games.firstElementChild)
         }
 
-        this.setState("Connecting", "#DA0", this.e.addr.innerText);
+        this.setState("Connecting", "loading", this.e.addr.innerText);
         this.init = false;
     }
 };
@@ -165,8 +166,8 @@ function TopBar(el) {
 
 TopBar.prototype = {
     // Set color of status bar
-    setColor: function(color) {
-        this.status.style.backgroundColor = color;
+    setStatus: function(s) {
+        this.status.setAttribute("s", s);
     },
 
     // Toggle showing the new game screen
diff --git a/webcards/scripts/gui/table.js b/webcards/scripts/gui/table.js
index db67529..2776f80 100644
--- a/webcards/scripts/gui/table.js
+++ b/webcards/scripts/gui/table.js
@@ -1,4 +1,4 @@
-// Table represents and manages the actual game.  It accepts inputs from the server and tries to queries the server when the player makes a move.
+// Table represents and manages the actual game.  It accepts inputs from the server and tries to query the server when the player makes a move.
 function Table(el, soc) {
     this.root = el;
     this.soc = soc;
@@ -22,8 +22,6 @@ Table.prototype = {
         }
     },
 
-    
-
     handleClose: function() {
         this.reset();
     },
diff --git a/webcards/scripts/theme.js b/webcards/scripts/theme.js
new file mode 100644
index 0000000..8e69377
--- /dev/null
+++ b/webcards/scripts/theme.js
@@ -0,0 +1,24 @@
+function Theme(){
+    this.t = document.getElementById("theme");
+}
+
+Theme.prototype = {
+    init: function() {
+        if(Cookies.getCookie("theme") == ""){
+            Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
+        }
+    },
+
+    restore: function() {
+        this.init();
+        this.t.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
+    },
+
+    set: function(sheet) {
+        Cookies.setYearCookie("theme", sheet);
+        this.restore();
+    }
+};
+
+var GlobalTheme = new Theme();
+GlobalTheme.restore();