2020-04-09 10:19:11 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2020-04-09 16:25:42 +00:00
|
|
|
<title>Buzzers</title>
|
2020-04-09 10:19:11 +00:00
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2020-04-10 08:22:50 +00:00
|
|
|
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAADuUlEQVRoge2YW2hcVRSGv31ym2YyoraasanFEWtaQW0StAYRB2JRFAKCpm1C6c0bSCg++dKHWH32QX0Sq7QkLZlSxcubUGpS0Je0RtJipZnElIIWhlDmkrn1LB9mjMnkzLnMnDO2MN/LMGuvtde/zl57nz0DderUuaNRbk0ku0JPguoD9QxIJ/Ag0FYcTgALoP5Ayc+InFXjc9Nu5K2qAOnvDODLvoXSDoFscxh+GTiGvu5zdfpSolINFRUg4XAjwYVhhCPAvZUmLyiQGKI+4u/Nn6lz5/KOw50GyJ6HtqJrp4DtTmMtZr6Izh51eu6KkyhHBcjuUD+ixvivt1fzaDfseAm2dMGGjdB2N0RnYGSX3RRxRIZUZO57uwGNdh1ld2gvor40jXn/GPjvsjulEQGU+loGQgdUZG7UToCtFSg++TOUiu/pg3wOpicK35/th/s2wew0XL8KiZuQTTsroUAeeFWNR3+wcrQsQAYf3sItpoDAsrGhAfaPwM5BSMXhoMvboUACTX9KnZr/3cxJMxuUcLiRW0QoFX/404L4bBq++sAduWtpQ9fGJBw2bXPTAgguDFN62uwfgadfhORNODoIk99UK9SMbtoX3jVzKNtCsrfdT9Y/D2xYNva+Aoc/KTz5o0Nw9VfXlJZXKDFSzSH13ZW40XD5Fci0vsNK8QD7jhQ+j39YG/EAotazLvdmueHy/VW4Hqy2nf8WtAY4O+6aPpscAj42GjBsoeLFrEaP2C7qcTU+O1NqNW4h4QXP9ThG+oysxgUobYenWipCeo2sZTaxbPVSSmWoTiNrmRWQjZ5qqYxNRsYye0AFDO3/L4aa7F3mzvAAOvNAs5uKTMghhNQA160cza8S/6LzNrUTD9CEouzLayXWt9EIzSj+BIJVy3LGDfxsVi+TMXOyXgGNAWovHuB+krxm5WRdgDDsipzKeM/Kwfgqcbn0EnR7oB5bq9feJr6Nsf2j3gkXoh1EfnmC2b/WA/BIMMbrvb/RHbI8FR3jeguNTnRxYqLHcGzf81MMPXex0qm9b6GpaAcnJnoQIJNKkFiMEV+MkU4lEeD4Tz1ciHa4mdLdAkYnuwHIpJJklpbQdR3RdbJLKTKpZNGny82U7hSQzjUyNtnFpWvtAOQza/8LyqULtplrQU6e304m7872M9wDOwffqOoYjS/GEF1fnUhrIHBPdf8D/3jyi9oco00tPgNbixepvDlGW1r9AOSKrdTU4lu2uY0nBSjA1+rH55Holdzxb+J6AXXq1KlTFf8AtEULoLOzQvEAAAAASUVORK5CYII=">
|
2020-04-09 10:19:11 +00:00
|
|
|
<link rel="stylesheet" href="/style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
2020-04-09 10:30:15 +00:00
|
|
|
<h1>{{room}}</h1>
|
2020-04-09 10:19:11 +00:00
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main>
|
2020-11-27 19:13:27 +00:00
|
|
|
<h2>{{name}} <img src="{{character}}"/> <div class="score">0</div></h2>
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 10:30:15 +00:00
|
|
|
<button id="buzzer">
|
|
|
|
|
BUZZ
|
|
|
|
|
</button>
|
2020-04-09 10:19:11 +00:00
|
|
|
</main>
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 16:37:47 +00:00
|
|
|
<div id="messageBox" class="hide">
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 16:25:42 +00:00
|
|
|
</div>
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 11:04:28 +00:00
|
|
|
<script>
|
2020-11-27 18:29:18 +00:00
|
|
|
let proto = location.protocol == 'http:' ? 'ws' : 'wss'
|
|
|
|
|
let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}`);
|
2020-04-09 11:04:28 +00:00
|
|
|
|
2020-04-09 11:28:30 +00:00
|
|
|
socket.onopen = function(e) {
|
|
|
|
|
socket.send(JSON.stringify({
|
|
|
|
|
type: "join",
|
|
|
|
|
data: {
|
|
|
|
|
participantId: '{{participantId}}',
|
|
|
|
|
participantName: '{{participantName}}',
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
};
|
2020-04-09 11:04:28 +00:00
|
|
|
|
2020-04-09 15:38:44 +00:00
|
|
|
socket.onmessage = function(event) {
|
|
|
|
|
let msg = JSON.parse(event.data);
|
2020-04-09 15:26:47 +00:00
|
|
|
if (msg.type === "buzz") {
|
2020-04-09 16:25:42 +00:00
|
|
|
showMessage(msg.msg);
|
2020-11-27 18:29:18 +00:00
|
|
|
} else if (msg.type === "reset") {
|
|
|
|
|
reset();
|
|
|
|
|
} else if (msg.type === "close") {
|
|
|
|
|
roomClosed();
|
2020-11-27 19:13:27 +00:00
|
|
|
} else if (msg.type === "score") {
|
|
|
|
|
document.querySelector('.score').innerText = msg.score;
|
2020-04-09 15:26:47 +00:00
|
|
|
}
|
2020-04-09 11:28:30 +00:00
|
|
|
};
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 15:49:52 +00:00
|
|
|
document.getElementById('buzzer').addEventListener('touchstart', function() {
|
2020-04-09 17:01:46 +00:00
|
|
|
beep();
|
2020-11-27 18:29:18 +00:00
|
|
|
socket.send(JSON.stringify({
|
|
|
|
|
type: "buzz"
|
2020-04-09 11:40:21 +00:00
|
|
|
}));
|
2020-11-27 18:29:18 +00:00
|
|
|
document.getElementById('buzzer').classList.add('active');
|
2020-04-09 11:28:30 +00:00
|
|
|
});
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 16:49:47 +00:00
|
|
|
document.getElementById('buzzer').addEventListener('mousedown', function() {
|
2020-04-09 17:01:46 +00:00
|
|
|
beep();
|
2020-11-27 18:29:18 +00:00
|
|
|
socket.send(JSON.stringify({
|
|
|
|
|
type: "buzz"
|
2020-04-09 16:49:47 +00:00
|
|
|
}));
|
2020-11-27 18:29:18 +00:00
|
|
|
document.getElementById('buzzer').classList.add('active');
|
2020-04-09 16:49:47 +00:00
|
|
|
});
|
2020-11-27 18:29:18 +00:00
|
|
|
|
2020-04-09 16:37:47 +00:00
|
|
|
function showMessage(msg) {
|
2020-04-10 08:11:41 +00:00
|
|
|
window.navigator.vibrate(500);
|
2020-04-09 16:49:47 +00:00
|
|
|
document.getElementById('buzzer').disabled = true;
|
2020-04-09 16:25:42 +00:00
|
|
|
let mb = document.getElementById('messageBox');
|
|
|
|
|
mb.innerHTML = msg;
|
|
|
|
|
mb.classList.remove('hide');
|
|
|
|
|
}
|
2020-11-27 18:29:18 +00:00
|
|
|
|
|
|
|
|
function reset() {
|
|
|
|
|
document.getElementById('buzzer').disabled = false;
|
|
|
|
|
document.getElementById('buzzer').classList.remove('active');
|
|
|
|
|
let mb = document.getElementById('messageBox');
|
|
|
|
|
mb.classList.add('hide');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function roomClosed() {
|
|
|
|
|
document.getElementById('buzzer').disabled = true;
|
|
|
|
|
let mb = document.getElementById('messageBox');
|
|
|
|
|
mb.innerHTML = "Room closed";
|
|
|
|
|
mb.classList.remove('hide');
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-09 17:01:46 +00:00
|
|
|
function beep() {
|
2020-04-10 08:11:41 +00:00
|
|
|
window.navigator.vibrate(500);
|
2020-04-09 17:01:46 +00:00
|
|
|
}
|
2020-04-09 11:04:28 +00:00
|
|
|
</script>
|
2020-04-09 10:19:11 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
