From 93b4bbe4ed7b29f29f7c9b7d21b8e8372cd01bbd Mon Sep 17 00:00:00 2001 From: "Glitch (hello-express)" Date: Thu, 9 Apr 2020 11:40:21 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=97=F0=9F=90=84=20Checkpoint=20./publi?= =?UTF-8?q?c/style.css:530995/411=20./views/room.handlebars:530995/42=20./?= =?UTF-8?q?server.js:530995/182=20./views/index.handlebars:530995/1364?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/style.css | 15 ++++++++++----- server.js | 5 +++++ views/index.handlebars | 39 +++++++++++++++++++++++++++++++++++++++ views/room.handlebars | 8 +++++--- 4 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 views/index.handlebars diff --git a/public/style.css b/public/style.css index db92fa4..61623ab 100644 --- a/public/style.css +++ b/public/style.css @@ -8,12 +8,12 @@ body { font-family: sans-serif; margin: 2em 1em; line-height: 1.5em; + text-align: center; } h1 { font-style: italic; color: #373fff; - max-width: calc(100% - 5rem); line-height: 1.1; } @@ -23,6 +23,7 @@ form { grid-gap: 1em; padding: 1em; max-width: 40ch; + margin: 0 auto; } input { @@ -42,7 +43,6 @@ form button { font-size: inherit; line-height: 1.4em; padding: 0.25em 1em; - max-width: 20ch; } form button:hover { @@ -56,9 +56,14 @@ footer { } #buzzer { - width: 90vw; - height: 90vh; + width: 500px; + height: 500px; margin: 0 auto; - border-radius: 100%; + border-radius: 500px; background: red; + border: 4px solid black; + box-shadow: 4px 4px 4px rgba(0,0,0,.5); + font-size: 4em; + color: white; + text-shadow: 2px 2px 2px black; } \ No newline at end of file diff --git a/server.js b/server.js index de54f5f..cef15fb 100644 --- a/server.js +++ b/server.js @@ -28,6 +28,10 @@ app.set('view engine', 'handlebars'); app.use(express.static("public")); +app.get("/", (request, response) => { + response.render('index', { layout: false }); +}); + app.get("/:roomId/join", (request, response) => { let room = rooms.getOrCreateRoom(request.params.roomId); @@ -67,6 +71,7 @@ wss.on('connection', (ws, req) => { } if (message.type === "buzz") { // TODO: Handle Buzzer + console.log(`${participant.participantName} buzzed!`) } }); diff --git a/views/index.handlebars b/views/index.handlebars new file mode 100644 index 0000000..a49a6d4 --- /dev/null +++ b/views/index.handlebars @@ -0,0 +1,39 @@ + + + + + Buzzer + + + + + + + + +
+

Join room

+
+ +
+

Oh hi,

+ +
+ + +
+
+ + + + diff --git a/views/room.handlebars b/views/room.handlebars index b2204ca..1d43f64 100644 --- a/views/room.handlebars +++ b/views/room.handlebars @@ -37,15 +37,17 @@ }; socket.onmessage = function(event) { - console.log(event.message); + console.log(event); }; socket.onerror = function(error) { alert(`[error] ${error.message}`); }; - document.getElementById('buzzer').addEventListener('mousedown', function() { - socket.send(JSON.stringify({ type: "buzz" })); + document.getElementById('buzzer').addEventListener('click', function() { + socket.send(JSON.stringify({ + type: "buzz" + })); });