From b48f0adccb11619680a47cac5fa9c68f638bd489 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sun, 17 May 2020 13:15:41 -0400 Subject: [WebCards] Update from my local repos --- webcards/scripts/cards/card.js | 45 +++++++------- webcards/scripts/cards/deck.js | 27 +++++---- webcards/scripts/client.js | 5 +- webcards/scripts/cookie.js | 39 ++++++++++++ webcards/scripts/gui/input.js | 132 +++++++++++++++++++++++++++++------------ webcards/scripts/gui/lobby.js | 15 ++--- webcards/scripts/gui/table.js | 4 +- webcards/scripts/theme.js | 24 ++++++++ 8 files changed, 208 insertions(+), 83 deletions(-) create mode 100644 webcards/scripts/cookie.js create mode 100644 webcards/scripts/theme.js (limited to 'webcards/scripts') 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(); -- cgit v1.2.3