diff options
| -rw-r--r-- | scripts/client.js | 10 | ||||
| -rw-r--r-- | scripts/gui/lobby.js | 22 | ||||
| -rw-r--r-- | styles/client/base.css | 19 |
3 files changed, 45 insertions, 6 deletions
diff --git a/scripts/client.js b/scripts/client.js index acb3d90..46acf6a 100644 --- a/scripts/client.js +++ b/scripts/client.js @@ -125,4 +125,14 @@ class Client{ this.socket.init(); } + + joinGame(id) + { + this.table.openTable(); + } + + leaveGame() + { + + } } diff --git a/scripts/gui/lobby.js b/scripts/gui/lobby.js index 7d2b6cd..5939697 100644 --- a/scripts/gui/lobby.js +++ b/scripts/gui/lobby.js @@ -41,10 +41,22 @@ class TopBar{ // ############# // 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) - { - } +function createGameEl (options = {id: 0, name: ""}, el) +{ + let e = document.createElement("div"); + e.className = "game"; + + let title = document.createElement("h2"); + title.textContent = options.name; + e.appendChild(title); + + let join = document.createElement("button"); + join.className = "join"; + join.textContent = "Join"; + join.addEventListener("click", game.joinGame.bind(game, options.id)); + e.appendChild(join); + + el.appendChild(e); } // ############## @@ -130,7 +142,7 @@ class Lobby { // { data.packs } list of the pack names used by this game // { data.id } room identifier (uuid) addGame (data) { - + createGameEl(data, this.e.games); } // Called when a new public game is removed on the server diff --git a/styles/client/base.css b/styles/client/base.css index 889d7bf..e0b19d3 100644 --- a/styles/client/base.css +++ b/styles/client/base.css @@ -144,6 +144,9 @@ div.game { margin-bottom: 10px; padding: 5px; + display: block; + position: relative; + text-align: left; } @@ -326,4 +329,18 @@ div.chat-input > button { div.chat-text > div { word-wrap: break-word; word-break: break-all; -}
\ No newline at end of file +} + +/* Game card element */ + +div.game > h2 { + margin: 0; +} + +button.join { + position: absolute; + + bottom: 5px; + right: 5px; +} + |