ducklet
b00f8a357c
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.
66 lines
2 KiB
HTML
66 lines
2 KiB
HTML
<meta charset="utf-8" />
|
|
<link rel="stylesheet" type="text/css" href="buzzer.css" />
|
|
<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 class="myname player-only"
|
|
>You:
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
id="username"
|
|
placeholder="Please put your name here ..."
|
|
/></label>
|
|
<h2>All Players</h2>
|
|
<ul class="players">
|
|
<!-- players (see template#player) will be inserted here -->
|
|
</ul>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</body>
|
|
|
|
<template id="player">
|
|
<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>
|