From bcda8f8a4f607be7cd3aa45fca8686dc0bd9036e Mon Sep 17 00:00:00 2001
From: Marcus Noble <github@marcusnoble.co.uk>
Date: Fri, 27 Nov 2020 19:13:27 +0000
Subject: [PATCH] Add support for adding score

---
 public/style.css          | 18 ++++++++++++++++++
 room.js                   | 30 +++++++++++++++++++++++++++++-
 server.js                 |  2 ++
 views/audience.handlebars | 13 +++++++++++++
 views/room.handlebars     |  4 +++-
 5 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/public/style.css b/public/style.css
index 540fc0a..7694bc8 100644
--- a/public/style.css
+++ b/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;
+}
diff --git a/room.js b/room.js
index 94082c6..eddc47e 100644
--- a/room.js
+++ b/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}
diff --git a/server.js b/server.js
index f5cbbbe..3c93182 100644
--- a/server.js
+++ b/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);
       }
     });
 
diff --git a/views/audience.handlebars b/views/audience.handlebars
index 54a3fe5..a0df288 100644
--- a/views/audience.handlebars
+++ b/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"
diff --git a/views/room.handlebars b/views/room.handlebars
index e8ad4c9..d235bd4 100644
--- a/views/room.handlebars
+++ b/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;
         }
       };