summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKyle Gunger <kgunger12@gmail.com>2022-07-27 00:30:42 -0400
committerKyle Gunger <kgunger12@gmail.com>2022-07-27 00:30:42 -0400
commitd0ec435399ff3308be1b79ad67e37321b9a97b8e (patch)
tree9298f875c7cb6328294427d8e543c9024a08798d
parenta97fcacb0ce4d2f30fbe989ec1f62f6bd95c7e9a (diff)
[chat] Use an object instead of a list
-rw-r--r--scripts/client.js3
-rw-r--r--scripts/gui/chat.js65
-rw-r--r--scripts/gui/input.js12
-rw-r--r--scripts/gui/lobby.js10
-rw-r--r--styles/client/base.css6
-rw-r--r--styles/home/base.css2
-rw-r--r--styles/input.css5
7 files changed, 56 insertions, 47 deletions
diff --git a/scripts/client.js b/scripts/client.js
index 3c73793..01d5bea 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -61,8 +61,7 @@ class Client{
this.table = new Table(document.getElementsByClassName("table")[0], this.drag, this.socket);
this.chat = new Chat(document.getElementsByClassName("chat")[0], this.socket);
- this.chat.addChannel("Global");
- this.chat.switchChannel("Global");
+ this.chat.addChannel({name: "Global", id: "global", follow: true});
this.settings = new Settings(DefaultUserOps);
this.settings.putSettings(this.lobby.e.settings);
diff --git a/scripts/gui/chat.js b/scripts/gui/chat.js
index 90259e2..31cc460 100644
--- a/scripts/gui/chat.js
+++ b/scripts/gui/chat.js
@@ -5,7 +5,7 @@ const CHAT_RPC = ["addChannel", "recieveMessage", "deleteChannel"]
class Chat {
constructor(e, soc)
{
- this.chats = [];
+ this.chats = {};
this.active = null;
this.root = e;
this.socket = soc;
@@ -17,19 +17,6 @@ class Chat {
cin.getElementsByTagName("button")[0].addEventListener("click", this.sendMessage.bind(this));
}
- getChannel (name)
- {
- for(let i in this.chats)
- {
- if (this.chats[i].name == name)
- {
- return this.chats[i];
- }
- }
-
- return null;
- }
-
isActive (name)
{
if(this.active !== null)
@@ -38,9 +25,12 @@ class Chat {
return false;
}
- addChannel (name, follow = true)
+ addChannel (dat)
{
- if(this.getChannel(name) != null)
+ if(typeof dat.id !== "string")
+ return;
+
+ if(this.chats[dat.id] != null)
return;
let d = document.createElement("div");
@@ -50,16 +40,16 @@ class Chat {
b.setAttribute("active", false);
- b.onclick = this.switchChannel.bind(this, name);
+ b.onclick = this.switchChannel.bind(this, dat.id);
- b.innerText = name;
+ b.innerText = dat.name;
d.className = "chat-text";
- this.chats.push({name: name, e: d, btn: b});
+ this.chats[dat.id] = {name: dat.name, e: d, btn: b};
- if(follow)
- this.switchChannel(name)
+ if(dat.follow)
+ this.switchChannel(dat.id)
}
getActiveChannel ()
@@ -67,10 +57,9 @@ class Chat {
return this.active;
}
- switchChannel (name)
+ switchChannel (id)
{
- let c = this.getChannel(name);
- this.active = c;
+ let c = this.chats[id];
if(c == null)
return;
@@ -85,6 +74,8 @@ class Chat {
c.e.scroll({
top: c.e.scrollTopMax
});
+
+ this.active = c;
}
checkEnter(e)
@@ -100,12 +91,12 @@ class Chat {
if(str == "")
return;
this.chatInput.value = "";
- this.socket.send("chat", {str});
+ this.socket.send("chat", {channel: this.getActiveChannel().name, text: str});
}
- recieveMessage (channel, msg)
+ recieveMessage (msg)
{
- let c = this.getChannel(channel);
+ let c = this.chats[msg.channel];
if(c == null)
return;
@@ -136,9 +127,9 @@ class Chat {
c.e.scroll({top: c.e.scrollTopMax});
}
- clearChannel (name)
+ clearChannel (id)
{
- let c = this.getChannel(name);
+ let c = this.chats[id];
if(c == null)
return;
@@ -146,18 +137,14 @@ class Chat {
c.e.firstElementChild.remove();
}
- deleteChannel (name)
+ deleteChannel (id)
{
- let c = this.getChannel(name);
- if(c == null)
+ let c = this.chats[id];
+ if(c == null || id === "global")
return;
- let id = this.chats.indexOf(c);
- if(this.isActive(name)) {
- if(id == 0 && this.chats.length > 1)
- this.switchChannel(this.chats[1].name);
- else
- this.switchChannel(this.chats[id - 1].name);
+ if(this.isActive(id)) {
+ this.switchChannel("global");
}
@@ -166,7 +153,7 @@ class Chat {
c.btn.remove();
- this.chats.splice(this.chats.indexOf(c), 1);
+ delete this.chats[id];
}
toggle () {
diff --git a/scripts/gui/input.js b/scripts/gui/input.js
index 032d168..da19d95 100644
--- a/scripts/gui/input.js
+++ b/scripts/gui/input.js
@@ -289,14 +289,24 @@ class MakeInput {
}
// Mostly fixed now
-class Settings {
+class Settings extends EventTarget {
constructor (template = {})
{
+ super();
this.settings = Settings.genSettings(template);
+ this.applyEvents(template);
this.wrappers = {};
}
+ applyEvents (template) {
+ for(let key in template)
+ {
+ if(typeof MakeInput[template[key].type+"Input"] != null)
+ this.settings[key].el.onchange = (function () {this.dispatchEvent(new CustomEvent("change"));}).bind(this);
+ }
+ }
+
static genSettings (template)
{
let out = {};
diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js
index 6517592..c625420 100644
--- a/scripts/gui/lobby.js
+++ b/scripts/gui/lobby.js
@@ -158,7 +158,7 @@ class Lobby {
// { data.name string } name of the game the server runs
// { data.games array } array of public games the server is running
// { data.games[n].name } room name
- // { data.games[n].packs } list of the pack names used by this game
+ // { data.games[n].packs } number of extra packs used by this game
// { data.games[n].id } room identifier (uuid)
// { data.games[n].max } max players in room
gameList (data) {
@@ -167,8 +167,12 @@ class Lobby {
}
for (let i of data.games) {
- let g = new Game(i, this.e.games);
- this.games.push(g);
+ if (this.games[i.id] == null) {
+ let g = new Game(i, this.e.games);
+ this.games[i.id] = g;
+ } else {
+ console.log(`Game with duplicate ID ${i.id} was discarded.`);
+ }
}
this.e.stats.game.innerText = data.name;
diff --git a/styles/client/base.css b/styles/client/base.css
index 85bec49..0ecba9b 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -342,7 +342,11 @@ div.game > h2 {
}
div.game > span {
- width: 50%;
+ width: 40%;
+ padding-left: 5%;
+ padding-right: 5%;
+ overflow: hidden;
+ white-space: nowrap;
display: inline-block;
}
diff --git a/styles/home/base.css b/styles/home/base.css
index 8daae31..8cbdffa 100644
--- a/styles/home/base.css
+++ b/styles/home/base.css
@@ -35,7 +35,7 @@ div.content {
align-items: center;
- width: min-content;
+ width: 60%;
}
a, button {
diff --git a/styles/input.css b/styles/input.css
index 714910f..d10355a 100644
--- a/styles/input.css
+++ b/styles/input.css
@@ -54,6 +54,7 @@ input[type=text], input[type=password], input[type=date], input[type=time], inpu
background-color: var(--input-bg-text);
color: var(--input-color-text);
font-size: 1em;
+ width: calc(100% - 10px);
}
input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
@@ -429,6 +430,10 @@ div.input-container[type=select]:focus::after
color: var(--input-color-select-active);
}
+div.input-container[type="button"] > input {
+ width: calc(100% - 10px);
+}
+
/* Input Title Wrapper */
div.input-title-wrapper::before