Start join game implementation

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;
+}
+