🎩😽 Checkpoint

./public/style.css:530995/181
./views/room.handlebars:530995/703
./room.js:530995/49

public/style.css

@@ -56,8 +56,8 @@ footer {
 }
 
 #buzzer {
-  width: 500px;
-  height: 500px;
+  width: 95vw;
+  height: 95vw;
   margin: 0 auto;
   border-radius: 500px;
   background: red;
@@ -78,6 +78,7 @@ h2 img {
 
 figure.participant {
   display: inline-block;
+  transition: ease-in all .2s;
 }
 
 figure.participant img {
@@ -89,5 +90,6 @@ figure.participant figcaption {
 }
 
 .buzzed {
-  background: limegreen;
+  background: yellow;
+  transform: scale(1.3);
 }

room.js

@@ -50,7 +50,7 @@ function addAudienceWS(roomId, ws) {
 function buzz(roomId, participant) {
   let room = getOrCreateRoom(roomId);
   room.participants.forEach(p => {
-    if (p.ws) {
+    if (p.ws && p.participantId !== participant.participantId) {
       p.ws.send(JSON.stringify({
         type: "buzz",
         participant: participant.participantName

views/room.handlebars

@@ -47,7 +47,7 @@
         alert(`[error] ${error.message}`);
       };
       
-      document.getElementById('buzzer').addEventListener('click', function() {
+      document.getElementById('buzzer').addEventListener('touchstart', function() {
         socket.send(JSON.stringify({ 
           type: "buzz" 
         }));