ducklet/quiz
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add support for tokens in monitor

Browse source
This commit is contained in:
ducklet 2021-02-02 19:56:48 +01:00
parent ab7f6014a4
commit f900542765
5 changed files with 56 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/buzzer.html
View file

@ -7,6 +7,7 @@
</div>
<div id="points-admin" class="admin-only">
<h2>Admin</h2>
<div><a href="monitor.html">Monitor</a></div>
<div>
<label>points: <input type="number" name="points" value="0" /></label>
<button data-eval="named.points.valueAsNumber += 100">+ 100</button>

46
public/monitor.css
View file

@ -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*/

28
public/monitor.html
View file

@ -3,22 +3,20 @@
<body>
<div id="info">
<div class="player">
<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>
<!-- players (see template#player) will be inserted here -->
</div>
</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>

16
public/monitor.js
View file

@ -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") {