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

Better handling of room creation and management

Browse Source
This commit is contained in:
Marcus Noble
2020-11-27 18:29:18 +00:00
parent 5716a9338a
commit aad99975c6
11 changed files with 2898 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
views/audience.handlebars
View File

@@ -14,22 +14,32 @@
</header>
<main>
<p>
Share this link for players to join:<br>
<a id="playerRoom" href=""></a>
</p>
<button id="resetBuzzers">Reset</button>
<h2>Participants</h2>
<div id="participants"></div>
</main>
<script>
let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}/audience`);
document.getElementById("playerRoom").href = window.location;
document.getElementById("playerRoom").innerText = window.location;
let proto = location.protocol == 'http:' ? 'ws' : 'wss'
let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}/audience`);
let buzzed;
socket.onmessage = function(event) {
let msg = JSON.parse(event.data);
if (msg.type === "buzz") {
beep();
let buzzed = document.getElementById(`p-${msg.participant.participantId}`);
buzzed = document.getElementById(`p-${msg.participant.participantId}`);
buzzed.classList.add('buzzed');
setTimeout(() => buzzed.classList.remove('buzzed'), 5000)
} else if (msg.type === "participants") {
let participantContainer = document.getElementById('participants');
let contents = '';
@@ -44,10 +54,17 @@
participantContainer.innerHTML = contents;
}
};
function beep() {
window.navigator.vibrate(500);
}
document.getElementById('resetBuzzers').addEventListener('click', function() {
socket.send(JSON.stringify({
type: "reset"
}));
buzzed.classList.remove('buzzed');
})
</script>
</body>
</html>

11
views/index.handlebars
View File

@@ -14,12 +14,8 @@
</header>
<main>
<h2>Oh hi!</h2>
<h2>Create or join a room</h2>
<p>
Create or join a room
</p>
<form>
<label>
Room ID
@@ -28,13 +24,12 @@
<button type="submit" id="submit-name">Submit</button>
</form>
</main>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
let roomId = document.getElementById('roomId').value;
window.location = `//${window.location.host}/${roomId}/join`;
window.location = `//${window.location.host}/${roomId}`;
});
</script>
</body>

10
views/join.handlebars
View File

@@ -10,13 +10,11 @@
</head>
<body>
<header>
<h1>Join {{room}}</h1>
<h1>Join '{{room}}'</h1>
</header>
<main>
<h2>Oh hi,</h2>
<p>Tell me your (team) name:</p>
<h2>Please tell me your (team) name:</h2>
<form method="POST">
<label>
@@ -25,10 +23,6 @@
</label>
<button type="submit" id="submit-name">Submit</button>
</form>
<p>
<a href="/{{room}}/audience">Join the audience</a>
</p>
</main>
</body>
</html>

53
views/room.handlebars
View File

@@ -14,19 +14,20 @@
</header>
<main>
<h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
<h2>{{name}} <img src="{{character}}"/></h2>
<button id="buzzer">
BUZZ
</button>
</main>
<div id="messageBox" class="hide">
</div>
<script>
let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`);
let proto = location.protocol == 'http:' ? 'ws' : 'wss'
let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}`);
socket.onopen = function(e) {
socket.send(JSON.stringify({
@@ -42,35 +43,51 @@
let msg = JSON.parse(event.data);
if (msg.type === "buzz") {
showMessage(msg.msg);
} else if (msg.type === "reset") {
reset();
} else if (msg.type === "close") {
roomClosed();
}
};
document.getElementById('buzzer').addEventListener('touchstart', function() {
beep();
socket.send(JSON.stringify({
type: "buzz"
socket.send(JSON.stringify({
type: "buzz"
}));
document.getElementById('buzzer').classList.add('active');
});
document.getElementById('buzzer').addEventListener('mousedown', function() {
beep();
socket.send(JSON.stringify({
type: "buzz"
socket.send(JSON.stringify({
type: "buzz"
}));
document.getElementById('buzzer').classList.add('active');
});
function showMessage(msg) {
window.navigator.vibrate(500);
document.getElementById('buzzer').disabled = true;
let mb = document.getElementById('messageBox');
mb.innerHTML = msg;
mb.classList.remove('hide');
setTimeout(() => {
document.getElementById('buzzer').disabled = false;
mb.classList.add('hide');
}, 5000)
}
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');
}
function beep() {
window.navigator.vibrate(500);
}