Some style tweaks

package.json

@@ -16,4 +16,4 @@
   "engines": {
     "node": "12.x"
   }
-}
+}

public/build/bundle.css

@@ -0,0 +1 @@
+main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}

public/style.css

@@ -10,7 +10,6 @@ body {
 }
 
 h1 {
-  font-style: italic;
   color: #373fff;
   line-height: 1.1;
 }
@@ -22,22 +21,30 @@ form {
   padding: 1em;
   max-width: 40ch;
   margin: 0 auto;
+  box-shadow: grey 1px 1px 3px;
+  border-radius: .25em;
+}
+
+label {
+  font-weight: bold;
 }
 
 input[type=text] {
   text-transform: lowercase;
+  border-radius: .25em;
 }
 
 input {
   border: 1px solid silver;
   display: block;
+  text-align: center;
   font-size: 16px;
   margin-bottom: 10px;
   padding: 5px;
   width: 100%;
 }
 
-form button {
+button {
   background-color: #bbbbf2;
   border: 2px solid currentColor;
   border-radius: .25em;
@@ -57,6 +64,20 @@ footer {
   border-top: 1px solid lightgrey;
 }
 
+blockquote {
+  background-color: #eee;
+  display: block;
+  margin: 1em auto;
+  padding: 1em;
+  max-width: 40ch;
+  box-shadow: grey 1px 1px 3px;
+  border-radius: .25em;
+}
+
+blockquote a {
+  color: #373fff;
+}
+
 #buzzer {
   width: 95vw;
   height: 95vw;
@@ -73,6 +94,11 @@ footer {
   text-shadow: 2px 2px 2px black;
 }
 
+#buzzer.active {
+  background: greenyellow;
+  box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
+}
+
 #buzzer:active {
   box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
 }
@@ -112,7 +138,7 @@ figure.participant figcaption {
   10%, 90% {
     transform: rscale(1.3) otate(-10deg);
   }
-  
+
   20%, 80% {
     transform: rscale(1.3) otate(20deg);
   }
@@ -148,4 +174,8 @@ figure.participant figcaption {
 
 #messageBox.hide {
   display: none;
-}
+}
+
+#participants {
+  margin-top: 1em;
+}

room.js

