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

lint

Browse source
This commit is contained in:
ducklet 2021-03-02 20:06:03 +01:00
parent e197c2364f
commit a4b0297c3f
3 changed files with 92 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

54
public/buzzer.html
View file

@ -8,7 +8,11 @@
<div id="points-admin" class="admin-only">
<h2>Admin</h2>
<div><a href="monitor.html" onclick="this.href='monitor.html'+location.hash">Monitor</a></div>
<div>
<a href="monitor.html" onclick="this.href='monitor.html'+location.hash"
>Monitor</a
>
</div>
<div>
<label>points: <input type="number" name="points" value="0" /></label>
<button data-onclick="named.points.valueAsNumber += 100">+ 100</button>
@ -19,30 +23,42 @@
<label>tokens: <input type="number" name="tokens" value="0" /></label>
</div>
<div>
<label>monitored:
<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: [
<button
data-onclick="conn.send('control', {targets: [
named.monitored1.value,
named.monitored2.value,
named.monitored3.value,
], action: 'monitor'})">resubmit</button>
], action: 'monitor'})"
>
resubmit
</button>
</div>
<div>
<label>text overlay:
<textarea name="textbox" data-onselect="
<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="
"
data-onchange="
if (!target.value.length) {
conn.send('control', {action: 'text', text: ''})
}
"></textarea>
"
></textarea>
</label>
</div>
</label>
</div>
</div>
@ -56,10 +72,15 @@
id="username"
placeholder="Please put your name here ..."
data-onchange="q('#set-name').disabled = false"
/><button id="set-name" data-onclick="
/><button
id="set-name"
data-onclick="
set_name(named.username.value)
target.disabled = true
">set name</button>
"
>
set name
</button>
</label>
</div>
@ -85,7 +106,8 @@
<span class="name">player name</span>
<div class="admin-only">
(<span class="points">points</span> pts) (<span class="tokens">tokens</span> tks)
<button data-onclick="(!named.monitored1.value.length ? named.monitored1 :
<button
data-onclick="(!named.monitored1.value.length ? named.monitored1 :
(!named.monitored2.value.length ? named.monitored2 :
named.monitored3)).value = client.id;
let monitored = [
@ -93,7 +115,8 @@
named.monitored2.value,
named.monitored3.value,
];
conn.send('control', {targets: monitored, action: 'monitor'})">
conn.send('control', {targets: monitored, action: 'monitor'})"
>
monitor
</button>
<button
@ -108,9 +131,12 @@
>
add tokens
</button>
<select name="sound" data-onchange="
<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>

40
public/index.html
View file

@ -1,18 +1,34 @@
<meta charset="utf-8" />
<style type="text/css">
@import "shared.css";
@import "shared.css";
h1 {
font-family: "Galada Regular";
font-size: 28em;
text-align: center;
margin: 0;
}
h1 {
font-family: "Galada Regular";
font-size: 28em;
text-align: center;
margin: 0;
}
a { font-family: inherit; color: inherit; text-decoration: inherit; }
a:link { color: inherit; text-decoration: inherit; }
a:visited { color: inherit; text-decoration: inherit; }
a:hover { color: inherit; text-decoration: inherit; }
a:active { color: inherit; text-decoration: inherit; }
a {
font-family: inherit;
color: inherit;
text-decoration: inherit;
}
a:link {
color: inherit;
text-decoration: inherit;
}
a:visited {
color: inherit;
text-decoration: inherit;
}
a:hover {
color: inherit;
text-decoration: inherit;
}
a:active {
color: inherit;
text-decoration: inherit;
}
</style>
<h1>Qu<a href="buzzer.html">i</a>z</h1>

41
public/monitor.js
View file

@ -59,7 +59,7 @@ function _redraw_clients(clients, monitored) {
const player_tpl = q("template#player").content.firstElementChild
for (const cid of monitored) {
const c = clients[cid] ?? {id: cid, name:'', points:0, tokens:0}
const c = clients[cid] ?? { id: cid, name: "", points: 0, tokens: 0 }
let player_el = q(`.player[data-cid='${c.id}']`)
if (player_el) {
// Ensure the element is at the correct position.
@ -129,7 +129,7 @@ function setup_ws() {
monitored = [],
sounds = {}
const sid = session_id()
const overlay = q('#text-overlay')
const overlay = q("#text-overlay")
conn = new Connection()
conn.on("helo", () => {
conn.send("name", "Monitor")
@ -154,22 +154,29 @@ function setup_ws() {
clients[client.id] = client
redraw_clients(clients, monitored)
})
conn.on("control", ({ value: {payload: {action, ...args}} }) => {
if (action === 'monitor' && Array.isArray(args.targets)) {
monitored = args.targets
redraw_clients(clients, monitored)
} else if (action === 'text' && args.text !== undefined) {
if (args.text.length) {
overlay.textContent = args.text
overlay.classList.remove('hidden')
} else {
overlay.classList.add('hidden')
conn.on(
"control",
({
value: {
payload: { action, ...args },
},
}) => {
if (action === "monitor" && Array.isArray(args.targets)) {
monitored = args.targets
redraw_clients(clients, monitored)
} else if (action === "text" && args.text !== undefined) {
if (args.text.length) {
overlay.textContent = args.text
overlay.classList.remove("hidden")
} else {
overlay.classList.add("hidden")
}
} else if (action === "sound" && args.sound) {
const { client_id, sound } = args
sounds[client_id] = new Audio(`sounds/${sound}.mp3`)
}
} else if (action === 'sound' && args.sound) {
const { client_id, sound } = args
sounds[client_id] = new Audio(`sounds/${sound}.mp3`)
}
})
},
)
conn.connect(session_url(sid))
}