summaryrefslogtreecommitdiff
path: root/webcards/scripts/gui
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/scripts/gui')
-rw-r--r--webcards/scripts/gui/input.js132
-rw-r--r--webcards/scripts/gui/lobby.js15
-rw-r--r--webcards/scripts/gui/table.js4
3 files changed, 104 insertions, 47 deletions
diff --git a/webcards/scripts/gui/input.js b/webcards/scripts/gui/input.js
index c349a07..b0bbec0 100644
--- a/webcards/scripts/gui/input.js
+++ b/webcards/scripts/gui/input.js
@@ -1,24 +1,39 @@
-var inputFuncs = {
- createInput: function(type = "text", wrapped = false, id) {
+function customSelectValue (el) {
+ var sel = el.getAttribute("selected");
+
+ if(typeof sel != "undefined") {
+ return el.children[parseInt(sel)].getAttribute("value");
+ }
+
+ return "";
+}
+
+function customSelectOption (el) {
+ var sn = Array.prototype.indexOf.call(el.parentElement.children, el);
+ var psn = el.parentElement.getAttribute("selected");
+
+ if(typeof psn == "string")
+ el.parentElement.children[parseInt(psn)].setAttribute("selected", false);
+
+ if(typeof sn == "string")
+ el.parentElement.setAttribute("selected", parseInt(sn));
+
+ el.setAttribute("selected", true);
+ el.parentElement.setAttribute("selected", parseInt(sn));
+}
+
+var InputFuncs = {
+ createInput: function(type = "text", id) {
var el = document.createElement("input");
el.setAttribute("type", type);
if(typeof id == "string")
el.setAttribute("id", id);
- if(wrapped) {
- var wrapper = document.createElement("div");
- wrapper.className = "input-container";
- wrapper.setAttribute("type", type);
- wrapper.setAttribute("onclick", "this.firstElementChild.click()");
- wrapper.appendChild(el);
- wrapper.input = el;
- return wrapper;
- }
-
el.getValue = function () {
return this.value;
}
+
return el;
},
@@ -31,26 +46,27 @@ var inputFuncs = {
},
colorInput: function(value, id) {
- var el = this.createInput("color", true, id);
+ var el = this.createInput("color", id);
el.value = value;
return el;
},
textInput: function(value, placeholder, id) {
- var el = this.createInput("text", false, id);
+ var el = this.createInput("text", id);
el.setAttribute("placeholder", placeholder);
el.value = value;
return el;
},
numberInput: function(value, id) {
- var el = this.createInput("number", false, id);
+ var el = this.createInput("number", id);
el.value = value;
return el;
},
+ //To fix
fileInput: function(value, id) {
- var el = this.createInput("file", true, id);
+ var el = this.createInput("file", id);
el.value = value;
@@ -91,11 +107,21 @@ var inputFuncs = {
return el;
},
- radioInputs: function(group, names, values, checked = 0) {
- var wrapper = document.createElement("div");
- wrapper.className = "input-container";
- wrapper.setAttribute("type", "radio");
-
+ radioInputs: function(group, names, values, checked = 0, id) {
+
+ let toWrap = [];
+
+ for(let i = 0; i < values.length; i++) {
+ toWrap.push(this.inputLabel(names[i], group+"-"+i));
+ if(i == checked)
+ toWrap.push(this.radioInput(group, values[i], true, group+"-"+i));
+ else
+ toWrap.push(this.radioInput(group, values[i], false, group+"-"+i));
+ toWrap.push(document.createElement("br"));
+ }
+
+ var wrapper = this.wrapInputs("radio", ...toWrap);
+
wrapper.getValue = function() {
for(let i = 0; i < this.children.length; i++){
if(this.children[i].checked)
@@ -103,30 +129,62 @@ var inputFuncs = {
}
};
- for(let i = 0; i < values.length; i++) {
- wrapper.appendChild(this.inputLabel(names[i], group+"-"+i));
- if(i == checked)
- wrapper.appendChild(this.radioInput(group, values[i], true, group+"-"+i));
- else
- wrapper.appendChild(this.radioInput(group, values[i], false, group+"-"+i));
- wrapper.appendChild(document.createElement("br"));
- }
+ if(typeof id == "string")
+ wrapper.setAttribute("id", id);
return wrapper;
},
- wrapInput: function(el) {
+ selectOption: function(text, value, selected) {
+ var so = document.createElement("div");
+ so.innerText = text;
+ so.setAttribute("value", value);
+ so.addEventListener("mousedown", customSelectOption.bind(null, so));
+
+ if(selected === true)
+ so.setAttribute("selected", true);
+
+ return so
+ },
+
+ selectInput: function(names, values, id, select = 0) {
+ var se = document.createElement("div");
+ se.className = "input-select";
+ se.setAttribute("tabindex", 0);
+ se.setAttribute("selected", select);
+
+ for(let i in names)
+ {
+ se.appendChild(this.selectOption(names[i], values[i], i == select));
+ }
+
+ if(typeof id == "string")
+ se.setAttribute("id", id);
+ var wrapper = this.wrapInputs("select", se);
+ wrapper.getValue = customSelectValue.bind(null, se);
+ wrapper.setAttribute("tabindex", 0);
+
+ return wrapper;
+ },
+
+ wrapInputs: function(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;
}
};
-function Settings () {
- this.settings = {
- username: {
- type: "text",
- args: [Math.floor(Math.random() * 100000), "Username", "userName"]
- }
- };
+function Settings (settings = {}) {
+ this.settings = settings;
this.genSettings();
}
diff --git a/webcards/scripts/gui/lobby.js b/webcards/scripts/gui/lobby.js
index 731d9ec..07f8223 100644
--- a/webcards/scripts/gui/lobby.js
+++ b/webcards/scripts/gui/lobby.js
@@ -131,11 +131,12 @@ Lobby.prototype = {
},
// Called when the WebSocket state has changed.
- setState: function(text, color, server) {
- this.e.status.style.backgroundColor = color;
- this.e.status.innerText = text;
+ setState: function(text, s, server) {
+ this.e.status.setAttribute("s", s);
+ if(this.e.status.innerText != "Error" || ( this.e.status.innerText == "Error" && text != "Closed"))
+ this.e.status.innerText = text;
this.e.addr.innerText = server;
- this.top.setColor(color);
+ this.top.setStatus(s);
},
// Called when we are resetting the game.
@@ -144,7 +145,7 @@ Lobby.prototype = {
this.e.games.removeChild(this.e.games.firstElementChild)
}
- this.setState("Connecting", "#DA0", this.e.addr.innerText);
+ this.setState("Connecting", "loading", this.e.addr.innerText);
this.init = false;
}
};
@@ -165,8 +166,8 @@ function TopBar(el) {
TopBar.prototype = {
// Set color of status bar
- setColor: function(color) {
- this.status.style.backgroundColor = color;
+ setStatus: function(s) {
+ this.status.setAttribute("s", s);
},
// Toggle showing the new game screen
diff --git a/webcards/scripts/gui/table.js b/webcards/scripts/gui/table.js
index db67529..2776f80 100644
--- a/webcards/scripts/gui/table.js
+++ b/webcards/scripts/gui/table.js
@@ -1,4 +1,4 @@
-// Table represents and manages the actual game. It accepts inputs from the server and tries to queries the server when the player makes a move.
+// 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.
function Table(el, soc) {
this.root = el;
this.soc = soc;
@@ -22,8 +22,6 @@ Table.prototype = {
}
},
-
-
handleClose: function() {
this.reset();
},