diff options
Diffstat (limited to 'webcards/scripts/gui/lobby.js')
| -rw-r--r-- | webcards/scripts/gui/lobby.js | 212 |
1 files changed, 112 insertions, 100 deletions
diff --git a/webcards/scripts/gui/lobby.js b/webcards/scripts/gui/lobby.js index 07f8223..7d2b6cd 100644 --- a/webcards/scripts/gui/lobby.js +++ b/webcards/scripts/gui/lobby.js @@ -1,39 +1,93 @@ -// 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.e = { - status: el.getElementsByClassName("status")[0], - addr: el.getElementsByClassName("addr")[0], - games: el.getElementsByClassName("games")[0], - settings: el.getElementsByClassName("settings")[0], - - stats: { - game: document.getElementById("game"), - packs: document.getElementById("packs"), - online: document.getElementById("online"), - ingame: document.getElementById("ingame"), - pubgame: document.getElementById("pubgame") - } - }; - - this.top = new TopBar(document.getElementsByClassName("topbar")[0]); - - this.init = false; - this.online = []; - this.games = []; - this.packs = []; - this.players = []; +// ############### +// # TopBar Code # +// ############### + +// TopBar represents the bar at the top of the screen when client is in the lobby. + +class TopBar{ + constructor (el) + { + this.root = el; + + this.newGame = el.getElementsByClassName("new-game")[0]; + this.mobileSettings = el.getElementsByClassName("mobile-settings")[0]; + this.status = el.getElementsByClassName("status")[0]; + } + + // Set color of status bar + setStatus (s) { + this.status.setAttribute("s", s); + } + + // Toggle showing the new game screen + toggleNewGame () { + if (this.newGame.style.display !== "none") + this.newGame.style.display = "none"; + else + this.newGame.style.display = "block"; + } + + // Toggle showing the mobile settings + toggleMobileSettings () { + if (this.mobileSettings.style.display !== "none") + this.mobileSettings.style.display = "none"; + else + this.mobileSettings.style.display = "block"; + } } -Lobby.prototype = { +// ############# +// # Game code # +// ############# + +// Game represents a single game in the lobby view. It has methods for setting up the elements and such. +class Game{ + constructor (name, packs, maxp, id) + { + } +} + +// ############## +// # Lobby Code # +// ############## + +// Lobby manages the players and games provided by the server and allows users to join or create their own games. +class Lobby { + constructor (el) + { + this.root = el; + + this.e = { + status: el.getElementsByClassName("status")[0], + addr: el.getElementsByClassName("addr")[0], + games: el.getElementsByClassName("games")[0], + settings: el.getElementsByClassName("settings")[0], + + stats: { + game: document.getElementById("game"), + packs: document.getElementById("packs"), + online: document.getElementById("online"), + ingame: document.getElementById("ingame"), + pubgame: document.getElementById("pubgame") + } + }; + + this.top = new TopBar(document.getElementsByClassName("topbar")[0]); + + this.init = false; + this.online = []; + this.games = []; + this.packs = []; + this.players = []; + } + // Set initial pack list // {data array} array of strings representing pack names - packList: function(data) { + packList (data) { this.packs = data; this.top.setPacks(this.packs) this.e.stats.packs.innerText = this.packs.length(); - }, + } // Set initial game list. // { data object } object containing {games} and {name} @@ -43,20 +97,20 @@ Lobby.prototype = { // { data.games[n].packs } list of the pack names used by this game // { data.games[n].id } room identifier (uuid) // { data.games[n].max } max players in room - gameList: function(data) { + gameList (data) { while (this.e.games.firstChild != null) { this.e.games.remove(this.elements.games.firstChild) } for (let i in data.games) { - let gel = new GameEl(i.name, i.packs, i.id); + let gel = new Game(i.name, i.packs, i.id); this.games.push(gel); this.e.games.appendChild(gel.getElement()); } this.e.stats.game.innerText = data.name; this.e.stats.pubgame.innerText = this.games.length(); - }, + } // Set the initial player list. // { data array } represents a list of player objects from the server @@ -64,26 +118,26 @@ Lobby.prototype = { // { data[n].game string } id of the game room (empty if not in game). // { data[n].color string } css color chosen by player. // { data[n].uuid string } uuid of the player - players: function(data) { + players (data) { this.e.stats.online.innerText = this.players.length(); this.init = true; - }, + } // Called when a new public game is created on the server // { data object } the game object // { data.name } room name // { data.packs } list of the pack names used by this game // { data.id } room identifier (uuid) - addGame: function(data) { + addGame (data) { - }, + } // Called when a new public game is removed on the server // { data string } the uuid of the game to delete - removeGame: function(data) { + removeGame (data) { - }, + } // Called when a new player enters the lobby. // { data object } an object representing the player @@ -91,56 +145,60 @@ Lobby.prototype = { // { data.game string } id of the game room (empty if not in game). // { data.color string } css color chosen by player. // { data.uuid string } uuid of the player - addPlayer: function(data) { + addPlayer (data) { - }, + } // Called when a player modifies their settings in the lobby. // { data object } new player settings // { data.name string } non null if the player has changed their name // { data.color string } non null if the player has changed their color // { data.uuid string } uuid of player changing their settings - modPlayer: function(data) { + modPlayer (data) { - }, + } // Called when a player moves between the lobby and a game, or between two games // { data object } new location // { data.player } uuid of player changing location // { data.loc } uuid of room player is moving to (empty if moving to lobby) - movePlayer: function(data) { + movePlayer (data) { - }, + } // Called when a player exits the game (from lobby or game) - // {data string } uuid of player - removePlayer: function(data) { + // { data string } uuid of player + removePlayer (data) { - }, + } // Called when the client wants to toggle the new game screen - newGame: function() { + newGame () { //if(this.init) return; this.top.toggleNewGame(); - }, + } // Called when the client wants to toggle the mobile settings screen - mobileSettings: function() { + mobileSettings () { //if(this.init) return; this.top.toggleMobileSettings(); - }, + } // Called when the WebSocket state has changed. - setState: function(text, s, server) { + setState (text, s, server) { this.e.status.setAttribute("s", s); if(this.e.status.innerText != "Error" || ( this.e.status.innerText == "Error" && text != "Closed")) this.e.status.innerText = text; this.e.addr.innerText = server; this.top.setStatus(s); - }, + } + + getState () { + return this.e.status.innerText.toLowerCase(); + } // Called when we are resetting the game. - reset: function() { + reset () { while (this.e.games.firstElementChild != null) { this.e.games.removeChild(this.e.games.firstElementChild) } @@ -148,50 +206,4 @@ Lobby.prototype = { this.setState("Connecting", "loading", this.e.addr.innerText); this.init = false; } -}; - -// ############### -// # TopBar Code # -// ############### - -// TopBar represents the bar at the top of the screen when client is in the lobby. - -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 = { - // Set color of status bar - setStatus: function(s) { - this.status.setAttribute("s", s); - }, - - // Toggle showing the new game screen - toggleNewGame: function() { - if (this.newGame.style.display !== "none") - this.newGame.style.display = "none"; - else - this.newGame.style.display = "block"; - }, - - // Toggle showing the mobile settings - toggleMobileSettings: function() { - if (this.mobileSettings.style.display !== "none") - this.mobileSettings.style.display = "none"; - else - this.mobileSettings.style.display = "block"; - } -}; - -// ############# -// # Game code # -// ############# - -// GameEl represents a single game in the lobby view. It has methods for setting up the elements and such. -function GameEl(name, packs, maxp, id) { - -}
\ No newline at end of file |