diff options
Diffstat (limited to 'scripts')
| -rw-r--r-- | scripts/client.js | 17 | ||||
| -rw-r--r-- | scripts/gui/input.js | 186 | ||||
| -rw-r--r-- | scripts/gui/lobby.js | 17 | ||||
| -rw-r--r-- | scripts/gui/table.js | 1 | ||||
| -rw-r--r-- | scripts/socket/sock.js | 1 | ||||
| -rw-r--r-- | scripts/theme.js | 2 |
6 files changed, 155 insertions, 69 deletions
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()); } } |