👢🐫 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;
}
#buzzer:active {
box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
}
h2 img {
max-height: 40px;
}
@ -83,3 +87,7 @@ figure.participant figcaption {
font-weight: bold;
font-size: 1.3em;
}
.buzzed {
background: limegreen;
}

16
room.js
View File

@ -16,6 +16,7 @@ function getOrCreateRoom(roomId) {
room = {
roomId: roomId,
participants: [],
audience: [],
characters: shuffle(chars)
};
rooms[roomId] = room;
@ -41,6 +42,11 @@ function addParticipantWS(roomId, participantId, 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) {
let room = getOrCreateRoom(roomId);
room.participants.forEach(p => {
@ -50,7 +56,13 @@ function buzz(roomId, participant) {
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,6 +72,12 @@ wss.on('connection', (ws, req) => {
let participant;
let roomId = req.url.substring(1);
if (roomId.includes("/audience")) {
roomId = roomId.replace("/audience", "");
rooms.addAudienceWS(roomId, ws);
} else {
ws.on('message', (message) => {
message = JSON.parse(message);
if (message.type === "join") {
@ -84,6 +90,8 @@ wss.on('connection', (ws, req) => {
rooms.buzz(roomId, participant);
}
});
}
ws.send('Connected');
});

View File

@ -19,11 +19,29 @@
<h2>Participants</h2>
{{#each participants}}
<figure class="participant">
<figure class="participant" id="p-{{this.participantId}}">
<img src="{{this.character}}" />
<figcaption>{{this.participantName}}</figcaption>
</figure>
{{/each}}
</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>
</html>

View File

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