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

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';