ducklet/quiz
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
quiz/public/buzzer.html

66 lines
2 KiB
HTML
Raw Normal View History

init with crummy buzzer & docker setup so much boilerplate :O
2021-01-29 01:20:17 +01:00
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="buzzer.css" />
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<body class="player">
add user session reclaiming In its current state the implementation should allow a user to resume their session if the websocket connection is reset, for whatever reason. This could be expanded to allow session sharing (multiple agents logging in to the same client), or manual session resume via some sort of password (encode uid & key to some pass-phrase kinda thing, or QR code).
2021-01-31 00:19:35 +01:00
<div id="error">
Error:
<code></code>
</div>
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<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>
init with crummy buzzer & docker setup so much boilerplate :O
2021-01-29 01:20:17 +01:00
<div id="info">
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<label class="myname player-only"
init with crummy buzzer & docker setup so much boilerplate :O
2021-01-29 01:20:17 +01:00
>You:
<input
type="text"
name="username"
id="username"
placeholder="Please put your name here ..."
/></label>
<h2>All Players</h2>
show in the UI if a player is disconnected
2021-01-31 00:56:30 +01:00
<ul class="players">
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<!-- players (see template#player) will be inserted here -->
add user session reclaiming In its current state the implementation should allow a user to resume their session if the websocket connection is reset, for whatever reason. This could be expanded to allow session sharing (multiple agents logging in to the same client), or manual session resume via some sort of password (encode uid & key to some pass-phrase kinda thing, or QR code).
2021-01-31 00:19:35 +01:00
</ul>
init with crummy buzzer & docker setup so much boilerplate :O
2021-01-29 01:20:17 +01:00
</div>
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<div id="buzzbox" class="player-only">
init with crummy buzzer & docker setup so much boilerplate :O
2021-01-29 01:20:17 +01:00
<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>
add user session reclaiming In its current state the implementation should allow a user to resume their session if the websocket connection is reset, for whatever reason. This could be expanded to allow session sharing (multiple agents logging in to the same client), or manual session resume via some sort of password (encode uid & key to some pass-phrase kinda thing, or QR code).
2021-01-31 00:19:35 +01:00
<template id="player">
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<li class="player" data-cid="client ID">
<span class="name">player name</span>
<div class="admin-only">
add original version of old crummy monitor
2021-02-02 00:42:02 +01:00
(<span class="points">points</span> pts) (<span class="tokens">tokens</span> tks)
add support for setting points, tokens, and broadcasting control msgs 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.
2021-02-01 23:07:49 +01:00
<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>
add user session reclaiming In its current state the implementation should allow a user to resume their session if the websocket connection is reset, for whatever reason. This could be expanded to allow session sharing (multiple agents logging in to the same client), or manual session resume via some sort of password (encode uid & key to some pass-phrase kinda thing, or QR code).
2021-01-31 00:19:35 +01:00
</template>
init with crummy buzzer & docker setup so much boilerplate :O
2021-01-29 01:20:17 +01:00
<script type="module" src="./buzzer.js"></script>
Reference in a new issue Copy permalink