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

🍢👗 Checkpoint

Browse Source 
./room.js:530995/263
./server.js:530995/2484
./views/room.handlebars:530995/81
./public/style.css:530995/227
./views/audience.handlebars:530995/2587
This commit is contained in:
Glitch (hello-express) 2020-04-09 12:16:21 +00:00
parent 98364e07d9
commit 0c282eaf59
5 changed files with 63 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/style.css
View File

@ -66,4 +66,20 @@ footer {
font-size: 4em; font-size: 4em;
color: white; color: white;
text-shadow: 2px 2px 2px black; text-shadow: 2px 2px 2px black;
}
h2 img {
max-height: 40px;
}
figure.participant {
display: inline-block;
}
figure.participant img {
max-height: 150px;
}
figure.participant figcaption {
font-weight: bold;
font-size: 1.3em;
} }

11
room.js
View File

@ -1,6 +1,14 @@
const chars = require('./characters.json'); const chars = require('./characters.json');
const rooms = {}; const rooms = {};
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function getOrCreateRoom(roomId) { function getOrCreateRoom(roomId) {
let room = rooms[roomId]; let room = rooms[roomId];
@ -8,7 +16,7 @@ function getOrCreateRoom(roomId) {
room = { room = {
roomId: roomId, roomId: roomId,
participants: [], participants: [],
characters: characters: shuffle(chars)
}; };
rooms[roomId] = room; rooms[roomId] = room;
} }
@ -22,6 +30,7 @@ function addParticipant(roomId, participantId, participantName) {
room.participants.push({ room.participants.push({
participantId, participantId,
participantName, participantName,
character: room.characters[room.participants.length]
}); });
rooms[roomId] = room; rooms[roomId] = room;

7
server.js
View File

@ -44,12 +44,19 @@ app.get("/:roomId/join", (request, response) => {
name: participant.participantName, name: participant.participantName,
participantName: participant.participantName, participantName: participant.participantName,
participantId: participant.participantId, participantId: participant.participantId,
character: participant.character,
}); });
} else { } else {
response.render('join', {layout: false, room: request.params.roomId}); response.render('join', {layout: false, room: request.params.roomId});
} }
}); });
app.get("/:roomId/audience", (request, response) => {
let room = rooms.getOrCreateRoom(request.params.roomId);
response.render('audience', {layout: false, room: request.params.roomId, participants: room.participants });
});
app.post("/:roomId/join", (request, response) => { app.post("/:roomId/join", (request, response) => {
rooms.addParticipant(request.params.roomId, request.fingerprint.hash, request.body.name); rooms.addParticipant(request.params.roomId, request.fingerprint.hash, request.body.name);
response.redirect(`/${request.params.roomId}/join`); response.redirect(`/${request.params.roomId}/join`);

29
views/audience.handlebars Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buzzer</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch">
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<header>
<h1>{{room}}</h1>
</header>
<main>
<h2>Participants</h2>
{{#each participants}}
<figure class="participant">
<img src="{{this.character}}" />
<figcaption>{{this.participantName}}</figcaption>
</figure>
{{/each}}
</main>
</body>
</html>

2
views/room.handlebars
View File

@ -16,7 +16,7 @@
</header> </header>
<main> <main>
<h2>Oh hi, {{name}}</h2> <h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
<button id="buzzer"> <button id="buzzer">
BUZZ BUZZ