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

Some style tweaks

This commit is contained in:
Marcus Noble 2020-11-27 18:38:56 +00:00
parent aad99975c6
commit 623b53d542
3 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/style.css
View File

@ -10,7 +10,6 @@ body {
} }
h1 { h1 {
font-style: italic;
color: #373fff; color: #373fff;
line-height: 1.1; line-height: 1.1;
} }
@ -22,6 +21,8 @@ form {
padding: 1em; padding: 1em;
max-width: 40ch; max-width: 40ch;
margin: 0 auto; margin: 0 auto;
box-shadow: grey 1px 1px 3px;
border-radius: .25em;
} }
label { label {
@ -30,6 +31,7 @@ label {
input[type=text] { input[type=text] {
text-transform: lowercase; text-transform: lowercase;
border-radius: .25em;
} }
input { input {
@ -42,7 +44,7 @@ input {
width: 100%; width: 100%;
} }
form button { button {
background-color: #bbbbf2; background-color: #bbbbf2;
border: 2px solid currentColor; border: 2px solid currentColor;
border-radius: .25em; border-radius: .25em;
@ -62,6 +64,20 @@ footer {
border-top: 1px solid lightgrey; border-top: 1px solid lightgrey;
} }
blockquote {
background-color: #eee;
display: block;
margin: 1em auto;
padding: 1em;
max-width: 40ch;
box-shadow: grey 1px 1px 3px;
border-radius: .25em;
}
blockquote a {
color: #373fff;
}
#buzzer { #buzzer {
width: 95vw; width: 95vw;
height: 95vw; height: 95vw;
@ -159,3 +175,7 @@ figure.participant figcaption {
#messageBox.hide { #messageBox.hide {
display: none; display: none;
} }
#participants {
margin-top: 1em;
}

34
views/audience.handlebars
View File

@ -14,16 +14,18 @@
</header> </header>
<main> <main>
<p> <blockquote>
Share this link for players to join:<br> Share this link for players to join:<br>
<a id="playerRoom" href=""></a> <a id="playerRoom" href=""></a>
</p> </blockquote>
<button id="resetBuzzers">Reset</button>
<h2>Participants</h2> <h2>Participants</h2>
<div id="participants"></div> <button id="resetBuzzers">Reset Buzzers</button>
<div id="participants">
No participants yet :(
</div>
</main> </main>
<script> <script>
@ -42,16 +44,18 @@
buzzed.classList.add('buzzed'); buzzed.classList.add('buzzed');
} else if (msg.type === "participants") { } else if (msg.type === "participants") {
let participantContainer = document.getElementById('participants'); let participantContainer = document.getElementById('participants');
let contents = ''; if (msg.participants.length) {
msg.participants.forEach(p => { let contents = '';
contents += ` msg.participants.forEach(p => {
<figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}"> contents += `
<img src="${p.character}" /> <figure class="participant ${!p.active ? 'hide': ''}" id="p-${p.participantId}">
<figcaption>${p.participantName}</figcaption> <img src="${p.character}" />
</figure> <figcaption>${p.participantName}</figcaption>
`; </figure>
}); `;
participantContainer.innerHTML = contents; });
participantContainer.innerHTML = contents;
}
} }
}; };

5
views/index.handlebars
View File

@ -10,11 +10,12 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Join room</h1> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAADuUlEQVRoge2YW2hcVRSGv31ym2YyoraasanFEWtaQW0StAYRB2JRFAKCpm1C6c0bSCg++dKHWH32QX0Sq7QkLZlSxcubUGpS0Je0RtJipZnElIIWhlDmkrn1LB9mjMnkzLnMnDO2MN/LMGuvtde/zl57nz0DderUuaNRbk0ku0JPguoD9QxIJ/Ag0FYcTgALoP5Ayc+InFXjc9Nu5K2qAOnvDODLvoXSDoFscxh+GTiGvu5zdfpSolINFRUg4XAjwYVhhCPAvZUmLyiQGKI+4u/Nn6lz5/KOw50GyJ6HtqJrp4DtTmMtZr6Izh51eu6KkyhHBcjuUD+ixvivt1fzaDfseAm2dMGGjdB2N0RnYGSX3RRxRIZUZO57uwGNdh1ld2gvor40jXn/GPjvsjulEQGU+loGQgdUZG7UToCtFSg++TOUiu/pg3wOpicK35/th/s2wew0XL8KiZuQTTsroUAeeFWNR3+wcrQsQAYf3sItpoDAsrGhAfaPwM5BSMXhoMvboUACTX9KnZr/3cxJMxuUcLiRW0QoFX/404L4bBq++sAduWtpQ9fGJBw2bXPTAgguDFN62uwfgadfhORNODoIk99UK9SMbtoX3jVzKNtCsrfdT9Y/D2xYNva+Aoc/KTz5o0Nw9VfXlJZXKDFSzSH13ZW40XD5Fci0vsNK8QD7jhQ+j39YG/EAotazLvdmueHy/VW4Hqy2nf8WtAY4O+6aPpscAj42GjBsoeLFrEaP2C7qcTU+O1NqNW4h4QXP9ThG+oysxgUobYenWipCeo2sZTaxbPVSSmWoTiNrmRWQjZ5qqYxNRsYye0AFDO3/L4aa7F3mzvAAOvNAs5uKTMghhNQA160cza8S/6LzNrUTD9CEouzLayXWt9EIzSj+BIJVy3LGDfxsVi+TMXOyXgGNAWovHuB+krxm5WRdgDDsipzKeM/Kwfgqcbn0EnR7oB5bq9feJr6Nsf2j3gkXoh1EfnmC2b/WA/BIMMbrvb/RHbI8FR3jeguNTnRxYqLHcGzf81MMPXex0qm9b6GpaAcnJnoQIJNKkFiMEV+MkU4lEeD4Tz1ciHa4mdLdAkYnuwHIpJJklpbQdR3RdbJLKTKpZNGny82U7hSQzjUyNtnFpWvtAOQza/8LyqULtplrQU6e304m7872M9wDOwffqOoYjS/GEF1fnUhrIHBPdf8D/3jyi9oco00tPgNbixepvDlGW1r9AOSKrdTU4lu2uY0nBSjA1+rH55Holdzxb+J6AXXq1KlTFf8AtEULoLOzQvEAAAAASUVORK5CYII=" />
<h1>Buzzers</h1>
</header> </header>
<main> <main>
<h2>Create or join a room</h2> <h2>Create or join a game room</h2>
<form> <form>
<label> <label>