📺🌘 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,12 +58,17 @@ server.listen(process.env.PORT, () => {
 
 const wss = new WebSocket.Server({ server });
 wss.on('connection', (ws, req) => {
-    ws.on('message', (message) => {
-      message = JSON.stringify(message);
-      console.log(message)
-      console.log(message.type)
-      console.log(message.data)
-    });
+  let participant;
+  ws.on('message', (message) => {
+    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');
+  ws.send('Connected');
 });

views/room.handlebars

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