diff --git a/public/style.css b/public/style.css
index 2d1bca2..cd80b2c 100644
--- a/public/style.css
+++ b/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;
}
\ No newline at end of file
diff --git a/room.js b/room.js
index 28f5423..88590f1 100644
--- a/room.js
+++ b/room.js
@@ -57,7 +57,7 @@ function buzz(roomId, participant) {
p.ws.send(JSON.stringify({
type: "buzz",
participant: participant.participantName,
- msg: ` ${participant.participantName} buzzed!`
+ msg: `
${participant.participantName} buzzed!
`
}));
}
});
diff --git a/server.js b/server.js
index 6b69358..fd964fa 100644
--- a/server.js
+++ b/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');
});
\ No newline at end of file
diff --git a/views/room.handlebars b/views/room.handlebars
index aea5519..5e39ec0 100644
--- a/views/room.handlebars
+++ b/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)
}