special 37c3 update (more firework less bingo)
This commit is contained in:
parent
3fb66302b1
commit
0c066444d2
@ -11,12 +11,12 @@ var canvas = null,
|
|||||||
ctx = null,
|
ctx = null,
|
||||||
cw = window.innerWidth,
|
cw = window.innerWidth,
|
||||||
ch = window.innerHeight,
|
ch = window.innerHeight,
|
||||||
fireworksLimit = 10,
|
fireworksLimit = 15,
|
||||||
fireworksShown = 0,
|
fireworksShown = 0,
|
||||||
fireworks = [],
|
fireworks = [],
|
||||||
particles = [],
|
particles = [],
|
||||||
hue = 120,
|
hue = 180,
|
||||||
timerTotal = 25,
|
timerTotal = 10,
|
||||||
timerTick = 0,
|
timerTick = 0,
|
||||||
animationEnd = true;
|
animationEnd = true;
|
||||||
|
|
||||||
|
@ -54,12 +54,6 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
|
<p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
|
||||||
<div id="winner-message">
|
<div id="winner-message"></div>
|
||||||
<p>B</p>
|
|
||||||
<p>I</p>
|
|
||||||
<p>N</p>
|
|
||||||
<p>G</p>
|
|
||||||
<p>O</p>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -33,7 +33,6 @@ const bingoFields = document.querySelectorAll('#bingo td.bingo-field');
|
|||||||
const centerFieldImage = document.querySelector('#center-field-image');
|
const centerFieldImage = document.querySelector('#center-field-image');
|
||||||
const refreshBingoButton = document.querySelector('#refresh-bingo');
|
const refreshBingoButton = document.querySelector('#refresh-bingo');
|
||||||
const copyPermalinkButton = document.querySelector('#copy-permalink');
|
const copyPermalinkButton = document.querySelector('#copy-permalink');
|
||||||
const winnerMessage = document.querySelector('#winner-message');
|
|
||||||
centerFieldImage.src = "img/logo.svg"
|
centerFieldImage.src = "img/logo.svg"
|
||||||
centerFieldImage.alt = "37C3 Logo";
|
centerFieldImage.alt = "37C3 Logo";
|
||||||
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
|
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
|
||||||
@ -120,9 +119,7 @@ const checkForBingo = (field) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (bingo) {
|
if (bingo) {
|
||||||
winnerMessage.classList.remove('won');
|
|
||||||
window.fireworks.start();
|
window.fireworks.start();
|
||||||
winnerMessage.classList.add('won');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
@ -206,7 +203,6 @@ drawTable();
|
|||||||
|
|
||||||
|
|
||||||
const redrawTable = function () {
|
const redrawTable = function () {
|
||||||
winnerMessage.classList.remove('won');
|
|
||||||
allFields.forEach(elem => {
|
allFields.forEach(elem => {
|
||||||
elem.classList.remove('bingo');
|
elem.classList.remove('bingo');
|
||||||
});
|
});
|
||||||
|
26
style.css
26
style.css
@ -131,20 +131,6 @@ span#copy-permalink, span#refresh-bingo {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#winner-message {
|
|
||||||
display: flex;
|
|
||||||
position: fixed;
|
|
||||||
font-size: xx-large;
|
|
||||||
text-shadow: 0 0 40px white;
|
|
||||||
transition: all ease-out .75s;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#winner-message.won {
|
|
||||||
animation: won 5s;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes won {
|
@keyframes won {
|
||||||
0% {
|
0% {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -191,22 +177,10 @@ div#winner-message.won {
|
|||||||
td {
|
td {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
}
|
}
|
||||||
div#winner-message.won {
|
|
||||||
animation: unset;
|
|
||||||
}
|
|
||||||
div#winner-message {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 576px) and (orientation: portrait) {
|
@media screen and (max-width: 576px) and (orientation: portrait) {
|
||||||
td {
|
td {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
div#winner-message.won {
|
|
||||||
animation: unset;
|
|
||||||
}
|
|
||||||
div#winner-message {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user