From 970897a2f0cf8b1ac2b41193c612b3e215966055 Mon Sep 17 00:00:00 2001
From: "Glitch (hello-express)" <none>
Date: Thu, 9 Apr 2020 15:38:44 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A2=F0=9F=90=AB=20Checkpoint=20./views?=
 =?UTF-8?q?/room.handlebars:530995/25=20./public/style.css:530995/114=20./?=
 =?UTF-8?q?server.js:530995/1209=20./room.js:530995/875=20./views/audience?=
 =?UTF-8?q?.handlebars:530995/1536?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/style.css          |  8 ++++++++
 room.js                   | 16 ++++++++++++++--
 server.js                 | 32 ++++++++++++++++++++------------
 views/audience.handlebars | 20 +++++++++++++++++++-
 views/room.handlebars     |  4 ++--
 5 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/public/style.css b/public/style.css
index f7ae227..9661b5a 100644
--- a/public/style.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/room.js b/room.js
index f7e9536..26bff3f 100644
--- a/room.js
+++ b/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}
\ No newline at end of file
+module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz}
\ No newline at end of file
diff --git a/server.js b/server.js
index 552499c..6b69358 100644
--- a/server.js
+++ b/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');
 });
\ No newline at end of file
diff --git a/views/audience.handlebars b/views/audience.handlebars
index 436d1bc..df5cd5c 100644
--- a/views/audience.handlebars
+++ b/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>
diff --git a/views/room.handlebars b/views/room.handlebars
index 4f6a753..dcb3740 100644
--- a/views/room.handlebars
+++ b/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`);
         }