Input and settings fixes

10 files changed, 236 insertions, 73 deletions

diff --git a/assets/standard/clubs.svg b/assets/standard/clubs.svg
new file mode 100644
index 0000000..9985c6e
--- /dev/null
+++ b/assets/standard/clubs.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="128"
+   height="128"
+   viewBox="0 0 33.866666 33.866668"
+   version="1.1"
+   id="svg8"
+   style="enable-background:new">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0477938;stroke-opacity:1;enable-background:new"
+     d="M 24.226047,31.611539 C 18.562881,28.154644 16.93688,21.516116 16.93688,21.516116 c 0,0 -1.633095,6.638528 -7.2962603,10.095423 z"
+     id="path815-0" />
+  <path
+     id="path900"
+     style="fill:#000000;stroke-width:0.999999"
+     d="M 63.896484 8.7265625 A 22.32433 22.32433 0 0 0 41.675781 31.050781 A 22.32433 22.32433 0 0 0 42.398438 36.683594 A 22.32433 22.32433 0 0 0 41.675781 36.671875 A 22.32433 22.32433 0 0 0 19.351562 58.996094 A 22.32433 22.32433 0 0 0 41.675781 81.320312 A 22.32433 22.32433 0 0 0 64 58.996094 A 22.32433 22.32433 0 0 0 86.324219 81.320312 A 22.32433 22.32433 0 0 0 108.64844 58.996094 A 22.32433 22.32433 0 0 0 86.324219 36.671875 A 22.32433 22.32433 0 0 0 85.599609 36.683594 A 22.32433 22.32433 0 0 0 86.324219 31.050781 A 22.32433 22.32433 0 0 0 64 8.7265625 A 22.32433 22.32433 0 0 0 63.896484 8.7265625 z "
+     transform="scale(0.26458334)" />
+</svg>
diff --git a/assets/standard/spade.svg b/assets/standard/spade.svg
new file mode 100644
index 0000000..cb85378
--- /dev/null
+++ b/assets/standard/spade.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="128"
+   height="128"
+   viewBox="0 0 33.866666 33.866668"
+   version="1.1"
+   id="svg8"
+   style="enable-background:new">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     id="path815"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.07791;stroke-opacity:1;enable-background:new"
+     d="m 16.939022,1.6169558 c 0,0 -12.1103534,9.0292812 -12.153263,15.6228192 -0.023482,3.609603 2.9974535,7.92445 6.54172,8.638233 1.826485,0.367844 4.664077,-2.307371 5.407422,-3.046843 -0.581198,1.773608 -2.524886,6.629393 -7.0941412,9.418546 H 24.225916 C 19.676,29.472364 17.735223,24.647996 17.146762,22.85597 c 0.775317,0.766991 3.579502,3.387991 5.392436,3.022038 3.543948,-0.715365 6.564357,-5.028623 6.54172,-8.638233 C 29.039582,10.648641 16.939022,1.6169558 16.939022,1.6169558 Z" />
+</svg>
diff --git a/client.html b/client.html
index c5d7cc7..87963a3 100644
--- a/client.html
+++ b/client.html
@@ -53,7 +53,7 @@
         <div class="topbar" style="height: auto;">
             <div class="top-buttons">
                 <button id="newgame" class="top-button" onclick="game.lobby.newGame()"></button>
-                <button id="settings" class="top-button" onclick="game.lobby.mobileSettings()"></button>
+                <button id="settings" class="top-button" onclick="game.lobby.mobileSettings(game.settings)"></button>
                 <button id="reset" class="top-button" onclick="game.reset()"></button>
             </div>
 
diff --git a/scripts/client.js b/scripts/client.js
index 46acf6a..0212efc 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -1,3 +1,4 @@
+'use strict';
 const VERSION = "1.0.0";
 
 // Client acts as the message hub for the whole game.
@@ -51,12 +52,28 @@ class Client{
         switch (m.type) {
             case "verr":
                 this.socket.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(m.data);
+                
                 return;
+
             case "ready":
+                if(this.settings !== undefined)
+                    this.settings.cleanup();
+                
+                this.settings = new Settings(m.data);
+                
+                if(this.lobby.top.mobileSettingsOpen())
+                    this.settings.putSettings(this.lobby.top.mobileSettings);
+                else
+                    this.settings.putSettings(this.lobby.e.settings);
+                
                 this.socket.send("ready", "");
+                
                 return;
         }
     }
