Add support for adding score

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

@@ -129,4 +129,32 @@ 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;
+
+    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>
               `;
             });
@@ -63,6 +68,14 @@
         window.navigator.vibrate(500);
       }
 
+      function updateScore(participantId, points) {
+        socket.send(JSON.stringify({
+          type: "point",
+          participantId,
+          points,
+        }));
+      }
+
       document.getElementById('resetBuzzers').addEventListener('click', function() {
         socket.send(JSON.stringify({
           type: "reset"

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
@@ -47,6 +47,8 @@
           reset();
         } else if (msg.type === "close") {
           roomClosed();
+        } else if (msg.type === "score") {
+          document.querySelector('.score').innerText = msg.score;
         }
       };