[chat] Use an object instead of a list

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