👢🐫 Checkpoint

./views/room.handlebars:530995/25
./public/style.css:530995/114
./server.js:530995/1209
./room.js:530995/875
./views/audience.handlebars:530995/1536
This commit is contained in:
Glitch (hello-express) 2020-04-09 15:38:44 +00:00
parent 5bf6096180
commit 970897a2f0
5 changed files with 63 additions and 17 deletions

View File

@ -68,6 +68,10 @@ footer {
text-shadow: 2px 2px 2px black; text-shadow: 2px 2px 2px black;
} }
#buzzer:active {
box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
h2 img { h2 img {
max-height: 40px; max-height: 40px;
} }
@ -82,4 +86,8 @@ figure.participant img {
figure.participant figcaption { figure.participant figcaption {
font-weight: bold; font-weight: bold;
font-size: 1.3em; font-size: 1.3em;
}
.buzzed {
background: limegreen;
} }

16
room.js
View File

@ -16,6 +16,7 @@ function getOrCreateRoom(roomId) {
room = { room = {
roomId: roomId, roomId: roomId,
participants: [], participants: [],
audience: [],
characters: shuffle(chars) characters: shuffle(chars)
}; };
rooms[roomId] = room; rooms[roomId] = room;
@ -41,6 +42,11 @@ function addParticipantWS(roomId, participantId, ws) {
room.participants.find(p => p.participantId === participantId).ws = ws; room.participants.find(p => p.participantId === participantId).ws = ws;
} }
function addAudienceWS(roomId, ws) {
let room = getOrCreateRoom(roomId);
room.audience.push(ws);
}
function buzz(roomId, participant) { function buzz(roomId, participant) {
let room = getOrCreateRoom(roomId); let room = getOrCreateRoom(roomId);
room.participants.forEach(p => { room.participants.forEach(p => {
@ -50,7 +56,13 @@ function buzz(roomId, participant) {
participant: participant.participantName participant: participant.participantName
})); }));
} }
}) });
room.audience.forEach(ws => {
ws.send(JSON.stringify({
type: "buzz",
participant: participant
}));
});
} }
module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, buzz} module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz}

View File

@ -72,18 +72,26 @@ wss.on('connection', (ws, req) => {
let participant; let participant;
let roomId = req.url.substring(1); let roomId = req.url.substring(1);
ws.on('message', (message) => { if (roomId.includes("/audience")) {
message = JSON.parse(message); roomId = roomId.replace("/audience", "");
if (message.type === "join") {
participant = message.data; rooms.addAudienceWS(roomId, ws);
rooms.addParticipantWS(roomId, participant.participantId, ws)
ws.send('Joined as ' + participant.participantName); } else {
} ws.on('message', (message) => {
if (message.type === "buzz") { message = JSON.parse(message);
console.log(`${participant.participantName} buzzed!`) if (message.type === "join") {
rooms.buzz(roomId, participant); participant = message.data;
} rooms.addParticipantWS(roomId, participant.participantId, ws)
}); ws.send('Joined as ' + participant.participantName);
}
if (message.type === "buzz") {
console.log(`${participant.participantName} buzzed!`)
rooms.buzz(roomId, participant);
}
});
}
ws.send('Connected'); ws.send('Connected');
}); });

View File

@ -19,11 +19,29 @@
<h2>Participants</h2> <h2>Participants</h2>
{{#each participants}} {{#each participants}}
<figure class="participant"> <figure class="participant" id="p-{{this.participantId}}">
<img src="{{this.character}}" /> <img src="{{this.character}}" />
<figcaption>{{this.participantName}}</figcaption> <figcaption>{{this.participantName}}</figcaption>
</figure> </figure>
{{/each}} {{/each}}
</main> </main>
<script>
let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}/audience`);
socket.onmessage = function(event) {
let msg = JSON.parse(event.data);
if (msg.type === "buzz") {
let buzzed = document.getElementById(`p-${msg.participant.participantId}`);
buzzed.classList.add('buzzed');
setTimeout(() => buzzed.classList.remove('buzzed'), 5000)
}
};
socket.onerror = function(error) {
alert(`[error] ${error.message}`);
};
</script>
</body> </body>
</html> </html>

View File

@ -36,8 +36,8 @@
})); }));
}; };
socket.onmessage = function(msg) { socket.onmessage = function(event) {
msg = JSON.parse(msg); let msg = JSON.parse(event.data);
if (msg.type === "buzz") { if (msg.type === "buzz") {
alert(`${msg.participant} buzzed`); alert(`${msg.participant} buzzed`);
} }