AverageMarcus
/
buzzers
1
0
Fork 0
Code Issues Pull Requests Releases Activity

🐗🐄 Checkpoint 

./public/style.css:530995/411
./views/room.handlebars:530995/42
./server.js:530995/182
./views/index.handlebars:530995/1364
This commit is contained in:
Glitch (hello-express) 2020-04-09 11:40:21 +00:00
parent 385214f520
commit 93b4bbe4ed
4 changed files with 59 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/style.css
View File

@ -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;
}

5
server.js
View File

@ -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!`)
}
});

39
views/index.handlebars Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buzzer</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A cool thing made with Glitch">
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
</head>
<body>
<header>
<h1>Join room</h1>
</header>
<main>
<h2>Oh hi,</h2>
<form>
<label>
Room ID
<input id="roomId" name="roomId" type="text" maxlength="100" required>
</label>
<button type="submit" id="submit-name">Submit</button>
</form>
</main>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
let roomId = document.getElementById('roomId').value;
window.location = `//${window.location.host}/${roomId}/join`;
});
</script>
</body>
</html>

8
views/room.handlebars
View File

@ -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"
}));
});
</script>
</body>