diff options
Diffstat (limited to 'scripts/client')
-rw-r--r-- | scripts/client/client.js | 105 | ||||
-rw-r--r-- | scripts/client/lobby.js | 102 | ||||
-rw-r--r-- | scripts/client/message.js | 14 | ||||
-rw-r--r-- | scripts/client/sock.js | 52 | ||||
-rw-r--r-- | scripts/client/table.js | 16 |
5 files changed, 289 insertions, 0 deletions
diff --git a/scripts/client/client.js b/scripts/client/client.js new file mode 100644 index 0000000..b5dd4bf --- /dev/null +++ b/scripts/client/client.js @@ -0,0 +1,105 @@ +// Client acts as the message hub for the whole game. +// WebSocket messages come into Client and Client redirects them to the lobby or table based on the state of the game. +// Client also performs the handshake for first starting the connection and messages everyone if the connection errors or closes. +function Client(serveraddr, game) { + this.state = "handshake"; + + this.soc = new SockWorker(serveraddr, "1", this.cb.bind(this)); + + this.lob = new Lobby(document.getElementsByClassName("lobby")[0], this.soc); + this.tab = new Table(document.getElementsByClassName("table")[0], this.soc); + + this.game = game; +} + +Client.prototype = { + init: function() { + this.soc.init(); + }, + + // Entry point for a message. + // If it's a close message, the + cb: function(m) { + console.log(m); + + if(m.type == "error" || m.type == "closed") { + var t = m.type; + t = t[0].toUpperCase() + t.slice(1) + this.lob.setState(t, "#D00", this.soc.server); + this.tab.handleClose(); + return; + } + + switch(this.state) { + case "handshake": + this.handshake(m); + break; + case "lobby": + this.lobby(m); + break; + case "game": + break; + } + }, + + handshake: function(m) { + switch (m.type) { + case "verr": + this.soc.close(); + alert(`Error connecting to server: version of client (${this.version}) not accepted.`); + console.error("Error connecting to server: version of client (${this.version}) not accepted."); + console.error(m.data); + return; + case "lobby": + this.state = "lobby"; + this.soc.send("ready", ""); + return; + } + }, + + lobby: function (m) { + switch (m.type) { + case "plist": + this.lob.packList(m.data); + break; + case "glist": + this.lob.gameList(m.data, this.game); + this.game = null; + break; + case "players": + this.lob.players(m.data); + break; + case "gdel": + this.lob.removeGame(m.data); + break; + case "gadd": + this.lob.addGame(m.data); + break; + case "pdel": + this.lob.removePlayer(m.data); + break; + case "padd": + this.lob.addPlayer(m.data); + break; + case "pmove": + this.lob.movePlayer(m.data); + break; + } + }, + + game: function (m) { + switch (m.type) { + + } + }, + + // Reset the lobby and table, then attempt to reopen the connection to the server. + reset: function() { + this.state = "handshake"; + + this.lob.reset(); + this.tab.reset(); + + this.soc.init(); + } +}; diff --git a/scripts/client/lobby.js b/scripts/client/lobby.js new file mode 100644 index 0000000..8d46352 --- /dev/null +++ b/scripts/client/lobby.js @@ -0,0 +1,102 @@ +// Lobby manages the players and games provided by the server and allows users to join or create their own games. +function Lobby(el){ + this.root = el; + + this.elements = { + status: this.root.getElementsByClassName("status")[0], + addr: this.root.getElementsByClassName("addr")[0], + + stats: { + game: document.getElementById("game"), + packs: document.getElementById("packs"), + online: document.getElementById("online"), + ingame: document.getElementById("ingame"), + pubgame: document.getElementById("pubgame") + }, + + settings: { + name: document.getElementById("name"), + color: document.getElementById("usercolor") + } + }; + + this.top = new TopBar(document.getElementsByClassName("topbar")[0]); + + this.init = false; + this.online = []; + this.games = []; + this.packs = []; + this.players = []; +} + +Lobby.prototype = { + packList: function(data){ + + this.elements.stats.packs.innerText = this.packs.length(); + }, + + gameList: function(data, game){ + + this.elements.stats.pubgame.innerText = this.games.length(); + }, + + players: function(data) { + + this.elements.stats.online.innerText = this.players.length(); + this.init = true; + }, + + addGame: function(data){ + + }, + + removeGame: function(data){ + + }, + + addPlayer: function(data){ + + }, + + movePlayer: function(data){ + + }, + + removePlayer: function(data){ + + }, + + newGameScreen: function(){ + if(this.init) return; + }, + + setState: function(text, color, server){ + this.elements.status.style.backgroundColor = color; + this.elements.status.innerText = text; + this.elements.addr.innerText = server; + this.top.setColor(color); + }, + + reset: function(){ + this.setState("Connecting", "#DA0", this.elements.addr.innerText); + this.init = false; + } +}; + +// ############### +// # TopBar Code # +// ############### + +function TopBar(el) { + this.root = el; + + this.newGame = el.getElementsByClassName("new-game")[0]; + this.mobileSettings = el.getElementsByClassName("mobile-settings")[0]; + this.status = el.getElementsByClassName("status")[0]; +} + +TopBar.prototype = { + setColor: function(color) { + this.status.style.backgroundColor = color; + } +}; diff --git a/scripts/client/message.js b/scripts/client/message.js new file mode 100644 index 0000000..5e821c4 --- /dev/null +++ b/scripts/client/message.js @@ -0,0 +1,14 @@ +function Message(type, data){ + this.t = type; + this.d = data; +} + +Message.prototype = { + stringify: function(){ + var dat = this.d + if(typeof dat !== "string"){ + dat = JSON.stringify(dat); + } + return JSON.stringify({type: this.t, data: dat}); + } +}; diff --git a/scripts/client/sock.js b/scripts/client/sock.js new file mode 100644 index 0000000..78c4195 --- /dev/null +++ b/scripts/client/sock.js @@ -0,0 +1,52 @@ +function SockWorker(serveraddr, version, callback) { + this.server = serveraddr; + this.version = version; + this.cb = callback; +} + +SockWorker.prototype = { + init: function() { + if(this.server == "" || this.server == null) { + return; + } + try { + this.socket = new WebSocket(this.server); + + this.socket.addEventListener("open", this.o.bind(this)); + this.socket.addEventListener("message", this.msg.bind(this)); + + this.socket.addEventListener("closed", this.c.bind(this)); + this.socket.addEventListener("error", this.err.bind(this)); + } catch (e) { + this.err(); + } + }, + + o: function() { + this.send("version", this.version); + }, + + msg: function(e) { + if(typeof e.data == "string") { + var dat = JSON.parse(e.data) + this.cb(dat); + } + }, + + c: function() { + this.cb({type: "close", data: ""}); + }, + + err: function() { + this.cb({type: "error", data: ""}); + }, + + close: function() { + this.socket.close(); + }, + + send: function(type, data) { + var m = new Message(type, data); + this.socket.send(m.stringify()) + } +};
\ No newline at end of file diff --git a/scripts/client/table.js b/scripts/client/table.js new file mode 100644 index 0000000..911763a --- /dev/null +++ b/scripts/client/table.js @@ -0,0 +1,16 @@ +// Table represents and manages the actual game. It accepts inputs from the server and tries to queries the server when the player makes a move. +function Table(el, soc) { + this.root = el; + this.soc = soc; +} + +Table.prototype = { + + handleClose: function() { + + }, + + reset: function() { + + } +}
\ No newline at end of file |