From 7abeb4a35a0105b94e599de9970404c98790b4d9 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sun, 24 Jul 2022 23:00:59 -0400 Subject: Clean up game element --- scripts/client.js | 29 ++++++++++++++++++++-------- scripts/gui/chat.js | 2 ++ scripts/gui/input.js | 8 ++++++++ scripts/gui/lobby.js | 49 ++++++++++++++++++++++++++++++++++------------- scripts/gui/table.js | 3 +++ scripts/socket/sock.js | 17 +++++++++++++++- styles/client/base.css | 14 +++++++++----- styles/client/desktop.css | 6 +----- styles/client/mobile.css | 4 ---- styles/input.css | 6 +++--- 10 files changed, 99 insertions(+), 39 deletions(-) diff --git a/scripts/client.js b/scripts/client.js index 42ca5be..4d27bc5 100644 --- a/scripts/client.js +++ b/scripts/client.js @@ -1,5 +1,5 @@ 'use strict'; -const VERSION = "1.0.0"; +const VERSION = "1"; const DefaultUserOps = { color: { @@ -51,8 +51,10 @@ class Client{ this.socket.addEventListener("menu", this.menuMsg.bind(this)); this.socket.addEventListener("game", this.gameMsg.bind(this)); this.socket.addEventListener("chat", this.chatMsg.bind(this)); + this.socket.addEventListener("ping", this.pingMsg.bind(this)); this.lobby = new Lobby(document.getElementsByClassName("lobby")[0], this.socket); + this.lobby.setState("Connecting", "loading", this.socket.server); this.drag = new MultiDrag(); @@ -111,8 +113,8 @@ class Client{ this.settings.cleanup(); this.gameOptions.cleanup(); - this.settings = new Settings(m.data.user); - this.gameOptions = new Settings(m.data.game); + //this.settings = new Settings(m.data.user); + //this.gameOptions = new Settings(m.data.game); this.gameOptions.putSettings(this.lobby.top.newGame); @@ -131,21 +133,32 @@ class Client{ menuMsg (e) { let m = e.detail; - this.lobby[m.type](m.data); + + if (LOBBY_RPC.includes(m.type)) + this.lobby[m.type](m.data); } // Game switch, called when in game and a message arrives from the server gameMsg (e) { let m = e.detail; - this.table[m.type](m.data); + + if (TABLE_RPC.includes(m.type)) + this.table[m.type](m.data); } // Callback when a chat event is recieved from the server chatMsg (e) { let m = e.detail; - this.chat[m.type](m.data); + + if (CHAT_RPC.includes(m.type)) + this.chat[m.type](m.data); + } + + pingMsg(e) + { + this.socket.send("pong", ""); } // Reset the lobby and table, then attempt to reopen the connection to the server. @@ -157,10 +170,10 @@ class Client{ this.socket.init(); } - joinGame(id, pass = "") + joinGame(id) { this.lobby.setState("Joining...", "loading", this.socket.server); - this.socket.send("join", {id: id, pass: pass}); + this.socket.send("join", {id: id, pass: this.lobby.games[id].getPass()}); } leaveGame() diff --git a/scripts/gui/chat.js b/scripts/gui/chat.js index 7cd1ae2..90259e2 100644 --- a/scripts/gui/chat.js +++ b/scripts/gui/chat.js @@ -1,5 +1,7 @@ 'use strict'; +const CHAT_RPC = ["addChannel", "recieveMessage", "deleteChannel"] + class Chat { constructor(e, soc) { diff --git a/scripts/gui/input.js b/scripts/gui/input.js index 0e0c7ba..032d168 100644 --- a/scripts/gui/input.js +++ b/scripts/gui/input.js @@ -48,6 +48,14 @@ class MakeInput { return el; } + static passwordInput (value, placeholder) + { + let el = MakeInput.createInput("password"); + el.setAttribute("placeholder", placeholder); + el.value = value; + return el; + } + static numberInput (value) { let el = MakeInput.createInput("number"); diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js index 85855b6..6517592 100644 --- a/scripts/gui/lobby.js +++ b/scripts/gui/lobby.js @@ -1,4 +1,7 @@ 'use strict'; + +const LOBBY_RPC = ["packList", "gameList", "players", "addGame", "deleteGame"] + // ############### // # TopBar Code # // ############### @@ -51,35 +54,53 @@ class TopBar{ // Game represents a single game in the lobby view. It has methods for setting up the elements and such. class Game { - constructor(options = {id: 0, name: "", password: false}, el) + constructor(options = {id: 0, name: "", packs: [], pass: false}, el) { - this.getName = function () { + this.getName = () => { return options.name; } + this.getID = () => { + return options.id; + } + + // Main game element let e = document.createElement("div"); e.className = "game"; + // Game title let title = document.createElement("h2"); title.textContent = options.name; e.appendChild(title); + // Game stats + let gid = document.createElement("span"); + gid.textContent = `Game ID: ${options.id}`; + e.appendChild(gid); + + let pid = document.createElement("span"); + pid.textContent = `Pack count: ${options.packs.length}`; + e.appendChild(pid); + + // Join/password + let jap = document.createElement("div"); + let join = document.createElement("button"); - join.className = "join"; join.textContent = "Join"; join.addEventListener("click", game.joinGame.bind(game, options.id)); - e.appendChild(join); + jap.appendChild(join); - if(usePass) { - let pass = MakeInput.textInput("", "Game password"); - pass.classList.add("pass"); - e.appendChild(pass); + this.getPass = () => { + return ""; + } - this.getUserPass = function () { - return pass.value; - } + if(options.pass) { + let pass = MakeInput.passwordInput("", "Game password"); + jap.appendChild(pass); + this.getPass = pass.getValue.bind(pass); } + e.appendChild(jap); el.appendChild(e); this.remove = function () { @@ -168,14 +189,16 @@ class Lobby { // { data.name } room name // { data.packs } list of the pack names used by this game // { data.id } room identifier (uuid) + // { data.pass } true or false weather the game has a password + addGame (data) { let g = new Game(data, this.e.games); - this.games.push(g); + this.games[data.id] = g; } // Called when a new public game is removed on the server // { data string } the uuid of the game to delete - removeGame (data) { + deleteGame (data) { } diff --git a/scripts/gui/table.js b/scripts/gui/table.js index 911e513..e4d6770 100644 --- a/scripts/gui/table.js +++ b/scripts/gui/table.js @@ -1,4 +1,7 @@ 'use strict'; + +const TABLE_RPC = ["newDeck", "newCard", "deleteDeck", "deleteCard", "moveByID", "swapCard"] + // Table represents and manages the actual game. It accepts inputs from the server and tries to query the server when the player makes a move. class Table{ constructor(e, drag, socket) { diff --git a/scripts/socket/sock.js b/scripts/socket/sock.js index 2135551..4c64e02 100644 --- a/scripts/socket/sock.js +++ b/scripts/socket/sock.js @@ -1,16 +1,22 @@ 'use strict'; + +const VALID_EVENTS = ["error", "closed", "handshake", "menu", "game", "chat", "ping"]; + // A wrapper around the wrapper class SockWorker extends EventTarget{ + constructor (serveraddr, version) { super(); this.server = serveraddr; this.version = version; + this.handshake = false; } // Initialize the connection. init () { + this.handshake = false; if(this.server == "" || this.server == null) { return; } @@ -37,7 +43,16 @@ class SockWorker extends EventTarget{ msg (e) { if(typeof e.data == "string") { let dat = JSON.parse(e.data); - this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data})); + + if (!this.handshake) { + if (dat.type == "ready") + this.handshake = true; + this.dispatchEvent(new CustomEvent("handshake", {detail: dat.type})); + return; + } + + if (VALID_EVENTS.includes(dat.type)) + this.dispatchEvent(new CustomEvent(dat.type, {detail: dat.data})); } } diff --git a/styles/client/base.css b/styles/client/base.css index 60631ce..85bec49 100644 --- a/styles/client/base.css +++ b/styles/client/base.css @@ -337,12 +337,16 @@ div.chat-text > div { div.game > h2 { margin: 0; + overflow: hidden; + white-space: nowrap; } -button.join { - position: absolute; - - bottom: 5px; - right: 5px; +div.game > span { + width: 50%; + display: inline-block; } +div.game > div { + display: flex; + flex-direction: row-reverse; +} diff --git a/styles/client/desktop.css b/styles/client/desktop.css index 410b516..2f5bb65 100644 --- a/styles/client/desktop.css +++ b/styles/client/desktop.css @@ -84,7 +84,7 @@ } div.content { - min-width: 70vw; + width: 70vw; min-height: 70vh; display: flex; @@ -135,10 +135,6 @@ margin-top: 10px; } - div.game { - height: 20%; - } - /* Table rules */ diff --git a/styles/client/mobile.css b/styles/client/mobile.css index 70e17dd..92bf6e4 100644 --- a/styles/client/mobile.css +++ b/styles/client/mobile.css @@ -78,8 +78,4 @@ box-sizing: border-box; } - - div.game { - height: 12.5%; - } } diff --git a/styles/input.css b/styles/input.css index f39a7f1..714910f 100644 --- a/styles/input.css +++ b/styles/input.css @@ -46,7 +46,7 @@ input[type=button]:active, input[type=submit]:active, button:active, a:active /* Text, date, number, and time input */ -input[type=text], input[type=date], input[type=time], input[type="number"] +input[type=text], input[type=password], input[type=date], input[type=time], input[type="number"] { border: 2px solid var(--input-border-text); border-radius: 3px; @@ -56,12 +56,12 @@ input[type=text], input[type=date], input[type=time], input[type="number"] font-size: 1em; } -input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover +input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover { border-color: var(--input-border-text-hover); } -input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus +input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus { border-color: var(--input-border-text-active); } -- cgit v1.2.3