🌶🎥 Checkpoint

./views/room.handlebars:530995/80
./views/audience.handlebars:530995/371
./server.js:530995/328
./room.js:530995/345
./public/style.css:530995/79

public/style.css

@@ -59,6 +59,7 @@ footer {
   max-height: 500px;
   max-width: 500px;
   margin: 0 auto;
+  margin-left: -8px;
   border-radius: 500px;
   background: red;
   border: 4px solid black;

room.js

@@ -37,6 +37,12 @@ function addParticipant(roomId, participantId, participantName) {
   rooms[roomId] = room;
 }
 
+function removeParticipant(roomId, participantId) {
+  let room = getOrCreateRoom(roomId);
+  room.participants = room.participants.filter(p => p.participantId !== participantId);
+  room.audience.forEach(ws => ws.send(JSON.stringify({type: "new_participant"})));
+}
+
 function addParticipantWS(roomId, participantId, ws) {
   let room = getOrCreateRoom(roomId);
   room.participants.find(p => p.participantId === participantId).ws = ws;
@@ -69,4 +75,4 @@ function buzz(roomId, participant) {
   });
 }
 
-module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz}
+module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant}

server.js

@@ -76,7 +76,6 @@ wss.on('connection', (ws, req) => {
     roomId = roomId.replace("/audience", "");
     
     rooms.addAudienceWS(roomId, ws);
-    
   } else {
     ws.on('message', (message) => {
       message = JSON.parse(message);
@@ -89,5 +88,10 @@ wss.on('connection', (ws, req) => {
         rooms.buzz(roomId, participant);
       }
     });
+    
+    
+    ws.on('close', () => {
+      rooms.removeParticipant(roomId, participant.participantId);
+    });
   }
 });

views/audience.handlebars

@@ -35,6 +35,7 @@
       socket.onmessage = function(event) {
         let msg = JSON.parse(event.data);
         if (msg.type === "buzz") {
+          beep();
           let buzzed = document.getElementById(`p-${msg.participant.participantId}`);
           buzzed.classList.add('buzzed');
           setTimeout(() => buzzed.classList.remove('buzzed'), 5000)
@@ -42,10 +43,11 @@
           window.location = window.location;
         }
       };
-
+      
-      socket.onerror = function(error) {
+      function beep() {
-        alert(`[error] ${error.message}`);
+        window.navigator.vibrate(500);
-      };
+        new Audio("https://cdn.glitch.com/81aebabf-079d-4504-b844-d90d643962c4%2FGame-show-buzzer-sound-effect.mp3?v=1586451448374").play();
+      }
     </script>
   </body>
 </html>

views/room.handlebars

@@ -62,6 +62,7 @@
       });
       
       function showMessage(msg) {
+        window.navigator.vibrate(500);
         document.getElementById('buzzer').disabled = true;
         let mb = document.getElementById('messageBox');
         mb.innerHTML = msg;
@@ -73,6 +74,7 @@
       }
       
       function beep() {
+        window.navigator.vibrate(500);
         new Audio("https://cdn.glitch.com/81aebabf-079d-4504-b844-d90d643962c4%2FGame-show-buzzer-sound-effect.mp3?v=1586451448374").play();
       }
     </script>