diff options
author | Kyle Gunger <kgunger12@gmail.com> | 2021-02-11 13:56:41 -0500 |
---|---|---|
committer | Kyle Gunger <kgunger12@gmail.com> | 2021-02-11 13:56:41 -0500 |
commit | 56008230167a0e3dfb4694d73e6b0159b6440484 (patch) | |
tree | 7e1c11b7bdc68cb5ff9e62ae62e8c07efa412bc3 | |
parent | 8c2d855f7e0ade48913a893b03f342156af3e528 (diff) |
Fix mobile settings
-rw-r--r-- | client.html | 4 | ||||
-rw-r--r-- | scripts/client.js | 29 | ||||
-rw-r--r-- | scripts/gui/input.js | 44 | ||||
-rw-r--r-- | scripts/gui/lobby.js | 9 | ||||
-rw-r--r-- | styles/client/base.css | 1 | ||||
-rw-r--r-- | styles/input.css | 11 |
6 files changed, 70 insertions, 28 deletions
diff --git a/client.html b/client.html index 0da27b6..bc85fee 100644 --- a/client.html +++ b/client.html @@ -60,10 +60,6 @@ <div class="new-game" style="display: none;"></div> <div class="settings mobile-settings" style="display: none;"> - <span><input type="text" placeholder="Username"/></span> - <span><input type="color" value="#f00"/></span> - - <button id="set">Accept Settings</button> </div> <div class="status"></div> diff --git a/scripts/client.js b/scripts/client.js index 0212efc..904e299 100644 --- a/scripts/client.js +++ b/scripts/client.js @@ -1,6 +1,29 @@ 'use strict'; const VERSION = "1.0.0"; +const DefaultSettings = { + a: { + type: "color", + title: "Player Color", + args: ["#ff0000"] + }, + b: { + type: "text", + title: "Player Name", + args: ["User " + Math.floor(Math.random() * 10000), ""] + }, + d: { + type: "checkbox", + title: "Order Check (D)", + args: [] + }, + c: { + type: "checkbox", + title: "Order Check (C)", + args: [] + } +} + // Client acts as the message hub for the whole game. // WebSocket messages come into Client and Client redirects them to the lobby or table based on the state of the game. // Client also performs the handshake for first starting the connection and messages everyone if the connection errors or closes. @@ -25,6 +48,9 @@ class Client{ this.chat.addChannel("global"); this.chat.switchChannel("global"); + this.settings = new Settings(DefaultSettings); + this.settings.putSettings(this.lobby.e.settings); + this.game = game; } @@ -62,8 +88,7 @@ class Client{ return; case "ready": - if(this.settings !== undefined) - this.settings.cleanup(); + this.settings.cleanup(); this.settings = new Settings(m.data); diff --git a/scripts/gui/input.js b/scripts/gui/input.js index 2ceb6f3..f72dd91 100644 --- a/scripts/gui/input.js +++ b/scripts/gui/input.js @@ -2,7 +2,7 @@ //Mostly fixed now class MakeInput { - static createInput(type = "text", wrap = false) + static createInput(type = "text", wrap = false, getset = true) { var el = document.createElement("input"); el.setAttribute("type", type); @@ -12,12 +12,14 @@ class MakeInput { return this.wrapInputs(type, el); } - el.getValue = function () { - return this.value; - } + if(getset) { + el.getValue = function () { + return this.value; + } - el.setValue = function(value) { - this.value = value + el.setValue = function(value) { + this.value = value + } } return el; @@ -55,7 +57,7 @@ class MakeInput { } static fileInput (accepts = "", multiple = false) { - var el = MakeInput.createInput("file", true); + var el = MakeInput.createInput("file", true, false); let e = el.getElement(); e.setAttribute("accepts", accepts); @@ -85,8 +87,8 @@ class MakeInput { return el; } - static checkboxInput (checked = false) { - var el = MakeInput.createInput("checkbox"); + static checkboxInput (value = false) { + var el = MakeInput.createInput("checkbox", false, false); el.getValue = function() { return el.checked; @@ -96,13 +98,13 @@ class MakeInput { el.checked = check; } - el.setValue(checked); + el.setValue(value); return el; } - static radio (group, value, checked = false) { - var el = MakeInput.createInput("radio"); + static radio (value, group, checked = false) { + var el = MakeInput.createInput("radio", false, false); el.setAttribute("name", group); el.setAttribute("value", value); if(checked) @@ -110,16 +112,16 @@ class MakeInput { return el; } - static radioInput (group, names, values, prompt = "Select One", checked = 0) { + static radioInput (values, names, group, prompt = "Select One", select = 0) { let toWrap = []; for(let i = 0; i < values.length; i++) { toWrap.push(MakeInput.inputLabel(names[i])); - if(i == checked) - toWrap.push(MakeInput.radio(group, values[i], true)); + if(i == select) + toWrap.push(MakeInput.radio(values[i], group, true)); else - toWrap.push(MakeInput.radio(group, values[i], false)); + toWrap.push(MakeInput.radio(values[i], group, false)); toWrap.push(document.createElement("br")); } @@ -171,7 +173,7 @@ class MakeInput { return wrapper; } - static selectOption (text, index, value, selected) { + static selectOption (value, text, index, selected) { var so = document.createElement("div"); so.innerText = text; so.selectValue = value; @@ -184,7 +186,7 @@ class MakeInput { return so } - static selectInput (names, values, select = 0) { + static selectInput (values, names, select = 0) { var se = document.createElement("div"); se.className = "input-select"; se.setAttribute("tabindex", 0); @@ -192,7 +194,7 @@ class MakeInput { for(let i in names) { - se.appendChild(MakeInput.selectOption(names[i], i, values[i], i == select)); + se.appendChild(MakeInput.selectOption(values[i], names[i], i, i == select)); } var wrapper = MakeInput.wrapInputs("select", se); @@ -245,6 +247,8 @@ class Settings { constructor (template = {}) { this.settings = Settings.genSettings(template); + + this.wrappers = {}; } static genSettings (template) @@ -272,6 +276,8 @@ class Settings { putSettings (el) { + this.cleanup(); + this.wrappers = {}; for(let key in this.settings) { diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js index 431e2e5..13f3eab 100644 --- a/scripts/gui/lobby.js +++ b/scripts/gui/lobby.js @@ -93,7 +93,10 @@ class Lobby { } }; - this.top = new TopBar(document.getElementsByClassName("topbar")[0]); + this.top = new TopBar( + document.getElementsByClassName("topbar")[0], + this.e.settings + ); this.init = false; this.online = []; @@ -200,9 +203,9 @@ class Lobby { } // Called when the client wants to toggle the mobile settings screen - mobileSettings () { + mobileSettings (settings) { //if(this.init) return; - this.top.toggleMobileSettings(); + this.top.toggleMobileSettings(settings); } // Called when the WebSocket state has changed. diff --git a/styles/client/base.css b/styles/client/base.css index e0b19d3..635fc78 100644 --- a/styles/client/base.css +++ b/styles/client/base.css @@ -158,6 +158,7 @@ div.settings { display:flex; flex-direction: column; padding: 5px; + overflow-y: auto; } /* Table rules */ diff --git a/styles/input.css b/styles/input.css index 87ee725..6f99fb5 100644 --- a/styles/input.css +++ b/styles/input.css @@ -433,6 +433,7 @@ div.input-title-wrapper::before { color: var(--main-color); content: attr(data-title); + display: block; } div.input-title-wrapper @@ -444,5 +445,15 @@ div.input-title-wrapper padding: 5px; } +div.input-title-wrapper[type=checkbox] +{ + cursor: pointer; +} + +div.input-title-wrapper[type=checkbox] > input +{ + pointer-events: none; +} + /* End Input CSS */
\ No newline at end of file |