Add support for adding score

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;
         }
       };