📺🌘 Checkpoint

./views/room.handlebars:530995/1530
./server.js:530995/548
./public/style.css:530995/195

public/style.css

@@ -54,3 +54,11 @@ footer {
   padding-top: 1.5em;
   border-top: 1px solid lightgrey;
 }
+
+#buzzer {
+  width: 90vw;
+  height: 90vh;
+  margin: 0 auto;
+  border-radius: 100%;
+  background: red;
+}

server.js

@@ -58,11 +58,16 @@ server.listen(process.env.PORT, () => {
 
 const wss = new WebSocket.Server({ server });
 wss.on('connection', (ws, req) => {
+  let participant;
   ws.on('message', (message) => {
-      message = JSON.stringify(message);
-      console.log(message)
-      console.log(message.type)
-      console.log(message.data)
+    message = JSON.parse(message);
+    if (message.type === "join") {
+      participant = message.data;
+      ws.send('Joined as ' + participant.participantName);
+    }
+    if (message.type === "buzz") {
+      // TODO: Handle Buzzer
+    }
   });
 
   ws.send('Connected');

views/room.handlebars

@@ -27,22 +27,26 @@
       let socket = new WebSocket(`wss://${window.location.hostname}`);
 
       socket.onopen = function(e) {
-      socket.send({
+        socket.send(JSON.stringify({
           type: "join",
           data: {
             participantId: '{{participantId}}',
             participantName: '{{participantName}}',
           }
-      });
+        }));
       };
 
       socket.onmessage = function(event) {
-      
+        console.log(event.message);
       };
 
       socket.onerror = function(error) {
         alert(`[error] ${error.message}`);
       };
+      
+      document.getElementById('buzzer').addEventListener('mousedown', function() {
+        socket.send(JSON.stringify({ type: "buzz" }));
+      });
     </script>
   </body>
 </html>