❄️🌿 Checkpoint

./server.js:530995/89
./views/room.handlebars:530995/664
./public/style.css:530995/706
./room.js:530995/22

public/style.css

@@ -68,12 +68,18 @@ footer {
   font-size: 4em;
   color: white;
   text-shadow: 2px 2px 2px black;
+  outline: none;
 }
 
 #buzzer:active {
   box-shadow: inset 4px 4px 4px rgba(0,0,0,.5);
 }
 
+#buzzer:disabled {
+  filter: grayscale(50%);
+  opacity: .5;
+}
+
 h2 img {
   max-height: 40px;
 }
@@ -125,12 +131,17 @@ figure.participant figcaption {
   height:100px;
   background: #bbbbf2;
   border: 3px solid black;
+  font-size: 1.3em;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
 }
 
 #messageBox img {
-  max-height: 90%;
+  max-height: 50%;
 }
 
-.hide {
+#messageBox.hide {
   display: none;
 }

room.js

@@ -57,7 +57,7 @@ function buzz(roomId, participant) {
       p.ws.send(JSON.stringify({
         type: "buzz",
         participant: participant.participantName,
-        msg: `<img src="${participant.character}"> ${participant.participantName} buzzed!`
+        msg: `<img src="${participant.character}"><div>${participant.participantName} buzzed!</div>`
       }));
     }
   });

server.js

@@ -83,7 +83,6 @@ wss.on('connection', (ws, req) => {
       if (message.type === "join") {
         participant = message.data;
         rooms.addParticipantWS(roomId, participant.participantId, ws)
-        ws.send('Joined as ' + participant.participantName);
       }
       if (message.type === "buzz") {
         console.log(`${participant.participantName} buzzed!`)
@@ -91,7 +90,4 @@ wss.on('connection', (ws, req) => {
       }
     });
   }
-  
-
-  ws.send('Connected');
 });

views/room.handlebars

@@ -53,11 +53,19 @@
         }));
       });
       
+      document.getElementById('buzzer').addEventListener('mousedown', function() {
+        socket.send(JSON.stringify({ 
+          type: "buzz" 
+        }));
+      });
+      
       function showMessage(msg) {
+        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)
       }