bugfix and more celebrations

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>

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();

style.css

@@ -25,6 +25,10 @@ td {
     font-size: xx-large;
 }
 
+canvas {
+    pointer-events: none;
+}
+
 td:hover {
     background-color: blueviolet;
 }
@@ -54,3 +58,22 @@ 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%);
+}