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 ++++++++++++++++- 6 files changed, 86 insertions(+), 22 deletions(-) (limited to 'scripts') 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})); } } -- cgit v1.2.3