🌃🎑 Checkpoint

./views/audience.handlebars:530995/1047
./room.js:530995/667
./server.js:530995/158

room.js

@@ -32,7 +32,8 @@ function addParticipant(roomId, participantId, participantName) {
   room.participants.push({
     participantId, 
     participantName,
-    character: room.characters[room.participants.length]
+    character: room.characters[room.participants.length],
+    active: true
   });
   
   rooms[roomId] = room;
@@ -40,19 +41,33 @@ function addParticipant(roomId, participantId, participantName) {
 
 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"})));
+  room.participants.find(p => p.participantId === participantId).active = false;
+  room.audience.forEach(ws => {
+    ws.send(JSON.stringify({
+      type: "participants",
+      participants: room.participants
+    }));
+  });
 }
 
 function addParticipantWS(roomId, participantId, ws) {
   let room = getOrCreateRoom(roomId);
   room.participants.find(p => p.participantId === participantId).ws = ws;
-  room.audience.forEach(ws => ws.send(JSON.stringify({type: "new_participant"})));
+  room.audience.forEach(ws => {
+    ws.send(JSON.stringify({
+      type: "participants",
+      participants: room.participants
+    }));
+  });
 }
 
 function addAudienceWS(roomId, ws) {
   let room = getOrCreateRoom(roomId);
   room.audience.push(ws);
+  ws.send(JSON.stringify({
+    type: "participants",
+    participants: room.participants
+  }));
 }
 
 function buzz(roomId, participant) {

server.js

@@ -34,6 +34,9 @@ app.get("/:roomId/join", (request, response) => {
   let room = rooms.getOrCreateRoom(request.params.roomId.toLowerCase());
   let participant = room.participants.find(p => p.participantId === request.fingerprint.hash);
   
+  console.log(request.fingerprint.hash);
+  console.log(participant);
+  
   if (participant) {
     response.render('room', {
       layout: false, 

views/audience.handlebars

@@ -16,14 +16,7 @@
     <main>
       <h2>Participants</h2>
       
-      <div>
-        {{#each participants}}
-          <figure class="participant" id="p-{{this.participantId}}">
-            <img src="{{this.character}}" />
-            <figcaption>{{this.participantName}}</figcaption>
-          </figure>
-        {{/each}}
-      </div>
+      <div id="participants"></div>
     </main>
     
     
@@ -37,8 +30,18 @@
           let buzzed = document.getElementById(`p-${msg.participant.participantId}`);
           buzzed.classList.add('buzzed');
           setTimeout(() => buzzed.classList.remove('buzzed'), 5000)
-        } else if (msg.type === "new_participant") {
-          window.location = window.location;
+        } else if (msg.type === "participants") {
+          let participantContainer = document.getElementById('participants');
+          let contents = '';
+          msg.participants.forEach(p => {
+            contents += `
+              <figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
+                <img src="${p.character}" />
+                <figcaption>${p.participantName}</figcaption>
+              </figure>
+            `;
+          });
+          participantContainer.innerHTML = contents;
         }
       };