Null checks

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12
+FROM node:14
 
 WORKDIR /app
 

public/style.css

@@ -179,3 +179,21 @@ figure.participant figcaption {
 #participants {
   margin-top: 1em;
 }
+
+.score {
+  display: inline-block;
+  background: green;
+  border-radius: 100px;
+  color: white;
+  padding: 4px 9px;
+  vertical-align: top;
+}
+
+
+.participant button {
+  display: none;
+}
+
+.participant.buzzed button {
+  display: inline;
+}

room.js

@@ -108,9 +108,11 @@ function reset(roomId) {
   room.canBuzz = true;
 
   room.participants.forEach(p => {
-    p.ws.send(JSON.stringify({
+    if (p.ws) {
-      type: "reset"
+      p.ws.send(JSON.stringify({
-    }));
+        type: "reset"
+      }));
+    }
   });
 }
 
@@ -129,4 +131,34 @@ function closeRoom(roomId) {
   delete rooms[roomId];
 }
 
-module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant, reset, closeRoom}
+function updateScore(roomId, participantId, points) {
+  let room = getOrCreateRoom(roomId);
+  let participant = room.participants.find(p => p.participantId === participantId);
+  if (participant) {
+    if (!participant.score) participant.score = 0;
+
+    participant.score += points;
+
+    if (participant.ws) {
+      participant.ws.send(JSON.stringify({
+        type: "score",
+        score: participant.score,
+      }));
+    }
+  }
+
+  room.audience.forEach(ws => {
+    ws.send(JSON.stringify({
+      type: "participants",
+      participants: room.participants.map(p => { return {
+        participantId: p.participantId,
+        character: p.character,
+        participantName: p.participantName,
+        score: p.score,
+        active: p.active,
+      }})
+    }));
+  });
+}
+
+module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant, reset, closeRoom, updateScore}

server.js

@@ -72,6 +72,8 @@ wss.on('connection', (ws, req) => {
       message = JSON.parse(message);
       if (message.type === "reset") {
         rooms.reset(roomId);
+      } else if (message.type === "point") {
+        rooms.updateScore(roomId, message.participantId, message.points);
       }
     });
 

views/audience.handlebars

@@ -51,6 +51,11 @@
                 <figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
                   <img src="${p.character}" />
                   <figcaption>${p.participantName}</figcaption>
+                  <div>
+                    <button onclick="updateScore('${p.participantId}', -1)">-1</button>
+                    <div class="score">${p.score || 0}</div>
+                    <button onclick="updateScore('${p.participantId}', 1)">+1</button>
+                  </div>
                 </figure>
               `;
             });
@@ -60,7 +65,15 @@
       };
 
       function beep() {
-        window.navigator.vibrate(500);
+        if (window.navigator.vibrate) window.navigator.vibrate(500);
+      }
+
+      function updateScore(participantId, points) {
+        socket.send(JSON.stringify({
+          type: "point",
+          participantId,
+          points,
+        }));
       }
 
       document.getElementById('resetBuzzers').addEventListener('click', function() {

views/index.handlebars

@@ -29,8 +29,7 @@
     <script>
     document.querySelector('form').addEventListener('submit', function(event) {
       event.preventDefault();
-      let roomId = document.getElementById('roomId').value;
+      window.location = '//' + window.location.host + '/' + document.getElementById('roomId').value;
-      window.location = `//${window.location.host}/${roomId}`;
     });
     </script>
   </body>

views/room.handlebars

@@ -14,7 +14,7 @@
     </header>
 
     <main>
-      <h2>{{name}} <img src="{{character}}"/></h2>
+      <h2>{{name}} <img src="{{character}}"/> <div class="score">0</div></h2>
 
       <button id="buzzer">
         BUZZ
@@ -26,8 +26,8 @@
     </div>
 
     <script>
-      let proto = location.protocol == 'http:' ? 'ws' : 'wss'
+      var proto = location.protocol == 'http:' ? 'ws' : 'wss'
-      let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}`);
+      var socket = new WebSocket(proto + '://' + window.location.hostname + ':' + window.location.port + '/{{room}}');
 
       socket.onopen = function(e) {
         socket.send(JSON.stringify({
@@ -40,13 +40,15 @@
       };
 
       socket.onmessage = function(event) {
-        let msg = JSON.parse(event.data);
+        var msg = JSON.parse(event.data);
         if (msg.type === "buzz") {
           showMessage(msg.msg);
         } else if (msg.type === "reset") {
           reset();
         } else if (msg.type === "close") {
           roomClosed();
+        } else if (msg.type === "score") {
+          document.querySelector('.score').innerText = msg.score;
         }
       };
 
@@ -67,9 +69,9 @@
       });
 
       function showMessage(msg) {
-        window.navigator.vibrate(500);
+        if (window.navigator.vibrate) window.navigator.vibrate(500);
         document.getElementById('buzzer').disabled = true;
-        let mb = document.getElementById('messageBox');
+        var mb = document.getElementById('messageBox');
         mb.innerHTML = msg;
         mb.classList.remove('hide');
       }
@@ -77,19 +79,19 @@
       function reset() {
         document.getElementById('buzzer').disabled = false;
         document.getElementById('buzzer').classList.remove('active');
-        let mb = document.getElementById('messageBox');
+        var mb = document.getElementById('messageBox');
         mb.classList.add('hide');
       }
 
       function roomClosed() {
         document.getElementById('buzzer').disabled = true;
-        let mb = document.getElementById('messageBox');
+        var mb = document.getElementById('messageBox');
         mb.innerHTML = "Room closed";
         mb.classList.remove('hide');
       }
 
       function beep() {
-        window.navigator.vibrate(500);
+        if (window.navigator.vibrate) window.navigator.vibrate(500);
       }
     </script>
   </body>