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

add support for setting points, tokens, and broadcasting control msgs

Browse source 
Control messages are messages that are broadcast to all clients and have
no clearly defined content.  The idea is that this can be used to
control a monitor without having to keep adding support for specific
commands on the protocol layer.
This also changes some of the existing messages and adds another
ridiculous convenience layer to our HTML/JS templating: data-eval.
We should probably just bite the bullet and use some reactive framework.
This commit is contained in:
ducklet 2021-02-01 23:07:49 +01:00
parent f406627042
commit b00f8a357c
4 changed files with 242 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

43
public/buzzer.html
View file

@ -1,12 +1,24 @@
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="buzzer.css" />
<body>
<body class="player">
<div id="error">
Error:
<code></code>
</div>
<div id="points-admin" class="admin-only">
<h2>Admin</h2>
<div>
<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>
<button data-eval="named.points.valueAsNumber *= -1">+/-</button>
</div>
<div>
<label>tokens: <input type="number" name="tokens" value="0" /></label>
</div>
</div>
<div id="info">
<label
<label class="myname player-only"
>You:
<input
type="text"
@ -16,10 +28,10 @@
/></label>
<h2>All Players</h2>
<ul class="players">
<!-- players will be inserted here -->
<!-- players (see template#player) will be inserted here -->
</ul>
</div>
<div id="buzzbox">
<div id="buzzbox" class="player-only">
<p id="active">BZZZZZ!</p>
<p id="ready">Press <strong id="bkey">{key.name}</strong> to activate buzzer.</p>
<p id="inactive">Please focus the window to allow the buzzer to work.</p>
@ -27,7 +39,28 @@
</body>
<template id="player">
<li class="player" data-cid="client ID">player name</li>
<li class="player" data-cid="client ID">
<span class="name">player name</span>
<div class="admin-only">
(<span class="points">points</span> pts)
(<span class="tokens">tokens</span> tks)
<button data-eval="send('control', {target: client.id, action: 'monitor'})">
monitor
</button>
<button
data-eval="client.points += named.points.valueAsNumber;
send('points', {id: client.id, points: client.points})"
>
add points
</button>
<button
data-eval="client.tokens += named.tokens.valueAsNumber;
send('tokens', {id: client.id, tokens: client.tokens})"
>
add tokens
</button>
</div>
</li>
</template>
<script type="module" src="./buzzer.js"></script>