diff --git a/public/buzzer.html b/public/buzzer.html index 08052b6..3acea46 100644 --- a/public/buzzer.html +++ b/public/buzzer.html @@ -7,6 +7,7 @@

Admin

+
Monitor
diff --git a/public/monitor.css b/public/monitor.css index 77209ae..23d74cb 100644 --- a/public/monitor.css +++ b/public/monitor.css @@ -1,20 +1,24 @@ +:root { + --citrus: #c2d72f; + --bleue: #0093ff; + --marine: #20dfb2; + --main-bg-color: var(--marine); + --main-fg-color: var(--bleue); + --transparent: #0f0; +} body { font-family: "Arial Rounded MT Bold", sans-serif; background-color: black; margin: 0px auto; overflow: hidden; + color: black; } * { margin: 0; padding: 0; } -/* -# colors -citrus: c2d72f -bleue: 0093ff -*/ #info { - background-color: #c2d72f; + background-color: var(--main-bg-color); padding: 1em 0 0 1em; width: 1280px; height: 720px; @@ -30,31 +34,41 @@ bleue: 0093ff margin-top: 1.5em; } .box { - background-color: #0f0; + background-color: var(--transparent); height: 189px; outline: 0.3em solid grey; -moz-outline-radius: 1em; } .points { position: absolute; - top: 1em; - right: 1em; - background-color: #c2d72f; - width: 3em; - padding: 0.2em; + right: 0.2em; text-align: right; - border-radius: 0.5em; - box-shadow: 0 0 0.3em #c2d72f, 0 0 0.8em #c2d72f, 0 0 1em #c2d72f, 0 0 1.2em #c2d72f; + font-size: 36px; +} +.points.bg { + -webkit-text-stroke: 10px var(--main-bg-color); } .player.buzzing .box { - outline: 0.7em solid #0093ff; + outline: 0.7em solid var(--main-fg-color); +} +.subbox { + margin-top: 0.5em; + display: flex; + justify-content: space-between; } .name { - margin-top: 0.5em; text-align: center; letter-spacing: 0.3em; font-variant: small-caps; + flex-grow: 1; /*font-weight: bold;*/ } +.tokens { + width: 4em; + /* width: 4em should give enough space for 3 tokens, + if a user has more they'll be hidden. */ + height: 21px; /* 1 line height */ + overflow: hidden; +} /*1280 x 720*/ /*1920 x 1080*/ diff --git a/public/monitor.html b/public/monitor.html index 25eb39b..8b551b3 100644 --- a/public/monitor.html +++ b/public/monitor.html @@ -3,22 +3,20 @@
-
-
-36'000
-
-
Player 1
-
-
-
0
-
-
Player 2
-
-
-
900
-
-
Player 3
-
+
+ + diff --git a/public/monitor.js b/public/monitor.js index 1c9e311..afdb1c6 100644 --- a/public/monitor.js +++ b/public/monitor.js @@ -72,15 +72,19 @@ function redraw_clients(me, clients) { return } clear(player_list) + const player_tpl = q("template#player").content.firstElementChild for (const c of Object.values(clients)) { if (c.id === me.id) { continue } - const player = node("div", { data: { cid: c.id }, cls: "player" }) - node("div", { cls: "points", text: prettynum(c.points), appendTo: player }) - node("div", { cls: "box", appendTo: player }) - node("div", { cls: "name", text: c.name, appendTo: player }) - player_list.appendChild(player) + const player_el = node(player_tpl.cloneNode(true), { + data: { cid: c.id }, + appendTo: player_list, + }) + q(".name", player_el).textContent = c.name + q(".points.fg", player_el).textContent = prettynum(c.points) + q(".points.bg", player_el).textContent = prettynum(c.points) + q(".tokens", player_el).textContent = '🔴 '.repeat(c.tokens) } } @@ -135,6 +139,8 @@ function setup_ws() { const client = value.client clients[client.id] = client redraw_clients(me, clients) + } else if (type === "control") { + // ignore } else if (type === "session_key") { // ignore } else if (type === "error") { diff --git a/quiz/config.py b/quiz/config.py index 6692d49..e5b2451 100644 --- a/quiz/config.py +++ b/quiz/config.py @@ -2,7 +2,7 @@ import os max_clients_per_session = 10 max_sessions = 10 -client_timeout_s = 600 # Seconds before a client times out +client_timeout_s = 600 # Seconds before a client times out. session_timeout_s = 0 path_prefix = "/quiz/" ws_host = os.getenv("WS_HOST", "0.0.0.0")