🍢👗 Checkpoint
./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:
parent
98364e07d9
commit
0c282eaf59
@ -66,4 +66,20 @@ footer {
|
||||
font-size: 4em;
|
||||
color: white;
|
||||
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
11
room.js
@ -1,6 +1,14 @@
|
||||
const chars = require('./characters.json');
|
||||
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) {
|
||||
let room = rooms[roomId];
|
||||
|
||||
@ -8,7 +16,7 @@ function getOrCreateRoom(roomId) {
|
||||
room = {
|
||||
roomId: roomId,
|
||||
participants: [],
|
||||
characters:
|
||||
characters: shuffle(chars)
|
||||
};
|
||||
rooms[roomId] = room;
|
||||
}
|
||||
@ -22,6 +30,7 @@ function addParticipant(roomId, participantId, participantName) {
|
||||
room.participants.push({
|
||||
participantId,
|
||||
participantName,
|
||||
character: room.characters[room.participants.length]
|
||||
});
|
||||
|
||||
rooms[roomId] = room;
|
||||
|
@ -44,12 +44,19 @@ app.get("/:roomId/join", (request, response) => {
|
||||
name: participant.participantName,
|
||||
participantName: participant.participantName,
|
||||
participantId: participant.participantId,
|
||||
character: participant.character,
|
||||
});
|
||||
} else {
|
||||
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) => {
|
||||
rooms.addParticipant(request.params.roomId, request.fingerprint.hash, request.body.name);
|
||||
response.redirect(`/${request.params.roomId}/join`);
|
||||
|
29
views/audience.handlebars
Normal file
29
views/audience.handlebars
Normal 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>
|
@ -16,7 +16,7 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Oh hi, {{name}}</h2>
|
||||
<h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
|
||||
|
||||
<button id="buzzer">
|
||||
BUZZ
|
||||
|
Loading…
Reference in New Issue
Block a user