add support for tokens in monitor
This commit is contained in:
parent
ab7f6014a4
commit
f900542765
5 changed files with 56 additions and 37 deletions
|
|
@ -7,6 +7,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="points-admin" class="admin-only">
|
<div id="points-admin" class="admin-only">
|
||||||
<h2>Admin</h2>
|
<h2>Admin</h2>
|
||||||
|
<div><a href="monitor.html">Monitor</a></div>
|
||||||
<div>
|
<div>
|
||||||
<label>points: <input type="number" name="points" value="0" /></label>
|
<label>points: <input type="number" name="points" value="0" /></label>
|
||||||
<button data-eval="named.points.valueAsNumber += 100">+ 100</button>
|
<button data-eval="named.points.valueAsNumber += 100">+ 100</button>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,24 @@
|
||||||
|
:root {
|
||||||
|
--citrus: #c2d72f;
|
||||||
|
--bleue: #0093ff;
|
||||||
|
--marine: #20dfb2;
|
||||||
|
--main-bg-color: var(--marine);
|
||||||
|
--main-fg-color: var(--bleue);
|
||||||
|
--transparent: #0f0;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: "Arial Rounded MT Bold", sans-serif;
|
font-family: "Arial Rounded MT Bold", sans-serif;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
# colors
|
|
||||||
citrus: c2d72f
|
|
||||||
bleue: 0093ff
|
|
||||||
*/
|
|
||||||
#info {
|
#info {
|
||||||
background-color: #c2d72f;
|
background-color: var(--main-bg-color);
|
||||||
padding: 1em 0 0 1em;
|
padding: 1em 0 0 1em;
|
||||||
width: 1280px;
|
width: 1280px;
|
||||||
height: 720px;
|
height: 720px;
|
||||||
|
|
@ -30,31 +34,41 @@ bleue: 0093ff
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
background-color: #0f0;
|
background-color: var(--transparent);
|
||||||
height: 189px;
|
height: 189px;
|
||||||
outline: 0.3em solid grey;
|
outline: 0.3em solid grey;
|
||||||
-moz-outline-radius: 1em;
|
-moz-outline-radius: 1em;
|
||||||
}
|
}
|
||||||
.points {
|
.points {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1em;
|
right: 0.2em;
|
||||||
right: 1em;
|
|
||||||
background-color: #c2d72f;
|
|
||||||
width: 3em;
|
|
||||||
padding: 0.2em;
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
border-radius: 0.5em;
|
font-size: 36px;
|
||||||
box-shadow: 0 0 0.3em #c2d72f, 0 0 0.8em #c2d72f, 0 0 1em #c2d72f, 0 0 1.2em #c2d72f;
|
}
|
||||||
|
.points.bg {
|
||||||
|
-webkit-text-stroke: 10px var(--main-bg-color);
|
||||||
}
|
}
|
||||||
.player.buzzing .box {
|
.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 {
|
.name {
|
||||||
margin-top: 0.5em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 0.3em;
|
letter-spacing: 0.3em;
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
|
flex-grow: 1;
|
||||||
/*font-weight: bold;*/
|
/*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*/
|
/*1280 x 720*/
|
||||||
/*1920 x 1080*/
|
/*1920 x 1080*/
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,20 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="info">
|
<div id="info">
|
||||||
<div class="player">
|
<!-- players (see template#player) will be inserted here -->
|
||||||
<div class="points">-36'000</div>
|
|
||||||
<div class="box"></div>
|
|
||||||
<div class="name">Player 1</div>
|
|
||||||
</div>
|
|
||||||
<div class="player buzzing">
|
|
||||||
<div class="points">0</div>
|
|
||||||
<div class="box"></div>
|
|
||||||
<div class="name">Player 2</div>
|
|
||||||
</div>
|
|
||||||
<div class="player">
|
|
||||||
<div class="points">900</div>
|
|
||||||
<div class="box"></div>
|
|
||||||
<div class="name">Player 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
<template id="player">
|
||||||
|
<div class="player">
|
||||||
|
<div class="points bg">score background</div>
|
||||||
|
<div class="points fg">the player's score</div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="subbox">
|
||||||
|
<div class="name">the player's name</div>
|
||||||
|
<div class="tokens">tokens</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script type="module" src="./monitor.js"></script>
|
<script type="module" src="./monitor.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -72,15 +72,19 @@ function redraw_clients(me, clients) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
clear(player_list)
|
clear(player_list)
|
||||||
|
const player_tpl = q("template#player").content.firstElementChild
|
||||||
for (const c of Object.values(clients)) {
|
for (const c of Object.values(clients)) {
|
||||||
if (c.id === me.id) {
|
if (c.id === me.id) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
const player = node("div", { data: { cid: c.id }, cls: "player" })
|
const player_el = node(player_tpl.cloneNode(true), {
|
||||||
node("div", { cls: "points", text: prettynum(c.points), appendTo: player })
|
data: { cid: c.id },
|
||||||
node("div", { cls: "box", appendTo: player })
|
appendTo: player_list,
|
||||||
node("div", { cls: "name", text: c.name, appendTo: player })
|
})
|
||||||
player_list.appendChild(player)
|
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
|
const client = value.client
|
||||||
clients[client.id] = client
|
clients[client.id] = client
|
||||||
redraw_clients(me, clients)
|
redraw_clients(me, clients)
|
||||||
|
} else if (type === "control") {
|
||||||
|
// ignore
|
||||||
} else if (type === "session_key") {
|
} else if (type === "session_key") {
|
||||||
// ignore
|
// ignore
|
||||||
} else if (type === "error") {
|
} else if (type === "error") {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import os
|
||||||
|
|
||||||
max_clients_per_session = 10
|
max_clients_per_session = 10
|
||||||
max_sessions = 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
|
session_timeout_s = 0
|
||||||
path_prefix = "/quiz/"
|
path_prefix = "/quiz/"
|
||||||
ws_host = os.getenv("WS_HOST", "0.0.0.0")
|
ws_host = os.getenv("WS_HOST", "0.0.0.0")
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue