summaryrefslogtreecommitdiff
path: root/scripts/gui
diff options
context:
space:
mode:
authorKyle Gunger <kgunger12@gmail.com>2022-07-20 10:58:42 -0400
committerKyle Gunger <kgunger12@gmail.com>2022-07-20 10:58:42 -0400
commit68db9abc7a02c78a0f170003c32d1fcd796eb212 (patch)
tree602e9be8f4641991a9666315426a8ca10807c78c /scripts/gui
parent5207f04d5b775bf4805d83c81aaad1cfcf3fe68a (diff)
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
Diffstat (limited to 'scripts/gui')
-rw-r--r--scripts/gui/chat.js6
-rw-r--r--scripts/gui/input.js43
-rw-r--r--scripts/gui/lobby.js14
-rw-r--r--scripts/gui/table.js8
4 files changed, 36 insertions, 35 deletions
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)
{