From 68db9abc7a02c78a0f170003c32d1fcd796eb212 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Wed, 20 Jul 2022 10:58:42 -0400 Subject: Replace var with let + visual tweaks - Replace var with let in most of my code - No longer bring cards to forfront of deck when hovering - Tweaks for dropdown selector input --- scripts/cards/deck.js | 4 ++-- scripts/cards/drag.js | 6 +++--- scripts/cookie.js | 4 ++-- scripts/gui/chat.js | 6 +++--- scripts/gui/input.js | 43 ++++++++++++++++++++++++------------------- scripts/gui/lobby.js | 14 +++++--------- scripts/gui/table.js | 8 ++++---- scripts/socket/message.js | 2 +- scripts/socket/sock.js | 4 ++-- styles/client/card.css | 10 ++++++++-- styles/input.css | 8 ++++---- 11 files changed, 58 insertions(+), 51 deletions(-) diff --git a/scripts/cards/deck.js b/scripts/cards/deck.js index 8d38186..8c8e3a7 100644 --- a/scripts/cards/deck.js +++ b/scripts/cards/deck.js @@ -117,7 +117,7 @@ class Deck { if(index1 < 0 || index1 >= this.cards.length || index2 < 0 || index2 >= this.cards.length) return - var temp = this.cards[index1] + let temp = this.cards[index1] this.cards[index1] = this.cards[index2]; this.cards[index2] = temp; @@ -168,7 +168,7 @@ class Deck { isInside(x, y) { - var rect = this.e.getBoundingClientRect(); + let rect = this.e.getBoundingClientRect(); return (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) } diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js index b24ccb1..fa1ef65 100644 --- a/scripts/cards/drag.js +++ b/scripts/cards/drag.js @@ -58,7 +58,7 @@ class MultiDrag extends EventTarget { if(e.button != 0) return; - var cap = new Event("dragstart"); + let cap = new Event("dragstart"); cap.drag = this.addDragEl( e.target, @@ -81,7 +81,7 @@ class MultiDrag extends EventTarget { if (i < 0 || i >= this.drag.length) return; - var cap = new Event("dragstop"); + let cap = new Event("dragstop"); cap.x = this.mouse[0]; cap.y = this.mouse[1]; @@ -112,7 +112,7 @@ class MultiDrag extends EventTarget { this.del = true; - var cap = new Event("dragstop"); + let cap = new Event("dragstop"); cap.x = this.mouse[0]; cap.y = this.mouse[1]; diff --git a/scripts/cookie.js b/scripts/cookie.js index 9c88963..649544d 100644 --- a/scripts/cookie.js +++ b/scripts/cookie.js @@ -24,13 +24,13 @@ class Cookies { } static setYearCookie(name, value) { - var date = new Date(Date.now()); + let date = new Date(Date.now()); date.setFullYear(date.getFullYear() + 1); Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()}); } static removeCookie(name) { - var date = new Date(0); + let date = new Date(0); Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()}); } } diff --git a/scripts/gui/chat.js b/scripts/gui/chat.js index 428403a..7cd1ae2 100644 --- a/scripts/gui/chat.js +++ b/scripts/gui/chat.js @@ -77,7 +77,7 @@ class Chat { this.getActiveChannel().btn.setAttribute("active", false); c.btn.setAttribute("active", true); - var ct = this.root.getElementsByClassName("chat-text")[0]; + let ct = this.root.getElementsByClassName("chat-text")[0]; ct.replaceWith(c.e); c.e.scroll({ @@ -94,7 +94,7 @@ class Chat { sendMessage () { - var str = this.chatInput.value; + let str = this.chatInput.value; if(str == "") return; this.chatInput.value = ""; @@ -110,7 +110,7 @@ class Chat { let autoscroll = c.e.scrollTop == c.e.scrollTopMax; - let csp = document.createElement("span") + let csp = document.createElement("span"); let tsp = document.createElement("span"); if(msg.server === true){ diff --git a/scripts/gui/input.js b/scripts/gui/input.js index ddaa4a3..0e0c7ba 100644 --- a/scripts/gui/input.js +++ b/scripts/gui/input.js @@ -4,11 +4,10 @@ class MakeInput { static createInput(type = "text", wrap = false, getset = true) { - var el = document.createElement("input"); + let el = document.createElement("input"); el.setAttribute("type", type); - if(wrap) - { + if(wrap) { return this.wrapInputs(type, el); } @@ -28,7 +27,7 @@ class MakeInput { // Function deprecated, finding another way to do this static inputLabel(text, id) { - var el = document.createElement("label"); + let el = document.createElement("label"); el.innerText = text; if(typeof id == "string") el.setAttribute("for", id); @@ -36,14 +35,14 @@ class MakeInput { } static colorInput (value) { - var el = MakeInput.createInput("color", true); + let el = MakeInput.createInput("color", true); el.setValue(value); return el; } static textInput (value, placeholder) { - var el = MakeInput.createInput("text"); + let el = MakeInput.createInput("text"); el.setAttribute("placeholder", placeholder); el.value = value; return el; @@ -51,13 +50,13 @@ class MakeInput { static numberInput (value) { - var el = MakeInput.createInput("number"); + let el = MakeInput.createInput("number"); el.value = value; return el; } static fileInput (accepts = "", multiple = false) { - var el = MakeInput.createInput("file", true, false); + let el = MakeInput.createInput("file", true, false); let e = el.getElement(); e.setAttribute("accepts", accepts); @@ -88,7 +87,7 @@ class MakeInput { } static checkboxInput (value = false) { - var el = MakeInput.createInput("checkbox", false, false); + let el = MakeInput.createInput("checkbox", false, false); el.getValue = function() { return el.checked; @@ -104,7 +103,7 @@ class MakeInput { } static radio (value, group, checked = false) { - var el = MakeInput.createInput("radio", false, false); + let el = MakeInput.createInput("radio", false, false); el.setAttribute("name", group); el.setAttribute("value", value); if(checked) @@ -125,7 +124,7 @@ class MakeInput { toWrap.push(document.createElement("br")); } - var wrapper = MakeInput.wrapInputs("radio", ...toWrap); + let wrapper = MakeInput.wrapInputs("radio", ...toWrap); wrapper.setAttribute("data-prompt", prompt); @@ -150,7 +149,7 @@ class MakeInput { static wrapInputs (type, ...el) { - var wrapper = document.createElement("div"); + let wrapper = document.createElement("div"); wrapper.className = "input-container"; wrapper.setAttribute("type", type); @@ -174,12 +173,19 @@ class MakeInput { } static selectOption (value, text, index, selected) { - var so = document.createElement("div"); + let so = document.createElement("div"); so.innerText = text; so.selectValue = value; so.selectIndex = index; + so.setAttribute("tabindex", 0); so.addEventListener("mousedown", MakeInput.selOption.bind(null, so)); + so.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + MakeInput.selOption(so); + } + }); + if(selected === true) so.setAttribute("selected", true); @@ -187,9 +193,8 @@ class MakeInput { } static selectInput (values, names, select = 0) { - var se = document.createElement("div"); + let se = document.createElement("div"); se.className = "input-select"; - se.setAttribute("tabindex", 0); se.setAttribute("selected", select); for(let i in names) @@ -197,7 +202,7 @@ class MakeInput { se.appendChild(MakeInput.selectOption(values[i], names[i], i, i == select)); } - var wrapper = MakeInput.wrapInputs("select", se); + let wrapper = MakeInput.wrapInputs("select", se); wrapper.getValue = MakeInput.selValue.bind(null, se); wrapper.getIndex = MakeInput.selIndex.bind(null, se); wrapper.addOption = MakeInput.selAdd.bind(se); @@ -259,7 +264,7 @@ class MakeInput { } static titleWrap(el, title) { - var wrapper = document.createElement("div"); + let wrapper = document.createElement("div"); wrapper.className = "input-title-wrapper"; wrapper.setAttribute("type", el.getAttribute("type")); wrapper.setAttribute("data-title", title); @@ -286,7 +291,7 @@ class Settings { static genSettings (template) { - var out = {}; + let out = {}; for(let key in template) { @@ -299,7 +304,7 @@ class Settings { getSettings () { - var out = {}; + let out = {}; for(let key in this.settings) out[key] = this.settings[key].el.getValue(); diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js index 4907f41..85855b6 100644 --- a/scripts/gui/lobby.js +++ b/scripts/gui/lobby.js @@ -53,10 +53,6 @@ class TopBar{ class Game { constructor(options = {id: 0, name: "", password: false}, el) { - this.getID = function () { - return options.id; - } - this.getName = function () { return options.name; } @@ -74,10 +70,6 @@ class Game { join.addEventListener("click", game.joinGame.bind(game, options.id)); e.appendChild(join); - this.hasPassword = function () { - return options.password; - } - if(usePass) { let pass = MakeInput.textInput("", "Game password"); pass.classList.add("pass"); @@ -89,6 +81,10 @@ class Game { } el.appendChild(e); + + this.remove = function () { + e.remove(); + } } } @@ -124,7 +120,7 @@ class Lobby { this.init = false; this.online = []; - this.games = []; + this.games = {}; this.packs = []; } diff --git a/scripts/gui/table.js b/scripts/gui/table.js index 46a520b..911e513 100644 --- a/scripts/gui/table.js +++ b/scripts/gui/table.js @@ -63,7 +63,7 @@ class Table{ // {data.options object} options as found in Deck constructor newDeck(data) { - var d = new Deck(data.id, data.options); + let d = new Deck(data.id, data.options); this.decks[data.id] = d; this.root.appendChild(d.e); } @@ -75,7 +75,7 @@ class Table{ // {data.deck} the id of the deck to add the card to newCard(data) { - var c = new Card(data.id, data.data); + let c = new Card(data.id, data.data); this.cards[data.id] = c; this.decks[data.deck].appendCard(c); this.drag.addTarget(c.e); @@ -165,8 +165,8 @@ class Table{ if(event.drag.length < 1) return; - var c = event.drag[0].e.card; - var d = this.checkDeck(event.x, event.y); + let c = event.drag[0].e.card; + let d = this.checkDeck(event.x, event.y); if(c !== null) { diff --git a/scripts/socket/message.js b/scripts/socket/message.js index 0288cbc..ec8e912 100644 --- a/scripts/socket/message.js +++ b/scripts/socket/message.js @@ -9,7 +9,7 @@ class Message{ stringify () { - var dat = this.d + let dat = this.d if(typeof dat !== "string"){ dat = JSON.stringify(dat); } diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js index 0a04b63..2135551 100644 --- a/scripts/socket/sock.js +++ b/scripts/socket/sock.js @@ -36,7 +36,7 @@ class SockWorker extends EventTarget{ // Attempts to turn the message into a usable object and pass it to the callback msg (e) { if(typeof e.data == "string") { - var dat = JSON.parse(e.data); + let dat = JSON.parse(e.data); this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data})); } } @@ -60,7 +60,7 @@ class SockWorker extends EventTarget{ // Send a message to the server send (type, data) { - var m = new Message(type, data); + let m = new Message(type, data); this.socket.send(m.stringify()) } diff --git a/styles/client/card.css b/styles/client/card.css index 9e7c558..f8c6438 100644 --- a/styles/client/card.css +++ b/styles/client/card.css @@ -21,8 +21,6 @@ card card:hover { box-shadow: 0 0 10px var(--card-hover); - - z-index: 4; } card > * { @@ -152,6 +150,14 @@ deck:hover { border: 3px solid var(--deck-hover); } +deck:hover > card { + opacity: 0.5; +} + +deck:hover > card:hover { + opacity: 1; +} + /* Deck modes */ deck[mode="stack"] > card { diff --git a/styles/input.css b/styles/input.css index 0b56982..f39a7f1 100644 --- a/styles/input.css +++ b/styles/input.css @@ -238,7 +238,7 @@ div.input-select > div[selected=true] display: block; } -div.input-container:focus > div.input-select +div.input-container:focus-within > div.input-select { transform: translate(0, 2em); @@ -249,7 +249,7 @@ div.input-container:focus > div.input-select background-color: var(--input-bg-select-active); } -div.input-container:focus > div.input-select > div +div.input-container:focus-within > div.input-select > div { pointer-events: all; display: block; @@ -257,13 +257,13 @@ div.input-container:focus > div.input-select > div width: 6em; } -div.input-container:focus > div.input-select > div:hover +div.input-container:focus-within > div.input-select > div:hover { background-color: var(--input-bg-select-hover); color: var(--input-color-select-hover); } -div.input-container:focus > div.input-select > div[selected=true]:after +div.input-container:focus-within > div.input-select > div[selected=true]:after { font-family: "IcoFont"; content: '\eed8'; -- cgit v1.2.3