summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client.html4
-rw-r--r--scripts/client.js29
-rw-r--r--scripts/gui/input.js44
-rw-r--r--scripts/gui/lobby.js9
-rw-r--r--styles/client/base.css1
-rw-r--r--styles/input.css11
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
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 04:19:19 +0000