👢🐫 Checkpoint

./views/room.handlebars:530995/25
./public/style.css:530995/114
./server.js:530995/1209
./room.js:530995/875
./views/audience.handlebars:530995/1536

public/style.css

@@ -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;
 }
@@ -82,4 +86,8 @@ figure.participant img {
 figure.participant figcaption {
   font-weight: bold;
   font-size: 1.3em;
+}
+
+.buzzed {
+  background: limegreen;
 }

room.js

@@ -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}

server.js

@@ -72,18 +72,26 @@ wss.on('connection', (ws, req) => {
   let participant;
   let roomId = req.url.substring(1);
   
-  ws.on('message', (message) => {
-    message = JSON.parse(message);
-    if (message.type === "join") {
-      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);
-    }
-  });
+  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") {
+        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');
 });

views/audience.handlebars

@@ -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>

views/room.handlebars

@@ -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`);
         }