@@ -11,7 +11,7 @@ function shuffle(a) {
 
 function getOrCreateRoom(roomId) {
   let room = rooms[roomId];
-  
+
   if (!room) {
     room = {
       roomId: roomId,
@@ -22,43 +22,49 @@ function getOrCreateRoom(roomId) {
     };
     rooms[roomId] = room;
   }
-  
+
   return room;
 }
 
 function addParticipant(roomId, participantId, participantName) {
   let room = getOrCreateRoom(roomId);
-  
+
   room.participants.push({
-    participantId, 
+    participantId,
     participantName,
     character: room.characters[room.participants.length],
     active: true
   });
-  
+
   rooms[roomId] = room;
 }
 
 function removeParticipant(roomId, participantId) {
   let room = getOrCreateRoom(roomId);
-  room.participants.find(p => p.participantId === participantId).active = false;
-  room.audience.forEach(ws => {
-    ws.send(JSON.stringify({
-      type: "participants",
-      participants: room.participants
-    }));
-  });
+  let participant = room.participants.find(p => p.participantId === participantId);
+  if (participant) {
+    participant.active = false;
+    room.audience.forEach(ws => {
+      ws.send(JSON.stringify({
+        type: "participants",
+        participants: room.participants
+      }));
+    });
+  }
 }
 
 function addParticipantWS(roomId, participantId, ws) {
   let room = getOrCreateRoom(roomId);
-  room.participants.find(p => p.participantId === participantId).ws = ws;
-  room.audience.forEach(ws => {
-    ws.send(JSON.stringify({
-      type: "participants",
-      participants: room.participants
-    }));
-  });
+  let participant = room.participants.find(p => p.participantId === participantId);
+  if (participant) {
+    participant.ws = ws;
+    room.audience.forEach(ws => {
+      ws.send(JSON.stringify({
+        type: "participants",
+        participants: room.participants
+      }));
+    });
+  }
 }
 
 function addAudienceWS(roomId, ws) {
@@ -74,26 +80,53 @@ function buzz(roomId, participant) {
   let room = getOrCreateRoom(roomId);
   if (room.canBuzz) {
     room.canBuzz = false;
-    setTimeout(() => room.canBuzz = true, 5000);
-    
+
     participant = room.participants.find(p => p.participantId === participant.participantId);
 
-    room.participants.forEach(p => {
-      if (p.ws && p.participantId !== participant.participantId) {
-        p.ws.send(JSON.stringify({
+    if (participant) {
+      room.participants.forEach(p => {
+        if (p.ws && p.participantId !== participant.participantId) {
+          p.ws.send(JSON.stringify({
+            type: "buzz",
+            participant: participant.participantName,
+            msg: `<img src="${participant.character}"><div>${participant.participantName} buzzed!</div>`
+          }));
+        }
+      });
+      room.audience.forEach(ws => {
+        ws.send(JSON.stringify({
           type: "buzz",
-          participant: participant.participantName,
-          msg: `<img src="${participant.character}"><div>${participant.participantName} buzzed!</div>`
+          participant: participant
         }));
-      }
-    });
-    room.audience.forEach(ws => {
-      ws.send(JSON.stringify({
-        type: "buzz",
-        participant: participant
-      }));
-    }); 
+      });
+    }
   }
 }
 
-module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant}
+function reset(roomId) {
+  let room = getOrCreateRoom(roomId);
+  room.canBuzz = true;
+
+  room.participants.forEach(p => {
+    p.ws.send(JSON.stringify({
+      type: "reset"
+    }));
+  });
+}
+
+function closeRoom(roomId) {
+  let room = getOrCreateRoom(roomId);
+  room.canBuzz = false;
+
+  room.participants.forEach(p => {
+    if (p.ws) {
+      p.ws.send(JSON.stringify({
+        type: "close"
+      }));
+    }
+  });
+
+  delete rooms[roomId];
+}
+
+module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant, reset, closeRoom}

server.js

@@ -6,6 +6,7 @@ const WebSocket = require('ws');
 const http = require('http');
 const randomWords = require('random-words');
 const rooms = require('./room');
+const room = require("./room");
 
 const app = express();
 const server = http.createServer(app);
@@ -25,32 +26,33 @@ app.get("/", (request, response) => {
   });
 });
 
-app.get("/:roomId/join", (request, response) => {
-  let room = rooms.getOrCreateRoom(request.params.roomId.toLowerCase());
+app.get("/:roomId", (request, response) => {
+  let room = rooms.getOrCreateRoom(request.params.roomId.trim().toLowerCase());
   let participant = room.participants.find(p => p.participantId === request.fingerprint.hash);
 
-  if (participant) {
+  if (room.audience.length === 0) {
+    response.render('audience', {
+      layout: false,
+      room: request.params.roomId.trim().toLowerCase(),
+      participants: room.participants,
+    });
+  } else if (participant) {
     response.render('room', {
       layout: false,
-      room: request.params.roomId.toLowerCase(),
+      room: request.params.roomId.trim().toLowerCase(),
       name: participant.participantName,
       participantName: participant.participantName,
       participantId: participant.participantId,
       character: participant.character,
     });
   } else {
-    response.render('join', {layout: false, room: request.params.roomId.toLowerCase()});
+    response.render('join', {layout: false, room: request.params.roomId.trim().toLowerCase()});
   }
 });
 
-app.get("/:roomId/audience", (request, response) => {
-  let room = rooms.getOrCreateRoom(request.params.roomId.toLowerCase());
-  response.render('audience', {layout: false, room: request.params.roomId.toLowerCase(), participants: room.participants });
-});
-
-app.post("/:roomId/join", (request, response) => {
+app.post("/:roomId", (request, response) => {
   rooms.addParticipant(request.params.roomId.toLowerCase(), request.fingerprint.hash, request.body.name);
-  response.redirect(`/${request.params.roomId.toLowerCase()}/join`);
+  response.redirect(`/${request.params.roomId.toLowerCase()}`);
 });
 
 server.listen(process.env.PORT, () => {
@@ -65,6 +67,17 @@ wss.on('connection', (ws, req) => {
   if (roomId.includes("/audience")) {
     roomId = roomId.replace("/audience", "");
     rooms.addAudienceWS(roomId, ws);
+
+    ws.on('message', (message) => {
+      message = JSON.parse(message);
+      if (message.type === "reset") {
+        rooms.reset(roomId);
+      }
+    });
+
+    ws.on('close', () => {
+      room.closeRoom(roomId);
+    });
   } else {
     let participant;
     ws.on('message', (message) => {

views/audience.handlebars

@@ -14,40 +14,61 @@
     </header>
 
     <main>
+      <blockquote>
+        Share this link for players to join:<br>
+        <a id="playerRoom" href=""></a>
+      </blockquote>
+
       <h2>Participants</h2>
-      
-      <div id="participants"></div>
+
+      <button id="resetBuzzers">Reset Buzzers</button>
+
+      <div id="participants">
+        No participants yet :(
+      </div>
     </main>
-    
-    
+
     <script>
-      let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}/audience`);
+      document.getElementById("playerRoom").href = window.location;
+      document.getElementById("playerRoom").innerText = window.location;
+
+      let proto = location.protocol == 'http:' ? 'ws' : 'wss'
+      let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}/audience`);
+      let buzzed;
 
       socket.onmessage = function(event) {
         let msg = JSON.parse(event.data);
         if (msg.type === "buzz") {
           beep();
-          let buzzed = document.getElementById(`p-${msg.participant.participantId}`);
+          buzzed = document.getElementById(`p-${msg.participant.participantId}`);
           buzzed.classList.add('buzzed');
-          setTimeout(() => buzzed.classList.remove('buzzed'), 5000)
         } else if (msg.type === "participants") {
           let participantContainer = document.getElementById('participants');
-          let contents = '';
-          msg.participants.forEach(p => {
-            contents += `
-              <figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
-                <img src="${p.character}" />
-                <figcaption>${p.participantName}</figcaption>
-              </figure>
-            `;
-          });
-          participantContainer.innerHTML = contents;
+          if (msg.participants.length) {
+            let contents = '';
+            msg.participants.forEach(p => {
+              contents += `
+                <figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
+                  <img src="${p.character}" />
+                  <figcaption>${p.participantName}</figcaption>
+                </figure>
+              `;
+            });
+            participantContainer.innerHTML = contents;
+          }
         }
       };
-      
+
       function beep() {
         window.navigator.vibrate(500);
       }
+
+      document.getElementById('resetBuzzers').addEventListener('click', function() {
+        socket.send(JSON.stringify({
+          type: "reset"
+        }));
+        buzzed.classList.remove('buzzed');
+      })
     </script>
   </body>
 </html>

views/index.handlebars

@@ -10,16 +10,13 @@
   </head>
   <body>
     <header>
-      <h1>Join room</h1>
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAADuUlEQVRoge2YW2hcVRSGv31ym2YyoraasanFEWtaQW0StAYRB2JRFAKCpm1C6c0bSCg++dKHWH32QX0Sq7QkLZlSxcubUGpS0Je0RtJipZnElIIWhlDmkrn1LB9mjMnkzLnMnDO2MN/LMGuvtde/zl57nz0DderUuaNRbk0ku0JPguoD9QxIJ/Ag0FYcTgALoP5Ayc+InFXjc9Nu5K2qAOnvDODLvoXSDoFscxh+GTiGvu5zdfpSolINFRUg4XAjwYVhhCPAvZUmLyiQGKI+4u/Nn6lz5/KOw50GyJ6HtqJrp4DtTmMtZr6Izh51eu6KkyhHBcjuUD+ixvivt1fzaDfseAm2dMGGjdB2N0RnYGSX3RRxRIZUZO57uwGNdh1ld2gvor40jXn/GPjvsjulEQGU+loGQgdUZG7UToCtFSg++TOUiu/pg3wOpicK35/th/s2wew0XL8KiZuQTTsroUAeeFWNR3+wcrQsQAYf3sItpoDAsrGhAfaPwM5BSMXhoMvboUACTX9KnZr/3cxJMxuUcLiRW0QoFX/404L4bBq++sAduWtpQ9fGJBw2bXPTAgguDFN62uwfgadfhORNODoIk99UK9SMbtoX3jVzKNtCsrfdT9Y/D2xYNva+Aoc/KTz5o0Nw9VfXlJZXKDFSzSH13ZW40XD5Fci0vsNK8QD7jhQ+j39YG/EAotazLvdmueHy/VW4Hqy2nf8WtAY4O+6aPpscAj42GjBsoeLFrEaP2C7qcTU+O1NqNW4h4QXP9ThG+oysxgUobYenWipCeo2sZTaxbPVSSmWoTiNrmRWQjZ5qqYxNRsYye0AFDO3/L4aa7F3mzvAAOvNAs5uKTMghhNQA160cza8S/6LzNrUTD9CEouzLayXWt9EIzSj+BIJVy3LGDfxsVi+TMXOyXgGNAWovHuB+krxm5WRdgDDsipzKeM/Kwfgqcbn0EnR7oB5bq9feJr6Nsf2j3gkXoh1EfnmC2b/WA/BIMMbrvb/RHbI8FR3jeguNTnRxYqLHcGzf81MMPXex0qm9b6GpaAcnJnoQIJNKkFiMEV+MkU4lEeD4Tz1ciHa4mdLdAkYnuwHIpJJklpbQdR3RdbJLKTKpZNGny82U7hSQzjUyNtnFpWvtAOQza/8LyqULtplrQU6e304m7872M9wDOwffqOoYjS/GEF1fnUhrIHBPdf8D/3jyi9oco00tPgNbixepvDlGW1r9AOSKrdTU4lu2uY0nBSjA1+rH55Holdzxb+J6AXXq1KlTFf8AtEULoLOzQvEAAAAASUVORK5CYII=" />
+      <h1>Buzzers</h1>
     </header>
 
     <main>
-      <h2>Oh hi!</h2>
+      <h2>Create or join a game room</h2>
 
-      <p>
-        Create or join a room
-      </p>
-      
       <form>
         <label>
           Room ID
@@ -28,13 +25,12 @@
         <button type="submit" id="submit-name">Submit</button>
       </form>
     </main>
-    
+
     <script>
     document.querySelector('form').addEventListener('submit', function(event) {
       event.preventDefault();
       let roomId = document.getElementById('roomId').value;
-      window.location = `//${window.location.host}/${roomId}/join`;
-      
+      window.location = `//${window.location.host}/${roomId}`;
     });
     </script>
   </body>

views/join.handlebars

@@ -10,13 +10,11 @@
   </head>
   <body>
     <header>
-      <h1>Join {{room}}</h1>
+      <h1>Join '{{room}}'</h1>
     </header>
 
     <main>
-      <h2>Oh hi,</h2>
-
-      <p>Tell me your (team) name:</p>
+      <h2>Please tell me your (team) name:</h2>
 
       <form method="POST">
         <label>
@@ -25,10 +23,6 @@
         </label>
         <button type="submit" id="submit-name">Submit</button>
       </form>
-      
-      <p>
-        <a href="/{{room}}/audience">Join the audience</a>
-      </p>
     </main>
   </body>
 </html>

views/room.handlebars

@@ -14,19 +14,20 @@
     </header>
 
     <main>
-      <h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
-  
+      <h2>{{name}} <img src="{{character}}"/></h2>
+
       <button id="buzzer">
         BUZZ
       </button>
     </main>
-    
+
     <div id="messageBox" class="hide">
-      
+
     </div>
-    
+
     <script>
-      let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`);
+      let proto = location.protocol == 'http:' ? 'ws' : 'wss'
+      let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}`);
 
       socket.onopen = function(e) {
         socket.send(JSON.stringify({
@@ -42,35 +43,51 @@
         let msg = JSON.parse(event.data);
         if (msg.type === "buzz") {
           showMessage(msg.msg);
+        } else if (msg.type === "reset") {
+          reset();
+        } else if (msg.type === "close") {
+          roomClosed();
         }
       };
-      
+
       document.getElementById('buzzer').addEventListener('touchstart', function() {
         beep();
-        socket.send(JSON.stringify({ 
-          type: "buzz" 
+        socket.send(JSON.stringify({
+          type: "buzz"
         }));
+        document.getElementById('buzzer').classList.add('active');
       });
-      
+
       document.getElementById('buzzer').addEventListener('mousedown', function() {
         beep();
-        socket.send(JSON.stringify({ 
-          type: "buzz" 
+        socket.send(JSON.stringify({
+          type: "buzz"
         }));
+        document.getElementById('buzzer').classList.add('active');
       });
-      
+
       function showMessage(msg) {
         window.navigator.vibrate(500);
         document.getElementById('buzzer').disabled = true;
         let mb = document.getElementById('messageBox');
         mb.innerHTML = msg;
         mb.classList.remove('hide');
-        setTimeout(() => {
-          document.getElementById('buzzer').disabled = false;
-          mb.classList.add('hide');
-        }, 5000)
       }
-      
+
+      function reset() {
+        document.getElementById('buzzer').disabled = false;
+        document.getElementById('buzzer').classList.remove('active');
+        let mb = document.getElementById('messageBox');
+        mb.classList.add('hide');
+      }
+
+      function roomClosed() {
+        document.getElementById('buzzer').disabled = true;
+        let mb = document.getElementById('messageBox');
+        mb.innerHTML = "Room closed";
+        mb.classList.remove('hide');
+      }
+
       function beep() {
         window.navigator.vibrate(500);
       }