👢🐫 Checkpoint

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

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