summaryrefslogtreecommitdiff
path: root/webcards/scripts
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/scripts')
-rw-r--r--webcards/scripts/cards/card.js45
-rw-r--r--webcards/scripts/cards/deck.js27
-rw-r--r--webcards/scripts/client.js5
-rw-r--r--webcards/scripts/cookie.js39
-rw-r--r--webcards/scripts/gui/input.js132
-rw-r--r--webcards/scripts/gui/lobby.js15
-rw-r--r--webcards/scripts/gui/table.js4
-rw-r--r--webcards/scripts/theme.js24
8 files changed, 208 insertions, 83 deletions
diff --git a/webcards/scripts/cards/card.js b/webcards/scripts/cards/card.js
index 015995d..0f045fe 100644
--- a/webcards/scripts/cards/card.js
+++ b/webcards/scripts/cards/card.js
@@ -1,45 +1,44 @@
-var CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"];
+const CardPos = ["top", "topl", "topr", "mid", "midt", "midb", "bot", "botl", "botr", "all"];
// Card class represents one card.
// Every card should have a deck.
// Use deck.appendCard or deck.prependCard to make a card visible
function Card (data) {
- this.e = this.generateElements(data);
+ this.e = document.createElement("card");
+ this.generateElements(data);
this.e.style.left = "0px";
this.e.style.top = "0px";
}
// Internal
Card.prototype = {
- // Main generation func
+ // Main generation func, only for use in contructor
generateElements: function (data) {
+ while(this.e.firstElementChild != null)
+ this.e.firstElementChild.remove();
+
switch (typeof data) {
case "object":
- return this.generateObjectCard(data);
+ this.generateObjectCard(data, this.e);
+ break;
case "string":
- return this.generateBasicCard(data);
+ this.generateBasicCard(data, this.e);
+ break;
+ default:
+ this.generateErrorCard(this.e);
}
- let e = document.createElement("card");
- let t = document.createElement("carea");
- t.className = "mid";
- t.innerText = "Card Error: data";
- e.append(t);
- return e;
},
// Generate a card with basic text only
- generateBasicCard: function (data) {
- let e = document.createElement("card");
+ generateBasicCard: function (data, el) {
let t = document.createElement("carea");
t.className = "mid";
t.innerText = data;
- e.appendChild(t);
- return e;
+ el.appendChild(t);
},
// Generate a card with rich visuals
- generateObjectCard: function (data) {
- let e = document.createElement("card");
+ generateObjectCard: function (data, el) {
// Check for an asset URL
if (typeof data.assetURL != "string") {
@@ -48,16 +47,14 @@ Card.prototype = {
// Set card styles
for (let i in data.style) {
- e.style[i] = data.style[i];
+ el.style[i] = data.style[i];
}
// Generate card areas.
for (let i in CardPos) {
if (typeof data[CardPos[i]] == "object")
- e.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
+ el.appendChild(this.generateCArea(data[CardPos[i]], CardPos[i], data.assetURL));
}
-
- return e;
},
generateCArea: function (data, carea, assetURL) {
@@ -92,6 +89,10 @@ Card.prototype = {
}
return area;
- }
+ },
+ generateErrorCard: function(el)
+ {
+ this.generateBasicCard("Card Error: data", el);
+ }
}; \ No newline at end of file
diff --git a/webcards/scripts/cards/deck.js b/webcards/scripts/cards/deck.js
index 544a9ef..620a038 100644
--- a/webcards/scripts/cards/deck.js
+++ b/webcards/scripts/cards/deck.js
@@ -1,6 +1,6 @@
// Deck class represents multiple cards.
// Can be arranged in multiple ways.
-function Deck (options = {}){
+function Deck (options = {mode: "stack", smode: "one", sct: 0, pos: [0, 0]}){
this.cards = [];
// View mode
@@ -11,19 +11,19 @@ function Deck (options = {}){
// left (strip-hl)
// right (strip-hr)
// vertical
- // top (strip-vt)
- // bottom (strip-vb)
- this.mode = options.mode;
+ // up (strip-vu)
+ // down (strip-vd)
+ this.inf = options.mode == "infdraw";
- // Select mode
- // above
- // below
- // around
- // one
- // all
+ // Select mode - controls what other cards are selected when one card is selected
+ // above - selectes cards above the selected one
+ // below - selects cards below the selected one
+ // around - selects cards above and below
+ // one - selects only card chosen
+ // all - selects all cards when card selected
this.smode = options.smode;
- // Select count (-1 = all available)
+ // Select count (negative defaults to 0)
// above - controls number of cards above clicked are selected
// below - controls number of cards below clicked are selected
// around
@@ -31,7 +31,7 @@ function Deck (options = {}){
// array - [first number: number above selected] [second number: number below selected]
// one - no effect
// all - no effect
- this.sct = options.sct;
+ this.sct = options.sct > 0 ? options.sct : 0;
// Position
// array of where the deck is centered
@@ -39,6 +39,9 @@ function Deck (options = {}){
this.y = options.pos[1];
this.e = document.createElement("deck");
+ this.e.style.left = this.x + "px";
+ this.e.style.top = this.y + "px";
+ this.e.setAttribute("mode", options.mode);
}
Deck.prototype = {
diff --git a/webcards/scripts/client.js b/webcards/scripts/client.js
index ea62e26..0bf2e75 100644
--- a/webcards/scripts/client.js
+++ b/webcards/scripts/client.js
@@ -26,13 +26,14 @@ Client.prototype = {
if(m.type == "error" || m.type == "closed") {
var t = m.type;
t = t[0].toUpperCase() + t.slice(1)
- this.lob.setState(t, "#D00", this.soc.server);
+ this.lob.setState(t, "closed", this.soc.server);
this.tab.handleClose();
return;
}
switch(this.state) {
case "handshake":
+ this.lob.setState("Connected", "ok", this.soc.server);
this.handshake(m);
break;
case "lobby":
@@ -49,7 +50,7 @@ Client.prototype = {
case "verr":
this.soc.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(`Error connecting to server: version of client (${this.version}) not accepted.`);
console.error(m.data);
return;
case "lobby":
diff --git a/webcards/scripts/cookie.js b/webcards/scripts/cookie.js
new file mode 100644
index 0000000..2eb5977
--- /dev/null
+++ b/webcards/scripts/cookie.js
@@ -0,0 +1,39 @@
+function CookieManager() {
+}
+
+CookieManager.prototype = {
+ getCookie: function(name){
+ let cookies = document.cookie.split(";");
+ for(let i in cookies) {
+ let cname = cookies[i].trim().split("=")[0];
+ if(cname == name){
+ return cookies[i].trim().slice(name.length + 1);
+ }
+ }
+ return "";
+ },
+
+ setCookie: function(name, value, data={}) {
+ let extra = "";
+
+ for(let key in data)
+ {
+ extra += "; " + key + "=" + data[key];
+ }
+
+ document.cookie = name + "=" + value + extra;
+ },
+
+ setYearCookie: function(name, value) {
+ var date = new Date(Date.now());
+ date.setFullYear(date.getFullYear() + 1);
+ this.setCookie(name, value, {expires: date.toUTCString()});
+ },
+
+ removeCookie: function(name) {
+ var date = new Date(0);
+ this.setCookie(name, "", {expires: date.toUTCString()});
+ }
+};
+
+var Cookies = new CookieManager(); \ No newline at end of file
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();
},
diff --git a/webcards/scripts/theme.js b/webcards/scripts/theme.js
new file mode 100644
index 0000000..8e69377
--- /dev/null
+++ b/webcards/scripts/theme.js
@@ -0,0 +1,24 @@
+function Theme(){
+ this.t = document.getElementById("theme");
+}
+
+Theme.prototype = {
+ init: function() {
+ if(Cookies.getCookie("theme") == ""){
+ Cookies.setYearCookie("theme", "styles/themes/colors-base.css");
+ }
+ },
+
+ restore: function() {
+ this.init();
+ this.t.setAttribute("href", Cookies.getCookie("theme") + "?v=" + Date.now());
+ },
+
+ set: function(sheet) {
+ Cookies.setYearCookie("theme", sheet);
+ this.restore();
+ }
+};
+
+var GlobalTheme = new Theme();
+GlobalTheme.restore();
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-07 14:36:31 +0000