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

Compare commits

base: AverageMarcus:623b53d5425a487908f5a887d7283e6aa9fcc0f1
Branches Tags
AverageMarcus:master
..
compare: AverageMarcus:5716a9338a8de145e949f46493b9b8370430edf8
Branches Tags
AverageMarcus:master

No commits in common. "623b53d5425a487908f5a887d7283e6aa9fcc0f1" and "5716a9338a8de145e949f46493b9b8370430edf8" have entirely different histories.
623b53d542 ... 5716a9338a

11 changed files with 105 additions and 2937 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

@ -16,4 +16,4 @@
"engines": {
"node": "12.x"
}
}
}

1
public/build/bundle.css
View File

@ -1 +0,0 @@
main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}

2726
public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

1
public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

38
public/style.css
View File

@ -10,6 +10,7 @@ body {
}
h1 {
font-style: italic;
color: #373fff;
line-height: 1.1;
}
@ -21,30 +22,22 @@ form {
padding: 1em;
max-width: 40ch;
margin: 0 auto;
box-shadow: grey 1px 1px 3px;
border-radius: .25em;
}
label {
font-weight: bold;
}
input[type=text] {
text-transform: lowercase;
border-radius: .25em;
}
input {
border: 1px solid silver;
display: block;
text-align: center;
font-size: 16px;
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
button {
form button {
background-color: #bbbbf2;
border: 2px solid currentColor;
border-radius: .25em;
@ -64,20 +57,6 @@ footer {
border-top: 1px solid lightgrey;
}
blockquote {
background-color: #eee;
display: block;
margin: 1em auto;
padding: 1em;
max-width: 40ch;
box-shadow: grey 1px 1px 3px;
border-radius: .25em;
}
blockquote a {
color: #373fff;
}
#buzzer {
width: 95vw;
height: 95vw;
@ -94,11 +73,6 @@ blockquote a {
text-shadow: 2px 2px 2px black;
}
#buzzer.active {
background: greenyellow;
box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
#buzzer:active {
box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
@ -138,7 +112,7 @@ figure.participant figcaption {
10%, 90% {
transform: rscale(1.3) otate(-10deg);
}
20%, 80% {
transform: rscale(1.3) otate(20deg);
}
@ -174,8 +148,4 @@ figure.participant figcaption {
#messageBox.hide {
display: none;
}
#participants {
margin-top: 1em;
}
}

103
room.js
View File

@ -11,7 +11,7 @@ function shuffle(a) {
function getOrCreateRoom(roomId) {
let room = rooms[roomId];
if (!room) {
room = {
roomId: roomId,
@ -22,49 +22,43 @@ function getOrCreateRoom(roomId) {
};
rooms[roomId] = room;
}
return room;
}
function addParticipant(roomId, participantId, participantName) {
let room = getOrCreateRoom(roomId);
room.participants.push({
participantId,
participantId,
participantName,
character: room.characters[room.participants.length],
active: true
});
rooms[roomId] = room;
}
function removeParticipant(roomId, participantId) {
let room = getOrCreateRoom(roomId);
let participant = room.participants.find(p => p.participantId === participantId);
if (participant) {
participant.active = false;
room.audience.forEach(ws => {
ws.send(JSON.stringify({
type: "participants",
participants: room.participants
}));
});
}
room.participants.find(p => p.participantId === participantId).active = false;
room.audience.forEach(ws => {
ws.send(JSON.stringify({
type: "participants",
participants: room.participants
}));
});
}
function addParticipantWS(roomId, participantId, ws) {
let room = getOrCreateRoom(roomId);
let participant = room.participants.find(p => p.participantId === participantId);
if (participant) {
participant.ws = ws;
room.audience.forEach(ws => {
ws.send(JSON.stringify({
type: "participants",
participants: room.participants
}));
});
}
room.participants.find(p => p.participantId === participantId).ws = ws;
room.audience.forEach(ws => {
ws.send(JSON.stringify({
type: "participants",
participants: room.participants
}));
});
}
function addAudienceWS(roomId, ws) {
@ -80,53 +74,26 @@ function buzz(roomId, participant) {
let room = getOrCreateRoom(roomId);
if (room.canBuzz) {
room.canBuzz = false;
setTimeout(() => room.canBuzz = true, 5000);
participant = room.participants.find(p => p.participantId === participant.participantId);
if (participant) {
room.participants.forEach(p => {
if (p.ws && p.participantId !== participant.participantId) {
p.ws.send(JSON.stringify({
type: "buzz",
participant: participant.participantName,
msg: `<img src="${participant.character}"><div>${participant.participantName} buzzed!</div>`
}));
}
});
room.audience.forEach(ws => {
ws.send(JSON.stringify({
room.participants.forEach(p => {
if (p.ws && p.participantId !== participant.participantId) {
p.ws.send(JSON.stringify({
type: "buzz",
participant: participant
participant: participant.participantName,
msg: `<img src="${participant.character}"><div>${participant.participantName} buzzed!</div>`
}));
});
}
}
});
room.audience.forEach(ws => {
ws.send(JSON.stringify({
type: "buzz",
participant: participant
}));
});
}
}
function reset(roomId) {
let room = getOrCreateRoom(roomId);
room.canBuzz = true;
room.participants.forEach(p => {
p.ws.send(JSON.stringify({
type: "reset"
}));
});
}
function closeRoom(roomId) {
let room = getOrCreateRoom(roomId);
room.canBuzz = false;
room.participants.forEach(p => {
if (p.ws) {
p.ws.send(JSON.stringify({
type: "close"
}));
}
});
delete rooms[roomId];
}
module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant, reset, closeRoom}
module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant}

37
server.js
View File

@ -6,7 +6,6 @@ const WebSocket = require('ws');
const http = require('http');
const randomWords = require('random-words');
const rooms = require('./room');
const room = require("./room");
const app = express();
const server = http.createServer(app);
@ -26,33 +25,32 @@ app.get("/", (request, response) => {
});
});
app.get("/:roomId", (request, response) => {
let room = rooms.getOrCreateRoom(request.params.roomId.trim().toLowerCase());
app.get("/:roomId/join", (request, response) => {
let room = rooms.getOrCreateRoom(request.params.roomId.toLowerCase());
let participant = room.participants.find(p => p.participantId === request.fingerprint.hash);
if (room.audience.length === 0) {
response.render('audience', {
layout: false,
room: request.params.roomId.trim().toLowerCase(),
participants: room.participants,
});
} else if (participant) {
if (participant) {
response.render('room', {
layout: false,
room: request.params.roomId.trim().toLowerCase(),
room: request.params.roomId.toLowerCase(),
name: participant.participantName,
participantName: participant.participantName,
participantId: participant.participantId,
character: participant.character,
});
} else {
response.render('join', {layout: false, room: request.params.roomId.trim().toLowerCase()});
response.render('join', {layout: false, room: request.params.roomId.toLowerCase()});
}
});
app.post("/:roomId", (request, response) => {
app.get("/:roomId/audience", (request, response) => {
let room = rooms.getOrCreateRoom(request.params.roomId.toLowerCase());
response.render('audience', {layout: false, room: request.params.roomId.toLowerCase(), participants: room.participants });
});
app.post("/:roomId/join", (request, response) => {
rooms.addParticipant(request.params.roomId.toLowerCase(), request.fingerprint.hash, request.body.name);
response.redirect(`/${request.params.roomId.toLowerCase()}`);
response.redirect(`/${request.params.roomId.toLowerCase()}/join`);
});
server.listen(process.env.PORT, () => {
@ -67,17 +65,6 @@ wss.on('connection', (ws, req) => {
if (roomId.includes("/audience")) {
roomId = roomId.replace("/audience", "");
rooms.addAudienceWS(roomId, ws);
ws.on('message', (message) => {
message = JSON.parse(message);
if (message.type === "reset") {
rooms.reset(roomId);
}
});
ws.on('close', () => {
room.closeRoom(roomId);
});
} else {
let participant;
ws.on('message', (message) => {

57
views/audience.handlebars
View File

@ -14,61 +14,40 @@
</header>
<main>
<blockquote>
Share this link for players to join:<br>
<a id="playerRoom" href=""></a>
</blockquote>
<h2>Participants</h2>
<button id="resetBuzzers">Reset Buzzers</button>
<div id="participants">
No participants yet :(
</div>
<div id="participants"></div>
</main>
<script>
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;
let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}/audience`);
socket.onmessage = function(event) {
let msg = JSON.parse(event.data);
if (msg.type === "buzz") {
beep();
buzzed = document.getElementById(`p-${msg.participant.participantId}`);
let 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');
if (msg.participants.length) {
let contents = '';
msg.participants.forEach(p => {
contents += `
<figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
<img src="${p.character}" />
<figcaption>${p.participantName}</figcaption>
</figure>
`;
});
participantContainer.innerHTML = contents;
}
let contents = '';
msg.participants.forEach(p => {
contents += `
<figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
<img src="${p.character}" />
<figcaption>${p.participantName}</figcaption>
</figure>
`;
});
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>

14
views/index.handlebars
View File

@ -10,13 +10,16 @@
</head>
<body>
<header>
<img src="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=" />
<h1>Buzzers</h1>
<h1>Join room</h1>
</header>
<main>
<h2>Create or join a game room</h2>
<h2>Oh hi!</h2>
<p>
Create or join a room
</p>
<form>
<label>
Room ID
@ -25,12 +28,13 @@
<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}`;
window.location = `//${window.location.host}/${roomId}/join`;
});
</script>
</body>

10
views/join.handlebars
View File

@ -10,11 +10,13 @@
</head>
<body>
<header>
<h1>Join '{{room}}'</h1>
<h1>Join {{room}}</h1>
</header>
<main>
<h2>Please tell me your (team) name:</h2>
<h2>Oh hi,</h2>
<p>Tell me your (team) name:</p>
<form method="POST">
<label>
@ -23,6 +25,10 @@
</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,20 +14,19 @@
</header>
<main>
<h2>{{name}} <img src="{{character}}"/></h2>
<h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
<button id="buzzer">
BUZZ
</button>
</main>
<div id="messageBox" class="hide">
</div>
<script>
let proto = location.protocol == 'http:' ? 'ws' : 'wss'
let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}`);
let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`);
socket.onopen = function(e) {
socket.send(JSON.stringify({
@ -43,51 +42,35 @@
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);
}