From 889ede96ca5bd1c743450fdefb23e94fc6e56184 Mon Sep 17 00:00:00 2001 From: and94x Date: Sun, 4 Dec 2022 17:32:31 +0100 Subject: [PATCH 1/2] moar stuff --- index.html | 10 +++--- script.js | 76 ++++++++++++++++++++++++++++++++------------ style.css | 93 +++++++++++++++++++++++++++++++++++++++++------------- 3 files changed, 131 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 41d4549..511bfee 100644 --- a/index.html +++ b/index.html @@ -55,11 +55,11 @@

Seeed: 📋

-
B
-
I
-
N
-
G
-
O
+

B

+

I

+

N

+

G

+

O

diff --git a/script.js b/script.js index 31a3d1c..b0b9d00 100644 --- a/script.js +++ b/script.js @@ -66,14 +66,18 @@ let fields = [ let seed; const urlParams = new URLSearchParams(window.location.search); const seed_elem = document.querySelector('#seeed-value'); -const centerFieldImage = document.querySelector('#center-field-image'); +const allFields = document.querySelectorAll('#bingo td'); const bingoFields = document.querySelectorAll('#bingo td.bingo-field'); +const centerFieldImage = document.querySelector('#center-field-image'); const refreshBingoButton = document.querySelector('#refresh-bingo'); const copyPermalinkButton = document.querySelector('#copy-permalink'); const winnerMessage = document.querySelector('#winner-message'); - centerFieldImage.src = "img/7-vs-wild-logo.svg"; centerFieldImage.alt = "7 vs. Wild Logo"; +centerFieldImage.parentElement.addEventListener('contextmenu', ev => { + ev.preventDefault(); + centerFieldImage.parentElement.classList.remove('bingo'); +}); /** * Reads the seed from URL Parameter or generates new seed @@ -110,47 +114,71 @@ const checkForBingo = (field) => { let clickedCol = parseInt(field.dataset.col); //check horizontal and vertical axis - if (document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).length === 5 - || document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).length === 5) { - bingo = true + if (document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).length === 5) { + document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).forEach(elem => elem.classList.add('bingo')); + bingo = true; + } else { + } + + if (document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).length === 5) { + document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).forEach(elem => elem.classList.add('bingo')); + bingo = true; + } else { } //check diagonal axis if (clickedRow === clickedCol) { if ( - document.querySelector(`#bingo td.bingo-field.drawn[data-row="0"][data-col="0"]`) && - document.querySelector(`#bingo td.bingo-field.drawn[data-row="1"][data-col="1"]`) && - document.querySelector(`#bingo td.bingo-field.drawn[data-row="3"][data-col="3"]`) && - document.querySelector(`#bingo td.bingo-field.drawn[data-row="4"][data-col="4"]`) + document.querySelector(`#bingo td.drawn[data-row="0"][data-col="0"]`) && + document.querySelector(`#bingo td.drawn[data-row="1"][data-col="1"]`) && + document.querySelector(`#bingo td.drawn[data-row="3"][data-col="3"]`) && + document.querySelector(`#bingo td.drawn[data-row="4"][data-col="4"]`) ) { + document.querySelector(`#bingo td.drawn[data-row="0"][data-col="0"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="1"][data-col="1"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="2"][data-col="2"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="3"][data-col="3"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="4"][data-col="4"]`).classList.add('bingo'); bingo = true; } } else if (clickedRow + clickedCol === 4) { if ( - document.querySelector(`#bingo td.bingo-field.drawn[data-row="0"][data-col="4"]`) && - document.querySelector(`#bingo td.bingo-field.drawn[data-row="1"][data-col="3"]`) && - document.querySelector(`#bingo td.bingo-field.drawn[data-row="3"][data-col="1"]`) && - document.querySelector(`#bingo td.bingo-field.drawn[data-row="4"][data-col="0"]`) + document.querySelector(`#bingo td.drawn[data-row="0"][data-col="4"]`) && + document.querySelector(`#bingo td.drawn[data-row="1"][data-col="3"]`) && + document.querySelector(`#bingo td.drawn[data-row="3"][data-col="1"]`) && + document.querySelector(`#bingo td.drawn[data-row="4"][data-col="0"]`) ) { + document.querySelector(`#bingo td.drawn[data-row="0"][data-col="4"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="1"][data-col="3"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="2"][data-col="2"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="3"][data-col="1"]`).classList.add('bingo'); + document.querySelector(`#bingo td.drawn[data-row="4"][data-col="0"]`).classList.add('bingo'); bingo = true; } } + if (bingo) { + winnerMessage.classList.remove('won'); window.fireworks.start(); winnerMessage.classList.add('won'); } - }; const drawBingoFieldEventHandler = (ev) => { + let field = ev.target; + if (field && !field.classList.contains('drawn')) { + field.classList.add('drawn'); + checkForBingo(field); + } else { + console.error('Sum ting wong (* ￣︿￣)'); + } +}; +const undrawBingoFieldEventHandler = (ev) => { + ev.preventDefault(); let field = ev.target; if (field) { - if (field.classList.contains('drawn')) { - field.classList.remove('drawn'); - } else { - field.classList.add('drawn'); - checkForBingo(field); - } + field.classList.remove('drawn'); + field.classList.remove('bingo'); } else { console.error('Sum ting wong (* ￣︿￣)'); } @@ -160,6 +188,7 @@ const drawTable = () => { shuffleBoard().forEach((field, index) => { bingoFields[index].textContent = field; bingoFields[index].addEventListener('click', drawBingoFieldEventHandler); + bingoFields[index].addEventListener('contextmenu', undrawBingoFieldEventHandler); }); seed_elem.innerText = seed; @@ -216,7 +245,12 @@ drawTable(); const redrawTable = function () { winnerMessage.classList.remove('won'); - bingoFields.forEach(elem => elem.classList.remove('drawn')); + allFields.forEach(elem => { + elem.classList.remove('bingo'); + }); + bingoFields.forEach(elem => { + elem.classList.remove('drawn'); + }); seed = Date.now().toString(); drawTable(); } diff --git a/style.css b/style.css index d88e631..b78249a 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ +/* HTML Selectors */ body { font-family: monospace; height: 95vh; @@ -17,6 +18,10 @@ table { table-layout: fixed; } +canvas { + pointer-events: none; +} + td { text-align: center; height: calc(100vh / 6); @@ -25,30 +30,37 @@ td { font-size: xx-large; } -canvas { - pointer-events: none; +h1, p { + text-align: center; + margin: 5px; } +/* Specific selectors */ + td:hover { - background-color: blueviolet; + background-color: gray; } td.drawn { - background-color: green; + background-color: cornflowerblue; + text-decoration: line-through; } -td.center-field { +td.drawn:hover { + background-color: cadetblue; +} + +td.drawn.bingo { background-color: green; } -img { - max-height: calc(100vh / 6); - max-width: calc(100vh / 6); +td.drawn.bingo:hover { + background-color: darkgreen; } -h1, p { - text-align: center; - margin: 5px; +img#center-field-image { + max-height: calc(100vh / 6); + max-width: calc(100vh / 6); } p#seeed { @@ -59,21 +71,58 @@ span#copy-permalink, span#refresh-bingo { cursor: pointer; } -#winner-message { +div#winner-message { display: flex; position: fixed; font-size: 3000%; - left: 50%; - top: 100%; - transform: translate(-50%, 0); - text-shadow: 10px 10px 20px black; - color: orange; + text-shadow: 0 0 40px white; transition: all ease-out .75s; pointer-events: none; } -#winner-message.won { - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} \ No newline at end of file +div#winner-message.won { + animation: won 5s; + animation-timing-function: ease-in-out; +} + +@keyframes won { + 0% { + left: 50%; + top: 100%; + transform: translate(-50%, 0); + color: green; + } + + 20% { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + opacity: 100%; + color: yellow; + } + + 40% { + color: orange; + } + + 50% { + left: 50%; + top: 50%; + } + + 60% { + color: purple; + } + + 80% { + color: blue; + opacity: 100%; + } + + 100% { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + opacity: 0; + } +} From be6fba1e5eed0e7526faaa3e0d6df1a4ca782685 Mon Sep 17 00:00:00 2001 From: Felix Pankratz Date: Sun, 11 Dec 2022 13:57:50 +0100 Subject: [PATCH 2/2] fix typo Sasha -> Sascha --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index b0b9d00..27619bf 100644 --- a/script.js +++ b/script.js @@ -37,7 +37,7 @@ let fields = [ '"Ich frag mich, wie es den anderen so geht"', 'Kleidung ist feucht/nass', 'Joris verwirft seinen Tagesplan', - 'Sasha flext für die Kamera', + 'Sascha flext für die Kamera', '"Bist du deppert?"', 'Sonnenbrand', '7 in the wild',