🎙🏛 Checkpoint

./characters.json:530995/537876
./views/index.handlebars:530995/61
./views/audience.handlebars:530995/1
./views/join.handlebars:530995/3
./views/room.handlebars:530995/529
./room.js:530995/100
This commit is contained in:
Glitch (hello-express) 2020-04-09 16:25:42 +00:00
parent a3d92bc8f9
commit 932d0e41a7
6 changed files with 77 additions and 24 deletions

File diff suppressed because one or more lines are too long

View File

@ -54,7 +54,8 @@ function buzz(roomId, participant) {
if (p.ws && p.participantId !== participant.participantId) { if (p.ws && p.participantId !== participant.participantId) {
p.ws.send(JSON.stringify({ p.ws.send(JSON.stringify({
type: "buzz", type: "buzz",
participant: participant.participantName participant: participant.participantName,
msg: `<img src="${participant.character}"> ${participant.participantName} buzzed!`
})); }));
} }
}); });

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Buzzer</title> <title>Buzzers</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch"> <meta name="description" content="A cool thing made with Glitch">

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Buzzer</title> <title>Buzzers</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch"> <meta name="description" content="A cool thing made with Glitch">
@ -16,8 +16,12 @@
</header> </header>
<main> <main>
<h2>Oh hi,</h2> <h2>Oh hi!</h2>
<p>
Create or join a room
</p>
<form> <form>
<label> <label>
Room ID Room ID

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Buzzer</title> <title>Buzzers</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch"> <meta name="description" content="A cool thing made with Glitch">

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Buzzer</title> <title>Buzzers</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch"> <meta name="description" content="A cool thing made with Glitch">
@ -23,6 +23,10 @@
</button> </button>
</main> </main>
<div id="messageBox">
</div>
<script> <script>
let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`); let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`);
@ -39,19 +43,24 @@
socket.onmessage = function(event) { socket.onmessage = function(event) {
let msg = JSON.parse(event.data); let msg = JSON.parse(event.data);
if (msg.type === "buzz") { if (msg.type === "buzz") {
alert(`${msg.participant} buzzed`); showMessage(msg.msg);
} }
}; };
socket.onerror = function(error) {
alert(`[error] ${error.message}`);
};
document.getElementById('buzzer').addEventListener('touchstart', function() { document.getElementById('buzzer').addEventListener('touchstart', function() {
socket.send(JSON.stringify({ socket.send(JSON.stringify({
type: "buzz" type: "buzz"
})); }));
}); });
showMessage(msg) {
let mb = document.getElementById('messageBox');
mb.innerHTML = msg;
mb.classList.remove('hide');
setTimeout(() => {
mb.classList.add('hide');
}, 5000)
}
</script> </script>
</body> </body>
</html> </html>