diff options
| -rw-r--r-- | scripts/client.js | 3 | ||||
| -rw-r--r-- | scripts/gui/chat.js | 65 | ||||
| -rw-r--r-- | scripts/gui/input.js | 12 | ||||
| -rw-r--r-- | scripts/gui/lobby.js | 10 | ||||
| -rw-r--r-- | styles/client/base.css | 6 | ||||
| -rw-r--r-- | styles/home/base.css | 2 | ||||
| -rw-r--r-- | styles/input.css | 5 |
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 |