summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--scripts/client.js10
-rw-r--r--scripts/gui/lobby.js22
-rw-r--r--styles/client/base.css19
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;
+}
+