2021-01-29 01:20:17 +01:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="buzzer.css" />
|
2021-02-01 23:07:49 +01:00
|
|
|
<body class="player">
|
2021-01-31 00:19:35 +01:00
|
|
|
<div id="error">
|
|
|
|
|
Error:
|
|
|
|
|
<code></code>
|
|
|
|
|
</div>
|
2021-02-01 23:07:49 +01:00
|
|
|
<div id="points-admin" class="admin-only">
|
|
|
|
|
<h2>Admin</h2>
|
2021-02-04 00:04:03 +01:00
|
|
|
<div><a href="monitor.html" onclick="this.href='monitor.html'+location.hash">Monitor</a></div>
|
2021-02-01 23:07:49 +01:00
|
|
|
<div>
|
|
|
|
|
<label>points: <input type="number" name="points" value="0" /></label>
|
2021-02-24 23:52:33 +01:00
|
|
|
<button data-onclick="named.points.valueAsNumber += 100">+ 100</button>
|
|
|
|
|
<button data-onclick="named.points.valueAsNumber -= 100">- 100</button>
|
|
|
|
|
<button data-onclick="named.points.valueAsNumber *= -1">+/-</button>
|
2021-02-01 23:07:49 +01:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label>tokens: <input type="number" name="tokens" value="0" /></label>
|
|
|
|
|
</div>
|
2021-02-04 00:04:03 +01:00
|
|
|
<div>
|
2021-02-24 23:52:33 +01:00
|
|
|
<label>monitored:
|
|
|
|
|
<input type="text" name="monitored1" value="" />
|
|
|
|
|
<input type="text" name="monitored2" value="" />
|
|
|
|
|
<input type="text" name="monitored3" value="" />
|
|
|
|
|
</label>
|
|
|
|
|
<button data-onclick="conn.send('control', {targets: [
|
|
|
|
|
named.monitored1.value,
|
|
|
|
|
named.monitored2.value,
|
|
|
|
|
named.monitored3.value,
|
|
|
|
|
], action: 'monitor'})">resubmit</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label>text overlay:
|
|
|
|
|
<textarea name="textbox" data-onselect="
|
|
|
|
|
const text = target.value.substring(
|
|
|
|
|
target.selectionStart,
|
|
|
|
|
target.selectionEnd
|
|
|
|
|
) || ''
|
|
|
|
|
conn.send('control', {action: 'text', text})
|
|
|
|
|
" data-onchange="
|
|
|
|
|
if (!target.value.length) {
|
|
|
|
|
conn.send('control', {action: 'text', text: ''})
|
|
|
|
|
}
|
|
|
|
|
"></textarea>
|
|
|
|
|
</label>
|
2021-02-04 00:04:03 +01:00
|
|
|
</div>
|
2021-02-01 23:07:49 +01:00
|
|
|
</div>
|
2021-01-29 01:20:17 +01:00
|
|
|
<div id="info">
|
2021-02-01 23:07:49 +01:00
|
|
|
<label class="myname player-only"
|
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>
|
2021-01-31 00:56:30 +01:00
|
|
|
<ul class="players">
|
2021-02-01 23:07:49 +01:00
|
|
|
<!-- players (see template#player) will be inserted here -->
|
2021-01-31 00:19:35 +01:00
|
|
|
</ul>
|
2021-01-29 01:20:17 +01:00
|
|
|
</div>
|
2021-02-01 23:07:49 +01:00
|
|
|
<div id="buzzbox" class="player-only">
|
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>
|
|
|
|
|
|
2021-01-31 00:19:35 +01:00
|
|
|
<template id="player">
|
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">
|
2021-02-02 00:42:02 +01:00
|
|
|
(<span class="points">points</span> pts) (<span class="tokens">tokens</span> tks)
|
2021-02-24 23:52:33 +01:00
|
|
|
<button data-onclick="(!named.monitored1.value.length ? named.monitored1 :
|
|
|
|
|
(!named.monitored2.value.length ? named.monitored2 :
|
|
|
|
|
named.monitored3)).value = client.id;
|
|
|
|
|
let monitored = [
|
|
|
|
|
named.monitored1.value,
|
|
|
|
|
named.monitored2.value,
|
|
|
|
|
named.monitored3.value,
|
|
|
|
|
];
|
2021-02-04 00:04:03 +01:00
|
|
|
conn.send('control', {targets: monitored, action: 'monitor'})">
|
2021-02-01 23:07:49 +01:00
|
|
|
monitor
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
2021-02-24 23:52:33 +01:00
|
|
|
data-onclick="client.points += named.points.valueAsNumber;
|
2021-02-02 21:41:22 +01:00
|
|
|
conn.send('points', {id: client.id, points: client.points})"
|
2021-02-01 23:07:49 +01:00
|
|
|
>
|
|
|
|
|
add points
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
2021-02-24 23:52:33 +01:00
|
|
|
data-onclick="client.tokens += named.tokens.valueAsNumber;
|
2021-02-02 21:41:22 +01:00
|
|
|
conn.send('tokens', {id: client.id, tokens: client.tokens})"
|
2021-02-01 23:07:49 +01:00
|
|
|
>
|
|
|
|
|
add tokens
|
|
|
|
|
</button>
|
2021-02-25 22:54:56 +01:00
|
|
|
<select name="sound" data-onchange="
|
|
|
|
|
conn.send('control', {action: 'sound', client_id: client.id, sound: target.value})
|
|
|
|
|
">
|
|
|
|
|
<option value="">-</option>
|
|
|
|
|
<option value="bark">bark</option>
|
|
|
|
|
<option value="chirp">chirp</option>
|
|
|
|
|
<option value="meow">meow</option>
|
|
|
|
|
<option value="moo">moo</option>
|
|
|
|
|
<option value="quack">quack</option>
|
|
|
|
|
<option value="ribbit">ribbit</option>
|
|
|
|
|
</select>
|
2021-02-01 23:07:49 +01:00
|
|
|
</div>
|
|
|
|
|
</li>
|
2021-01-31 00:19:35 +01:00
|
|
|
</template>
|
|
|
|
|
|
2021-01-29 01:20:17 +01:00
|
|
|
<script type="module" src="./buzzer.js"></script>
|
