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) }