diff --git a/scripts/gui/input.js b/scripts/gui/input.js
index 6ed3d39..2925a1f 100644
--- a/scripts/gui/input.js
+++ b/scripts/gui/input.js
@@ -1,22 +1,29 @@
 'use strict';
 
-//This whole clusterfuq of functions needs fixing.
+//Mostly fixed now
 class MakeInput {
-    static createInput(type = "text", id)
+    static createInput(type = "text", wrap = false)
     {
         var el = document.createElement("input");
         el.setAttribute("type", type);
-        
-        if(typeof id == "string")
-            el.setAttribute("id", id);
+
+        if(wrap)
+        {
+            return this.wrapInputs(type, el);
+        }
 
         el.getValue = function () {
             return this.value;
         }
 
+        el.setValue = function(value) {
+            this.value = value
+        }
+
         return el;
     }
 
+    // Function deprecated, finding another way to do this
     static inputLabel(text, id)
     {
         var el = document.createElement("label");
@@ -26,32 +33,36 @@ class MakeInput {
         return el;
     }
 
-    static colorInput (value, id) {
-        var el = MakeInput.createInput("color", id);
-        el.value = value;
+    static colorInput (value) {
+        var el = MakeInput.createInput("color", true);
+        el.setValue(value);
         return el;
     }
 
-    static textInput (value, placeholder, id)
+    static textInput (value, placeholder)
     {
-        var el = MakeInput.createInput("text", id);
+        var el = MakeInput.createInput("text");
         el.setAttribute("placeholder", placeholder);
         el.value = value;
         return el;
     }
 
-    static numberInput (value, id)
+    static numberInput (value)
     {
-        var el = MakeInput.createInput("number", id);
+        var el = MakeInput.createInput("number");
         el.value = value;
         return el;
     }
 
-    //To fix
-    static fileInput (value, id) {
-        var el = MakeInput.createInput("file", id);
+    static fileInput (accepts = "", multiple = false) {
+        var el = MakeInput.createInput("file", true);
         
-        el.value = value;
+        let e = el.getElement();
+        e.setAttribute("accepts", accepts);
+        e.multiple = multiple;
+        el.getValue = function() {
+            return e.files;
+        }
         
         el.setAttribute("data-files", "Choose a file");
 
@@ -74,15 +85,24 @@ class MakeInput {
         return el;
     }
 
-    static checkboxInput (checked = false, id) {
-        var el = MakeInput.createInput("checkbox", false, id);
-        if(checked)
-            el.setAttribute("checked");
+    static checkboxInput (checked = false) {
+        var el = MakeInput.createInput("checkbox");
+
+        el.getValue = function() {
+            return el.checked;
+        }
+
+        el.setValue = function(check) {
+            el.checked = check;
+        }
+
+        el.setValue(checked);
+        
         return el;
     }
 
-    static radioInput (group, value, checked = false, id) {
-        var el = MakeInput.createInput("radio", false, id);
+    static radio (group, value, checked = false) {
+        var el = MakeInput.createInput("radio");
         el.setAttribute("name", group);
         el.setAttribute("value", value);
         if(checked)
@@ -90,21 +110,23 @@ class MakeInput {
         return el;
     }
 
-    static radioInputs (group, names, values, checked = 0, id) {
+    static radioInput (group, names, values, prompt = "Select One", checked = 0) {
 
         let toWrap = [];
 
         for(let i = 0; i < values.length; i++) {
-            toWrap.push(MakeInput.inputLabel(names[i], group+"-"+i));
+            toWrap.push(MakeInput.inputLabel(names[i]));
             if(i == checked)
-                toWrap.push(MakeInput.radioInput(group, values[i], true, group+"-"+i));
+                toWrap.push(MakeInput.radio(group, values[i], true));
             else
-                toWrap.push(MakeInput.radioInput(group, values[i], false, group+"-"+i));
+                toWrap.push(MakeInput.radio(group, values[i], false));
             toWrap.push(document.createElement("br"));
         }
 
         var wrapper = MakeInput.wrapInputs("radio", ...toWrap);
 
+        wrapper.setAttribute("data-prompt", prompt);
+
         wrapper.getValue = function() {
             for(let i = 0; i < this.children.length; i++){
                 if(this.children[i].checked)
@@ -112,17 +134,49 @@ class MakeInput {
             }
         };
 
-        if(typeof id == "string")
-            wrapper.setAttribute("id", id);
+        wrapper.setValue = function(value) {
+            for(let i = 0; i < this.children.length; i++){
+                if(this.children[i].value == value){
+                    this.children[i].checked = true;
+                    return;
+                }
+            }
+        };
 
         return wrapper;
     }
 
-    static selectOption (text, value, selected) {
+    static wrapInputs (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]);
+        }
+
+        if(el.length == 1)
+        {
+            wrapper.getValue = function () {return el[0].value;}
+    
+            wrapper.setValue = function(value) {el[0].value = value;}
+
+            wrapper.onclick = el[0].click.bind(el[0]);
+
+            wrapper.getElement = function(){return el[0];}
+        }
+
+        return wrapper;
+    }
+
+    static selectOption (text, index, value, selected) {
         var so = document.createElement("div");
         so.innerText = text;
-        so.setAttribute("value", value);
-        so.addEventListener("mousedown", customSelectOption.bind(null, so));
+        so.selectValue = value;
+        so.selectIndex = index;
+        so.addEventListener("mousedown", MakeInput.selOption.bind(null, so));
 
         if(selected === true)
             so.setAttribute("selected", true);
@@ -130,7 +184,7 @@ class MakeInput {
         return so
     }
 
-    static selectInput (names, values, id, select = 0) {
+    static selectInput (names, values, select = 0) {
         var se = document.createElement("div");
         se.className = "input-select";
         se.setAttribute("tabindex", 0);
@@ -138,11 +192,8 @@ class MakeInput {
 
         for(let i in names)
         {
-            se.appendChild(MakeInput.selectOption(names[i], values[i], i == select));
+            se.appendChild(MakeInput.selectOption(names[i], i, values[i], i == select));
         }
-
-        if(typeof id == "string")
-            se.setAttribute("id", id);
         
         var wrapper = MakeInput.wrapInputs("select", se);
         wrapper.getValue = MakeInput.selValue.bind(null, se);
@@ -151,32 +202,18 @@ class MakeInput {
         return wrapper;
     }
 
-    static wrapInputs (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;
-    }
-
     static selValue (el) {
         let sel = parseInt(el.getAttribute("selected"));
             
         if(typeof sel != "undefined") {
-            return el.children[sel].getAttribute("value");
+            return el.children[sel].selectValue;
         }
     
         return "";
     }
     
     static selOption (el) {
-        let sn = Array.prototype.indexOf.call(el.parentElement.children, el);
+        let sn = el.selectIndex;
         let psn = parseInt(el.parentElement.getAttribute("selected"));
     
         if(Number.isInteger(psn))
@@ -185,8 +222,25 @@ class MakeInput {
         el.parentElement.setAttribute("selected", sn);
         el.setAttribute("selected", true);
     }
+
+    static titleWrap(el, title) {
+        var wrapper = document.createElement("div");
+        wrapper.className = "input-title-wrapper";
+        wrapper.setAttribute("type", el.getAttribute(type));
+        wrapper.setAttribute("data-title", title);
+        
+        wrapper.appendChild(el);
+
+        if(el.getAttribute("type") == "checkbox")
+        {
+            wrapper.onclick = el.click.bind(el);
+        }
+
+        return wrapper;
+    }
 }
 
+// Mostly fixed now
 class Settings {
     constructor (template = {})
     {
@@ -199,15 +253,8 @@ class Settings {
 
         for(let key in template)
         {
-            switch(template[key].type)
-            {
-                case "radio":
-                    out[key] = MakeInput.radioInputs(...template[key].args);
-                    break;
-                default:
-                    if(typeof MakeInput[template[key].type+"Input"] != null)
-                    out[key] = MakeInput[template[key].type+"Input"](...template[key].args);
-            }
+            if(typeof MakeInput[template[key].type+"Input"] != null)
+                out[key] = {el: MakeInput[template[key].type+"Input"](...template[key].args), title: template[key].title};
         }
         
         return out;
@@ -218,14 +265,25 @@ class Settings {
         var out = {};
 
         for(let key in this.settings)
-            out[key] = this.settings[key].getValue();
+            out[key] = this.settings[key].el.getValue();
         
         return out;
     }
 
     putSettings (el)
     {
-        for(let key in this.settings)
-            el.appendChild(this.settings[key]);
+        this.wrappers = {};
+
+        for(let key in this.settings) {
+            this.wrappers[key] = MakeInput.titleWrap(this.settings[key].el, this.settings[key].title)
+            el.appendChild(this.wrappers[key]);
+        }
+            
+    }
+
+    cleanup ()
+    {
+        for(let key in this.wrappers)
+            this.wrappers[key].remove();
     }
 }
diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js
index 5939697..431e2e5 100644
--- a/scripts/gui/lobby.js
+++ b/scripts/gui/lobby.js
@@ -1,3 +1,4 @@
+'use strict';
 // ###############
 // # TopBar Code #
 // ###############
@@ -5,9 +6,10 @@
 // TopBar represents the bar at the top of the screen when client is in the lobby.
 
 class TopBar{
-    constructor (el)
+    constructor (el, desktopSettings)
     {
         this.root = el;
+        this.desktopSettings = desktopSettings;
 
         this.newGame = el.getElementsByClassName("new-game")[0];
         this.mobileSettings = el.getElementsByClassName("mobile-settings")[0];
@@ -28,11 +30,18 @@ class TopBar{
     }
 
     // Toggle showing the mobile settings
-    toggleMobileSettings () {
-        if (this.mobileSettings.style.display !== "none")
+    toggleMobileSettings (settings) {
+        if (this.mobileSettings.style.display !== "none"){
             this.mobileSettings.style.display = "none";
-        else
+            settings.putSettings(this.desktopSettings);
+        } else {
             this.mobileSettings.style.display = "block";
+            settings.putSettings(this.mobileSettings);
+        }
+    }
+
+    mobileSettingsOpen() {
+        return this.mobileSettings.style.display !== "none"
     }
 }
 
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index 5c65ed4..8fc1ea0 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -1,3 +1,4 @@
+'use strict';
 // 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.
 class Table{
     constructor(e, drag, socket) {
diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js
index 31b9a7f..36e28bc 100644
--- a/scripts/socket/sock.js
+++ b/scripts/socket/sock.js
@@ -1,3 +1,4 @@
+'use strict';
 // A wrapper around the wrapper 
 class SockWorker extends EventTarget{
     constructor (serveraddr, version)
diff --git a/scripts/theme.js b/scripts/theme.js
index e93f5b5..627b833 100644
--- a/scripts/theme.js
+++ b/scripts/theme.js
@@ -19,7 +19,7 @@ class Theme{
     static set(sheet)
     {
         Cookies.setYearCookie("theme", sheet);
-        Theme.restore();
+        Theme.theme.setAttribute("href", sheet + "?v=" + Date.now());
     }
 }
 
diff --git a/styles/input.css b/styles/input.css
index 42656a0..5e898ec 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -215,7 +215,14 @@ div.input-select
 
 	display: block;
 	position: absolute;
+	z-index: 0;
 	
+	pointer-events: none;
+
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	max-height: 8em;
 }
 
 div.input-select > div
@@ -231,10 +238,11 @@ div.input-select > div[selected=true]
 
 div.input-container:focus > div.input-select
 {
-	pointer-events: all;
-
 	transform: translate(0, 2em);
 
+	pointer-events: all;
+	z-index: 1;
+
 	border: 2px solid var(--input-border-select-active);
 	background-color: var(--input-bg-select-active);
 }
@@ -347,7 +355,7 @@ div.input-container[type=file]::after
 div.input-container[type=radio]::before
 {
 	display: block;
-	content: 'Select one';
+	content: attr(data-prompt) ":";
 	transition-duration: 0.2s;
 }