summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/standard/clubs.svg37
-rw-r--r--assets/standard/spade.svg32
-rw-r--r--client.html2
-rw-r--r--scripts/client.js17
-rw-r--r--scripts/gui/input.js186
-rw-r--r--scripts/gui/lobby.js17
-rw-r--r--scripts/gui/table.js1
-rw-r--r--scripts/socket/sock.js1
-rw-r--r--scripts/theme.js2
-rw-r--r--styles/input.css14
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 09:36:21 +0000