From 56c458aac5253150cc5dbbd446b14b8c69f6b37d Mon Sep 17 00:00:00 2001
From: and94x <andreas@muelhau.pt>
Date: Sat, 3 Dec 2022 15:08:13 +0100
Subject: [PATCH] bugfix and more celebrations

---
 index.html |  7 +++++++
 script.js  |  7 +++++--
 style.css  | 23 +++++++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 27cb6ad..41d4549 100644
--- a/index.html
+++ b/index.html
@@ -54,5 +54,12 @@
     </tr>
 </table>
 <p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
+<div id="winner-message">
+    <div>B</div>
+    <div>I</div>
+    <div>N</div>
+    <div>G</div>
+    <div>O</div>
+</div>
 </body>
 </html>
diff --git a/script.js b/script.js
index bf96e7a..801c8c6 100644
--- a/script.js
+++ b/script.js
@@ -57,6 +57,7 @@ const centerFieldImage = document.querySelector('#center-field-image');
 const bingoFields = document.querySelectorAll('#bingo td.bingo-field');
 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";
@@ -95,8 +96,8 @@ const checkForBingo = (field) => {
     let clickedCol = parseInt(field.dataset.col);
 
     //check horizontal and vertical axis
-    if (document.querySelectorAll(`#bingo td.bingo-field.drawn[data-row='${clickedRow}']`).length === 5
-        || document.querySelectorAll(`#bingo td.bingo-field.drawn[data-col='${clickedCol}']`).length === 5) {
+    if (document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).length === 5
+        || document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).length === 5) {
         bingo = true
     }
 
@@ -122,6 +123,7 @@ const checkForBingo = (field) => {
     }
     if (bingo) {
         window.fireworks.start();
+        winnerMessage.classList.add('won');
     }
 
 
@@ -199,6 +201,7 @@ drawTable();
 
 
 const redrawTable = function () {
+    winnerMessage.classList.remove('won');
     bingoFields.forEach(elem => elem.classList.remove('drawn'));
     seed = Date.now().toString();
     drawTable();
diff --git a/style.css b/style.css
index 70edc8d..d88e631 100644
--- a/style.css
+++ b/style.css
@@ -25,6 +25,10 @@ td {
     font-size: xx-large;
 }
 
+canvas {
+    pointer-events: none;
+}
+
 td:hover {
     background-color: blueviolet;
 }
@@ -53,4 +57,23 @@ p#seeed {
 
 span#copy-permalink, span#refresh-bingo {
     cursor: pointer;
+}
+
+#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;
+    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