added custom alert and confetti

package-lock.json

@@ -9,7 +9,8 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"html2canvas": "^1.4.1",
-				"jspdf": "^2.5.2"
+				"jspdf": "^2.5.2",
+				"party-js": "^2.2.0"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
@@ -1213,6 +1214,12 @@
 				"wrappy": "1"
 			}
 		},
+		"node_modules/party-js": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/party-js/-/party-js-2.2.0.tgz",
+			"integrity": "sha512-50hGuALCpvDTrQLPQ1fgUgxKIWAH28ShVkmeK/3zhO0YJyCqkhrZhQEkWPxDYLvbFJ7YAXyROmFEu35gKpZLtQ==",
+			"license": "MIT"
+		},
 		"node_modules/path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",

package.json

@@ -21,6 +21,7 @@
 	"type": "module",
 	"dependencies": {
 		"html2canvas": "^1.4.1",
-		"jspdf": "^2.5.2"
+		"jspdf": "^2.5.2",
+		"party-js": "^2.2.0"
 	}
 }

src/routes/+page.svelte

@@ -3,6 +3,7 @@
     import html2canvas from 'html2canvas';
     import jsPDF from 'jspdf';
     import { page } from '$app/stores';
+    import party from "party-js";
 
     $: queryParams = $page.url.searchParams;
     $: bingocode = queryParams.get('bingo');
@@ -39,6 +40,17 @@ Bingo Item 25`;
     let running_bingo = true;
     let tried_to_regen = false;
 
+    let closeAlertButton = null;
+    let alertBackground = null;
+
+    function openAlert() {
+      alertBackground.style.display = 'flex';
+    }
+
+    function closeAlert() {
+      alertBackground.style.display = 'none';
+    }
+
     // Function to add an empty cookie called gameLock
     export function addGameLockCookie() {
       document.cookie = `gameLock=;path=/;max-age=31536000`; // Cookie lasts for 1 year
@@ -158,9 +170,8 @@ Bingo Item 25`;
       running_bingo = true;
       addGameLockCookie();
       if (checkBingo()) {
-        setTimeout(() => {
-          alert('Bingo!');
-        }, 0);
+        openAlert();
+        triggerConfetti();
       }
     }
 
@@ -211,10 +222,23 @@ Bingo Item 25`;
       }
     }
 
+    function triggerConfetti() {
+    // `party.confetti` can be used for screen-wide confetti
+    party.confetti(document.body, {
+      count: party.variation.range(50, 2000), // Number of confetti pieces
+      spread: 70, // Spread of confetti
+      size: party.variation.range(0.5, 1.5), // Size of confetti
+    });
+  }
+
     onMount(() => {
       const savedGrid = getGridFromCookie();
       const savedEntries = getEntriesFromCookie();
 
+      closeAlertButton = document.getElementById('close-alert');
+      alertBackground = document.getElementById('alert-background');
+      closeAlertButton.addEventListener('click', closeAlert);
+
       deleteGridCookieOnNotPlaying();
 
       if (savedGrid) {
@@ -296,6 +320,28 @@ Bingo Item 25`;
       align-items: center;
       text-align: center;
     }
+
+    .alert-background {
+      display: none; /* Hidden by default */
+      position: fixed; /* Fixed position */
+      top: 0;
+      left: 0;
+      width: 100%; /* Full width */
+      height: 100%; /* Full height */
+      background-color: rgba(0, 0, 0, 0.7); /* Dark background */
+      justify-content: center; /* Center the alert content */
+      align-items: center; /* Center the alert content */
+      z-index: 1000; /* Keep it on top */
+    }
+
+    .alert-content {
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      width: 300px;
+      text-align: center;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
   </style>
 
   <div class="bingo-grid-container">
@@ -340,3 +386,12 @@ Bingo Item 25`;
     {/if}
     <p>Notice: This Website uses functional Cookies to store the Running Bingo Game as well as the Entered Bingo Entries.</p>
   </div>
+
+
+  <div id="alert-background" class="alert-background">
+    <div class="alert-content">
+      <h2>Bingo!</h2>
+      <p>You achieved a Bingo!</p>
+      <button id="close-alert" class="close-btn">Close</button>
+    </div>
+  </div>