public/build/bundle.css

@@ -1 +0,0 @@
-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,6 +10,7 @@ body {
 }
 
 h1 {
+  font-style: italic;
   color: #373fff;
   line-height: 1.1;
 }
@@ -21,30 +22,22 @@ 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%;
 }
 
-button {
+form button {
   background-color: #bbbbf2;
   border: 2px solid currentColor;
   border-radius: .25em;
@@ -64,20 +57,6 @@ 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;
@@ -94,11 +73,6 @@ blockquote a {
   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);
 }
@@ -175,7 +149,3 @@ figure.participant figcaption {
 #messageBox.hide {
   display: none;
 }
-
-#participants {
-  margin-top: 1em;
-}

room.js

@@ -41,9 +41,7 @@ function addParticipant(roomId, participantId, participantName) {
 
 function removeParticipant(roomId, participantId) {
   let room = getOrCreateRoom(roomId);
-  let participant = room.participants.find(p => p.participantId === participantId);
+  room.participants.find(p => p.participantId === participantId).active = false;
-  if (participant) {
-    participant.active = false;
   room.audience.forEach(ws => {
     ws.send(JSON.stringify({
       type: "participants",
@@ -51,13 +49,10 @@ function removeParticipant(roomId, participantId) {
     }));
   });
 }
-}
 
 function addParticipantWS(roomId, participantId, ws) {
   let room = getOrCreateRoom(roomId);
-  let participant = room.participants.find(p => p.participantId === participantId);
+  room.participants.find(p => p.participantId === participantId).ws = ws;
-  if (participant) {
-    participant.ws = ws;
   room.audience.forEach(ws => {
     ws.send(JSON.stringify({
       type: "participants",
@@ -65,7 +60,6 @@ function addParticipantWS(roomId, participantId, ws) {
     }));
   });
 }
-}
 
 function addAudienceWS(roomId, ws) {
   let room = getOrCreateRoom(roomId);
@@ -80,10 +74,10 @@ 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);
 
-    if (participant) {
     room.participants.forEach(p => {
       if (p.ws && p.participantId !== participant.participantId) {
         p.ws.send(JSON.stringify({
@@ -101,32 +95,5 @@ function buzz(roomId, participant) {
     }); 
   }
 }
-}
 
-function reset(roomId) {
+module.exports = {getOrCreateRoom, addParticipant, addParticipantWS, addAudienceWS, buzz, removeParticipant}
-  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,7 +6,6 @@ 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);
@@ -26,33 +25,32 @@ app.get("/", (request, response) => {
   });
 });
 
-app.get("/:roomId", (request, response) => {
+app.get("/:roomId/join", (request, response) => {
-  let room = rooms.getOrCreateRoom(request.params.roomId.trim().toLowerCase());
+  let room = rooms.getOrCreateRoom(request.params.roomId.toLowerCase());
   let participant = room.participants.find(p => p.participantId === request.fingerprint.hash);
 
-  if (room.audience.length === 0) {
+  if (participant) {
-    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.trim().toLowerCase(),
+      room: request.params.roomId.toLowerCase(),
       name: participant.participantName,
       participantName: participant.participantName,
       participantId: participant.participantId,
       character: participant.character,
     });
   } else {
-    response.render('join', {layout: false, room: request.params.roomId.trim().toLowerCase()});
+    response.render('join', {layout: false, room: request.params.roomId.toLowerCase()});
   }
 });
 
-app.post("/:roomId", (request, response) => {
+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) => {
   rooms.addParticipant(request.params.roomId.toLowerCase(), request.fingerprint.hash, request.body.name);
-  response.redirect(`/${request.params.roomId.toLowerCase()}`);
+  response.redirect(`/${request.params.roomId.toLowerCase()}/join`);
 });
 
 server.listen(process.env.PORT, () => {
@@ -67,17 +65,6 @@ 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,37 +14,24 @@
     </header>
 
     <main>
-      <blockquote>
-        Share this link for players to join:<br>
-        <a id="playerRoom" href=""></a>
-      </blockquote>
-
       <h2>Participants</h2>
       
-      <button id="resetBuzzers">Reset Buzzers</button>
+      <div id="participants"></div>
-
-      <div id="participants">
-        No participants yet :(
-      </div>
     </main>
     
-    <script>
-      document.getElementById("playerRoom").href = window.location;
-      document.getElementById("playerRoom").innerText = window.location;
     
-      let proto = location.protocol == 'http:' ? 'ws' : 'wss'
+    <script>
-      let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}/audience`);
+      let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}/audience`);
-      let buzzed;
 
       socket.onmessage = function(event) {
         let msg = JSON.parse(event.data);
         if (msg.type === "buzz") {
           beep();
-          buzzed = document.getElementById(`p-${msg.participant.participantId}`);
+          let 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');
-          if (msg.participants.length) {
           let contents = '';
           msg.participants.forEach(p => {
             contents += `
@@ -56,19 +43,11 @@
           });
           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,12 +10,15 @@
   </head>
   <body>
     <header>
-      <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>Join room</h1>
-      <h1>Buzzers</h1>
     </header>
 
     <main>
-      <h2>Create or join a game room</h2>
+      <h2>Oh hi!</h2>
+
+      <p>
+        Create or join a room
+      </p>
       
       <form>
         <label>
@@ -30,7 +33,8 @@
     document.querySelector('form').addEventListener('submit', function(event) {
       event.preventDefault();
       let roomId = document.getElementById('roomId').value;
-      window.location = `//${window.location.host}/${roomId}`;
+      window.location = `//${window.location.host}/${roomId}/join`;
+      
     });
     </script>
   </body>

views/join.handlebars

@@ -10,11 +10,13 @@
   </head>
   <body>
     <header>
-      <h1>Join '{{room}}'</h1>
+      <h1>Join {{room}}</h1>
     </header>
 
     <main>
-      <h2>Please tell me your (team) name:</h2>
+      <h2>Oh hi,</h2>
+
+      <p>Tell me your (team) name:</p>
 
       <form method="POST">
         <label>
@@ -23,6 +25,10 @@
         </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,7 +14,7 @@
     </header>
 
     <main>
-      <h2>{{name}} <img src="{{character}}"/></h2>
+      <h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
   
       <button id="buzzer">
         BUZZ
@@ -26,8 +26,7 @@
     </div>
     
     <script>
-      let proto = location.protocol == 'http:' ? 'ws' : 'wss'
+      let socket = new WebSocket(`wss://${window.location.hostname}/{{room}}`);
-      let socket = new WebSocket(`${proto}://${window.location.hostname}:${window.location.port}/{{room}}`);
 
       socket.onopen = function(e) {
         socket.send(JSON.stringify({
@@ -43,10 +42,6 @@
         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();
         }
       };
       
@@ -55,7 +50,6 @@
         socket.send(JSON.stringify({ 
           type: "buzz" 
         }));
-        document.getElementById('buzzer').classList.add('active');
       });
       
       document.getElementById('buzzer').addEventListener('mousedown', function() {
@@ -63,7 +57,6 @@
         socket.send(JSON.stringify({ 
           type: "buzz" 
         }));
-        document.getElementById('buzzer').classList.add('active');
       });
       
       function showMessage(msg) {
@@ -72,20 +65,10 @@
         let mb = document.getElementById('messageBox');
         mb.innerHTML = msg;
         mb.classList.remove('hide');
-      }
+        setTimeout(() => {
-
-      function reset() {
           document.getElementById('buzzer').disabled = false;
-        document.getElementById('buzzer').classList.remove('active');
-        let mb = document.getElementById('messageBox');
           mb.classList.add('hide');
-      }
+        }, 5000)
-
-      function roomClosed() {
-        document.getElementById('buzzer').disabled = true;
-        let mb = document.getElementById('messageBox');
-        mb.innerHTML = "Room closed";
-        mb.classList.remove('hide');
       }
       
       function beep() {