🔑🏏 Checkpoint

./public/style.css:530995/304
./views/room.handlebars:530995/22
./room.js:530995/139

public/style.css

@@ -114,4 +114,23 @@ figure.participant figcaption {
   40%, 60% {
     transform: scale(1.3) rotate(30deg);
   }
+}
+
+#messageBox {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height:100px;
+  background: #bbbbf2;
+  border: 3px solid black;
+}
+
+#messageBox img {
+  max-height: 90%;
+}
+
+.hide {
+  display: none;
 }

room.js

@@ -50,6 +50,8 @@ function addAudienceWS(roomId, ws) {
 
 function buzz(roomId, participant) {
   let room = getOrCreateRoom(roomId);
+  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({

views/room.handlebars

@@ -23,7 +23,7 @@
       </button>
     </main>
     
-    <div id="messageBox">
+    <div id="messageBox" class="hide">
       
     </div>
     
@@ -53,7 +53,7 @@
         }));
       });
       
-      showMessage(msg) {
+      function showMessage(msg) {
         let mb = document.getElementById('messageBox');
         mb.innerHTML = msg;
         mb.classList.remove('hide');