AverageMarcus/buzzers
1
0
Fork 0
Code Issues Pull Requests Releases Activity

🎙🏛 Checkpoint

Browse Source 
./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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
characters.json
View File

File diff suppressed because one or more lines are too long

3
room.js
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!`
})); }));
} }
}); });

2
views/audience.handlebars
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">

8
views/index.handlebars
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

2
views/join.handlebars
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">

21
views/room.handlebars
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>