mirror of
https://github.com/JonasunderscoreJones/BingoGenerator.git
synced 2025-10-24 14:39:18 +02:00
Compare commits
23 commits
9f9a7d75ca
...
089ad0b653
| Author | SHA1 | Date | |
|---|---|---|---|
| 089ad0b653 | |||
| ef9a8eb928 | |||
| 1e6e212f96 | |||
| c1ab850d27 | |||
| f86eeee5e2 | |||
| 4d57c8c044 | |||
| 1b7b1129c7 | |||
| b22b915ce7 | |||
| 9bcaaf32c3 | |||
| ac2010254d | |||
| 22c541a798 | |||
| 3f582af8bf | |||
| c1433e20c1 | |||
| 596613f72f | |||
| 14f7b10745 | |||
| e95c7a9906 | |||
| 816322cc1b | |||
| 35b2781ad6 | |||
| ab73036fdb | |||
| 684bff42af | |||
| 64d14685a6 | |||
| 3a40e225c0 | |||
| 1210a90ae9 |
9 changed files with 896 additions and 345 deletions
|
|
@ -1,2 +1,2 @@
|
|||
# BingoGenerator Website
|
||||
Found at https://bingogenerator.jonasjones.dev/
|
||||
Found at [bingo.jonasjones.dev](https://bingo.jonasjones.dev/) and [bingogenerator.jonasjones.dev](https://bingogenerator.jonasjones.dev/)
|
||||
|
|
|
|||
101
package-lock.json
generated
101
package-lock.json
generated
|
|
@ -1,15 +1,16 @@
|
|||
{
|
||||
"name": "jonasjones.me",
|
||||
"name": "bingo.jonasjones.dev",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "jonasjones.me",
|
||||
"name": "bingo.jonasjones.dev",
|
||||
"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",
|
||||
|
|
@ -22,9 +23,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.26.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
|
||||
"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
|
||||
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
|
|
@ -34,9 +35,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@cloudflare/workers-types": {
|
||||
"version": "4.20241106.0",
|
||||
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20241106.0.tgz",
|
||||
"integrity": "sha512-pI4ivacmp+vgNO/siHDsZ6BdITR0LC4Mh/1+yzVLcl9U75pt5DUDCOWOiqIRFXRq6H65DPnJbEPFo3x9UfgofQ==",
|
||||
"version": "4.20250321.0",
|
||||
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20250321.0.tgz",
|
||||
"integrity": "sha512-jPwtZJC7tVFOwFazuwq96be8haTnY9qik8hJ+oLFi50d9LTWPPrnrNHC4OxZmJTEcPIAy0y1WFZHe8C/b7xFXQ==",
|
||||
"dev": true,
|
||||
"license": "MIT OR Apache-2.0"
|
||||
},
|
||||
|
|
@ -684,9 +685,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/canvg": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
|
||||
"integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
|
||||
"version": "3.0.11",
|
||||
"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
|
||||
"integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
|
|
@ -753,9 +754,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.39.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
|
||||
"integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
|
||||
"version": "3.41.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.41.0.tgz",
|
||||
"integrity": "sha512-SJ4/EHwS36QMJd6h/Rg+GyR4A5xE0FSI3eZ+iBVpfqf1x0eTSg1smWLHrA+2jQThZSh97fmSgFSU8B61nxosxA==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
|
|
@ -774,9 +775,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
|
||||
"integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
@ -819,9 +820,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "2.5.7",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz",
|
||||
"integrity": "sha512-2q4bEI+coQM8f5ez7kt2xclg1XsecaV9ASJk/54vwlfRRNQfDqJz2pzQ8t0Ix/ToBpXlVjrRIx7pFC/o8itG2Q==",
|
||||
"version": "2.5.8",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
|
||||
"integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
|
||||
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||
"optional": true
|
||||
},
|
||||
|
|
@ -871,9 +872,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/esm-env": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
|
||||
"integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
|
||||
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
|
|
@ -1092,9 +1093,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.12",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
|
||||
"integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
|
||||
"version": "0.30.17",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
|
||||
"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
@ -1175,9 +1176,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -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",
|
||||
|
|
@ -1251,9 +1258,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.47",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
|
||||
"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -1271,8 +1278,8 @@
|
|||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.1.0",
|
||||
"nanoid": "^3.3.8",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
|
|
@ -1408,9 +1415,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/sirv/node_modules/mrmime": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
||||
"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
|
||||
"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
|
|
@ -1627,9 +1634,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.6.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
|
||||
"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
|
||||
"version": "5.8.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
|
||||
"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
|
|
@ -1641,9 +1648,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/undici": {
|
||||
"version": "5.28.4",
|
||||
"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
|
||||
"integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
|
||||
"version": "5.29.0",
|
||||
"resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
|
||||
"integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
@ -1663,9 +1670,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.5.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",
|
||||
"integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
|
||||
"version": "4.5.10",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.10.tgz",
|
||||
"integrity": "sha512-f2ueoukYTMI/5kMMT7wW+ol3zL6z6PjN28zYrGKAjnbzXhRXWXPThD3uN6muCp+TbfXaDgGvRuPsg6mwVLaWwQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "jonasjones.me",
|
||||
"name": "bingo.jonasjones.dev",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
"type": "module",
|
||||
"dependencies": {
|
||||
"html2canvas": "^1.4.1",
|
||||
"jspdf": "^2.5.2"
|
||||
"jspdf": "^2.5.2",
|
||||
"party-js": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
|
|
|
|||
90
src/lib/components/Footer.svelte
Normal file
90
src/lib/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
<a href="https://github.com/JonasunderscoreJones" target="_blank" aria-label="GitHub Link"><i class="fab fa-github"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg" target="_blank" aria-label="YouTube Link"><i class="fab fa-youtube"></i></a>
|
||||
<a href="https://discord.gg/V2EsuUVmWh" target="_blank" aria-label="Discord Link"><i class="fab fa-discord"></i></a>
|
||||
<a href="mailto:me@jonasjones.dev" target="_blank" aria-label="Email Link"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
|
||||
<p>Website by Jonas_Jones 2021 - {year}</p>
|
||||
|
||||
<div class="footer-right">
|
||||
<a href="https://jonasjones.dev" class="footer-link" target="_blank">
|
||||
Homepage
|
||||
<i class="fas fa-external-link"></i>
|
||||
</a>
|
||||
<a href="https://blog.jonasjones.dev" class="footer-link" target="_blank">
|
||||
Blog
|
||||
<i class="fas fa-external-link"></i>
|
||||
</a>
|
||||
<a href="https://docs.jonasjones.dev" class="footer-link" target="_blank">
|
||||
Docs
|
||||
<i class="fas fa-external-link"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const year = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
height: 1rem;
|
||||
background-color: black;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.footer-left, .footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-left a, .footer-right a {
|
||||
margin: 3px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-left a:hover, .footer-right a:hover {
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
position: fixed;
|
||||
right: 10px; /* Keep the right section fixed */
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
position: fixed;
|
||||
left: 10px; /* Keep the left section fixed */
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-link i {
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.footer-left, .footer-right {
|
||||
display: none;
|
||||
}
|
||||
.footer-left a, .footer-right a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
135
src/lib/cookies.js
Normal file
135
src/lib/cookies.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
/**
|
||||
* Functions to add the gameLock cookie
|
||||
* @module cookies
|
||||
*/
|
||||
export function addGameLockCookie() {
|
||||
document.cookie = `gameLock=;path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to check if the gameLock cookie is present
|
||||
* @returns {boolean} True if the gameLock cookie is present, false otherwise
|
||||
*/
|
||||
export function isGameLockCookiePresent() {
|
||||
return document.cookie.split('; ').some(cookie => cookie.startsWith('gameLock='));
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to delete the gameLock cookie
|
||||
*/
|
||||
export function deleteGameLockCookie() {
|
||||
document.cookie = `gameLock=;path=/;max-age=0`;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} entries
|
||||
* @param {String} cookieName
|
||||
*/
|
||||
export function saveEntriesAsCookie(entries, cookieName = 'bingoEntries') {
|
||||
document.cookie = `${cookieName}=${encodeURIComponent(entries)};path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to retrieve the entries from
|
||||
* the cookie
|
||||
* @param {String} cookieName
|
||||
* @returns {String} The entries from the cookie
|
||||
*/
|
||||
export function getEntriesFromCookie(cookieName = 'bingoEntries') {
|
||||
const cookies = document.cookie.split('; ');
|
||||
for (let cookie of cookies) {
|
||||
const [name, value] = cookie.split('=');
|
||||
if (name === cookieName) {
|
||||
return decodeURIComponent(value);
|
||||
}
|
||||
}
|
||||
return ""; // if the cookie is not found
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to delete the entries cookie
|
||||
* @param {String} cookieName
|
||||
*/
|
||||
export function deleteSavedEntriesCookie(cookieName = 'bingoEntries') {
|
||||
document.cookie = `${cookieName}=;path=/;max-age=0`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array<JSON>} grid
|
||||
*/
|
||||
export function saveGridAsCookie(grid, cookieName = 'bingoGrid') {
|
||||
const jsonString = JSON.stringify(grid);
|
||||
document.cookie = `${cookieName}=${encodeURIComponent(jsonString)};path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to retrieve the grid from the cookie
|
||||
* @param {String} cookieName
|
||||
* @returns {Array<JSON>} the grid from the cookie
|
||||
*/
|
||||
export function getGridFromCookie(cookieName = 'bingoGrid') {
|
||||
const cookies = document.cookie.split('; ');
|
||||
for (let cookie of cookies) {
|
||||
const [name, value] = cookie.split('=');
|
||||
if (name === cookieName) {
|
||||
try {
|
||||
console.log(JSON.parse(decodeURIComponent(value)))
|
||||
return JSON.parse(decodeURIComponent(value));
|
||||
} catch (error) {
|
||||
console.error('Error parsing grid from cookie:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
return []; //if the cookie is not found
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to delete the grid cookie
|
||||
* @param {String} cookieName
|
||||
*/
|
||||
export function deleteSavedGridCookie(cookieName = 'bingoGrid') {
|
||||
document.cookie = `${cookieName}=;path=/;max-age=0`;
|
||||
deleteGameLockCookie();
|
||||
}
|
||||
|
||||
/**
|
||||
* Functions to add the Page-Theme cookie
|
||||
* @param {String} pageTheme The theme to set
|
||||
*/
|
||||
export function setThemeCookie(pageTheme) {
|
||||
document.cookie = `pageTheme=${pageTheme};path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to check if the Page-Theme cookie is present
|
||||
* @returns {String} The Theme from the cookie
|
||||
*/
|
||||
export function getThemeCookie() {
|
||||
const cookies = document.cookie.split('; ');
|
||||
for (let cookie of cookies) {
|
||||
const [name, value] = cookie.split('=');
|
||||
if (name === 'pageTheme') {
|
||||
return decodeURIComponent(value);
|
||||
}
|
||||
}
|
||||
return ""; // if the cookie is not found
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to delete the Page-Theme cookie
|
||||
*/
|
||||
export function deleteThemeCookie() {
|
||||
document.cookie = `pageTheme=;path=/;max-age=0`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete all cookies and reload page
|
||||
*/
|
||||
export function deleteAllCookies() {
|
||||
deleteSavedEntriesCookie();
|
||||
deleteSavedGridCookie();
|
||||
deleteGameLockCookie();
|
||||
deleteThemeCookie();
|
||||
window.location.reload();
|
||||
}
|
||||
282
src/lib/styles/main.css
Normal file
282
src/lib/styles/main.css
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
:root {
|
||||
--bg-color: #1b1b1d;
|
||||
--content-bg-color: black;
|
||||
--text-color: white;
|
||||
|
||||
--bingo-cell-border-color: #333;
|
||||
--bingo-cell-bg-color: #1c1c1c;
|
||||
--bingo-cell-bg-color-hover: #525252;
|
||||
--bingo-cell-clicked-bg-color: #454545;
|
||||
|
||||
--button-bg-color: var(--text-color);
|
||||
--button-color: var(--bg-color);
|
||||
--button-bg-color-hover: var(--bingo-cell-bg-color-hover);
|
||||
|
||||
--warning-bg-color-hover: #454545;
|
||||
|
||||
--overlay-bg-color: rgba(0, 0, 0, 0.7);
|
||||
--overlay-content-bg-color: #1b1b1b;
|
||||
--overlay-content-border-color: #454545;
|
||||
|
||||
--settings-bg-color: black;
|
||||
--settings-element-bg-color: #1c1c1c;
|
||||
|
||||
--settings-input-bg-color: #1b1b1d;
|
||||
--settings-input-text-color: white;
|
||||
--settomgs-input-border-color: #333;
|
||||
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-theme='light'] {
|
||||
--bg-color: white;
|
||||
--content-bg-color: #f0f0f0;
|
||||
--text-color: black;
|
||||
|
||||
--bingo-cell-border-color: #ccc;
|
||||
--bingo-cell-bg-color: #f0f0f0;
|
||||
--bingo-cell-bg-color-hover: #ccc;
|
||||
--bingo-cell-clicked-bg-color: #aaa;
|
||||
|
||||
--button-bg-color: var(--text-color);
|
||||
--button-color: var(--bg-color);
|
||||
--button-bg-color-hover: #ccc;
|
||||
|
||||
--warning-bg-color: rgb(255, 204, 0);
|
||||
|
||||
--overlay-bg-color: rgba(255, 255, 255, 0.7);
|
||||
--overlay-content-bg-color: #f0f0f0;
|
||||
--overlay-content-border-color: #ccc;
|
||||
|
||||
--settings-bg-color: #f0f0f0;
|
||||
--settings-element-bg-color: #f0f0f0;
|
||||
|
||||
--settings-input-bg-color: #f0f0f0;
|
||||
--settings-input-text-color: black;
|
||||
--settomgs-input-border-color: #ccc;
|
||||
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.root-bingo-container {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 3rem);
|
||||
width: calc(100vw - 1rem);
|
||||
}
|
||||
|
||||
.bingo-container {
|
||||
display: flex;
|
||||
margin: auto auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
margin: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bingo-main-container {
|
||||
background-color: var(--content-bg-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bingo-grid-container {
|
||||
aspect-ratio: 1 / 1;
|
||||
width: calc(100vh - 3rem);
|
||||
background-color: var(--content-bg-color);
|
||||
}
|
||||
|
||||
.bingo-grid {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.bingo-cell {
|
||||
border: 1px solid var(--bingo-cell-border-color);
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background-color: var(--bingo-cell-bg-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bingo-cell:hover, .bingo-cell.clicked:hover {
|
||||
background-color: var(--bingo-cell-bg-color-hover);
|
||||
}
|
||||
|
||||
.bingo-cell.clicked {
|
||||
background-color: var(--bingo-cell-clicked-bg-color);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
background-color: var(--button-bg-color);
|
||||
color: var(--button-color);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: var(--button-bg-color);
|
||||
background-color: var(--button-bg-color-hover);
|
||||
}
|
||||
|
||||
.bingo-running-warning {
|
||||
width: 20vw;
|
||||
padding: 1rem;
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: 5px solid var(--text-color);
|
||||
}
|
||||
|
||||
.bingo-running-warning:hover {
|
||||
background-color: var(--warning-bg-color-hover);
|
||||
}
|
||||
|
||||
.overlay-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--overlay-bg-color);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
background-color: var(--overlay-content-bg-color);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
min-width: 300px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px var(--shadow-color);
|
||||
border: 2px solid var(--overlay-content-border-color);
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-row-item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.flex-column-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flex-column-item {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.settings-box {
|
||||
background-color: var(--content-bg-color);
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.settings-element {
|
||||
background-color: var(--settings-element-bg-color);
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px var(--shadow-color);
|
||||
}
|
||||
|
||||
.bingo-item-input {
|
||||
resize: none;
|
||||
width: 90%;
|
||||
height: 300px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--settings-input-bg-color);
|
||||
color: var(--settings-input-text-color);
|
||||
border: 1px solid var(--settings-input-border-color);
|
||||
box-shadow: inset 0 0 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.bingo-dimension-input {
|
||||
width: 50px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--settings-input-bg-color);
|
||||
color: var(--settings-input-text-color);
|
||||
border: 1px solid var(--settings-input-border-color);
|
||||
box-shadow: inset 0 0 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.notice-box {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: var(--bg-color);
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 4px 8px var(--shadow-color);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.button-container > button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.centered-notice {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.cookie-notice {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -1,13 +1,19 @@
|
|||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import { page } from '$app/stores';
|
||||
import '$lib/styles/main.css';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import { page } from '$app/stores';
|
||||
import party from "party-js";
|
||||
import { getGridFromCookie, saveGridAsCookie, getEntriesFromCookie, saveEntriesAsCookie, deleteSavedGridCookie, isGameLockCookiePresent, addGameLockCookie, deleteGameLockCookie, deleteAllCookies, setThemeCookie, getThemeCookie } from '$lib/cookies.js';
|
||||
|
||||
$: queryParams = $page.url.searchParams;
|
||||
$: bingocode = queryParams.get('bingo');
|
||||
$: queryParams = $page.url.searchParams;
|
||||
$: bingocode = queryParams.get('bingo');
|
||||
|
||||
let inputText = `Bingo Item 1
|
||||
let theme = 'light';
|
||||
|
||||
let inputText = `Bingo Item 1
|
||||
Bingo Item 2
|
||||
Bingo Item 3
|
||||
Bingo Item 4
|
||||
|
|
@ -33,308 +39,336 @@ Bingo Item 23
|
|||
Bingo Item 24
|
||||
Bingo Item 25`;
|
||||
|
||||
let rows = 5;
|
||||
let cols = 5;
|
||||
let grid = [];
|
||||
let running_bingo = true;
|
||||
let tried_to_regen = false;
|
||||
let rows = 5;
|
||||
let cols = 5;
|
||||
let grid = [];
|
||||
let running_bingo = true;
|
||||
let tried_to_regen = false;
|
||||
let bingoCount = 0;
|
||||
|
||||
// Function to add an empty cookie called gameLock
|
||||
export function addGameLockCookie() {
|
||||
document.cookie = `gameLock=;path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
let closeAlertButton = null;
|
||||
let alertBackground = null;
|
||||
let closeSettingsButton = null;
|
||||
let settingsBackground = null;
|
||||
|
||||
function openAlert() {
|
||||
alertBackground.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeAlert() {
|
||||
alertBackground.style.display = 'none';
|
||||
}
|
||||
|
||||
function openSettings() {
|
||||
settingsBackground.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
settingsBackground.style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
function generateBingo() {
|
||||
if (running_bingo) {
|
||||
tried_to_regen = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Function to check if the gameLock cookie is present
|
||||
export function isGameLockCookiePresent() {
|
||||
return document.cookie.split('; ').some(cookie => cookie.startsWith('gameLock='));
|
||||
}
|
||||
|
||||
// Function to delete the gameLock cookie
|
||||
export function deleteGameLockCookie() {
|
||||
document.cookie = `gameLock=;path=/;max-age=0`;
|
||||
}
|
||||
|
||||
|
||||
// Function to save a string as a cookie
|
||||
export function saveEntriesAsCookie(entries, cookieName = 'bingoEntries') {
|
||||
document.cookie = `${cookieName}=${encodeURIComponent(entries)};path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
}
|
||||
|
||||
// Function to retrieve a string from a cookie
|
||||
export function getEntriesFromCookie(cookieName = 'bingoEntries') {
|
||||
const cookies = document.cookie.split('; ');
|
||||
for (let cookie of cookies) {
|
||||
const [name, value] = cookie.split('=');
|
||||
if (name === cookieName) {
|
||||
return decodeURIComponent(value);
|
||||
}
|
||||
const inputLines = inputText.split('\n').map(line => line.trim()).filter(Boolean);
|
||||
grid = Array(rows * cols).fill('');
|
||||
const shuffledLines = [...inputLines].sort(() => Math.random() - 0.5);
|
||||
shuffledLines.forEach((line, index) => {
|
||||
if (index < grid.length) {
|
||||
grid[index] = { value: line, clicked: false };
|
||||
}
|
||||
return null; // Return null if the cookie is not found
|
||||
}
|
||||
});
|
||||
grid = Array.from({ length: rows }, (_, rowIndex) =>
|
||||
grid.slice(rowIndex * cols, rowIndex * cols + cols)
|
||||
);
|
||||
saveEntriesAsCookie(inputText);
|
||||
saveGridAsCookie(grid);
|
||||
}
|
||||
|
||||
export function deleteSavedEntriesCookie(cookieName = 'bingoEntries') {
|
||||
document.cookie = `${cookieName}=;path=/;max-age=0`;
|
||||
}
|
||||
|
||||
// Function to save the nested list as a cookie
|
||||
export function saveGridAsCookie(grid, cookieName = 'bingoGrid') {
|
||||
const jsonString = JSON.stringify(grid);
|
||||
document.cookie = `${cookieName}=${encodeURIComponent(jsonString)};path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||
}
|
||||
|
||||
// Function to retrieve the nested list from a cookie
|
||||
export function getGridFromCookie(cookieName = 'bingoGrid') {
|
||||
const cookies = document.cookie.split('; ');
|
||||
for (let cookie of cookies) {
|
||||
const [name, value] = cookie.split('=');
|
||||
if (name === cookieName) {
|
||||
try {
|
||||
console.log(JSON.parse(decodeURIComponent(value)))
|
||||
return JSON.parse(decodeURIComponent(value));
|
||||
} catch (error) {
|
||||
console.error('Error parsing grid from cookie:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null; // Return null if the cookie is not found
|
||||
}
|
||||
|
||||
export function deleteSavedGridCookie(cookieName = 'bingoGrid') {
|
||||
document.cookie = `${cookieName}=;path=/;max-age=0`;
|
||||
deleteGameLockCookie();
|
||||
}
|
||||
|
||||
|
||||
function generateBingo() {
|
||||
if (running_bingo) {
|
||||
tried_to_regen = true;
|
||||
return;
|
||||
}
|
||||
const inputLines = inputText.split('\n').map(line => line.trim()).filter(Boolean);
|
||||
grid = Array(rows * cols).fill('');
|
||||
const shuffledLines = [...inputLines].sort(() => Math.random() - 0.5);
|
||||
shuffledLines.forEach((line, index) => {
|
||||
if (index < grid.length) {
|
||||
grid[index] = { value: line, clicked: false };
|
||||
}
|
||||
});
|
||||
grid = Array.from({ length: rows }, (_, rowIndex) =>
|
||||
grid.slice(rowIndex * cols, rowIndex * cols + cols)
|
||||
);
|
||||
saveEntriesAsCookie(inputText);
|
||||
saveGridAsCookie(grid);
|
||||
}
|
||||
|
||||
function checkBingo() {
|
||||
// Check rows for bingo
|
||||
for (let row of grid) {
|
||||
if (row.every(cell => cell.clicked)) {
|
||||
return true; // Bingo detected in this row
|
||||
}
|
||||
}
|
||||
|
||||
// Check columns for bingo
|
||||
for (let col = 0; col < grid[0].length; col++) {
|
||||
if (grid.every(row => row[col].clicked)) {
|
||||
return true; // Bingo detected in this column
|
||||
}
|
||||
}
|
||||
|
||||
// Check diagonals for bingo
|
||||
if (grid.every((row, i) => row[i].clicked)) {
|
||||
return true; // Bingo detected in the top-left to bottom-right diagonal
|
||||
}
|
||||
|
||||
if (grid.every((row, i) => row[grid.length - 1 - i].clicked)) {
|
||||
return true; // Bingo detected in the top-right to bottom-left diagonal
|
||||
}
|
||||
|
||||
return false; // No bingo detected
|
||||
}
|
||||
|
||||
function cellClicked() {
|
||||
saveGridAsCookie(grid);
|
||||
running_bingo = true;
|
||||
addGameLockCookie();
|
||||
if (checkBingo()) {
|
||||
alert('Bingo!');
|
||||
function checkBingo() {
|
||||
// Check rows for bingo
|
||||
for (let row of grid) {
|
||||
if (row.every(cell => cell.clicked)) {
|
||||
return true; // Bingo detected in this row
|
||||
}
|
||||
}
|
||||
|
||||
// Check columns for bingo
|
||||
for (let col = 0; col < grid[0].length; col++) {
|
||||
if (grid.every(row => row[col].clicked)) {
|
||||
return true; // Bingo detected in this column
|
||||
}
|
||||
}
|
||||
|
||||
function resetBingo() {
|
||||
// Check diagonals for bingo
|
||||
if (grid.every((row, i) => row[i].clicked)) {
|
||||
return true; // Bingo detected in the top-left to bottom-right diagonal
|
||||
}
|
||||
|
||||
if (grid.every((row, i) => row[grid.length - 1 - i].clicked)) {
|
||||
return true; // Bingo detected in the top-right to bottom-left diagonal
|
||||
}
|
||||
|
||||
return false; // No bingo detected
|
||||
}
|
||||
|
||||
function getBingoCount() {
|
||||
let bingoCount = 0; // To count the number of bingos
|
||||
|
||||
// Check rows for bingo
|
||||
for (let row of grid) {
|
||||
if (row.every(cell => cell.clicked)) {
|
||||
bingoCount++; // Bingo detected in this row
|
||||
}
|
||||
}
|
||||
|
||||
// Check columns for bingo
|
||||
for (let col = 0; col < grid[0].length; col++) {
|
||||
if (grid.every(row => row[col].clicked)) {
|
||||
bingoCount++; // Bingo detected in this column
|
||||
}
|
||||
}
|
||||
|
||||
// Check top-left to bottom-right diagonal for bingo
|
||||
if (grid.every((row, i) => row[i].clicked)) {
|
||||
bingoCount++; // Bingo detected in the top-left to bottom-right diagonal
|
||||
}
|
||||
|
||||
// Check top-right to bottom-left diagonal for bingo
|
||||
if (grid.every((row, i) => row[grid.length - 1 - i].clicked)) {
|
||||
bingoCount++; // Bingo detected in the top-right to bottom-left diagonal
|
||||
}
|
||||
|
||||
return bingoCount; // Return the total count of bingos detected
|
||||
}
|
||||
|
||||
function cellClicked() {
|
||||
saveGridAsCookie(grid);
|
||||
running_bingo = true;
|
||||
addGameLockCookie();
|
||||
// check if bingo achieved and new bingo count is larger than previous
|
||||
if (checkBingo() && getBingoCount() > bingoCount) {
|
||||
openAlert();
|
||||
triggerConfetti();
|
||||
}
|
||||
bingoCount = getBingoCount();
|
||||
}
|
||||
|
||||
|
||||
function resetBingo() {
|
||||
running_bingo = false;
|
||||
tried_to_regen = false;
|
||||
generateBingo();
|
||||
deleteGameLockCookie();
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
adjustFontSizes();
|
||||
});
|
||||
|
||||
function adjustFontSizes() {
|
||||
const cells = document.querySelectorAll('.bingo-cell');
|
||||
cells.forEach(cell => {
|
||||
let fontSize = 18; // Base font size
|
||||
cell.style.fontSize = `${fontSize}px`;
|
||||
|
||||
while (cell.scrollHeight > cell.clientHeight || cell.scrollWidth > cell.clientWidth) {
|
||||
fontSize--;
|
||||
cell.style.fontSize = `${fontSize}px`;
|
||||
if (fontSize < 8) break; // Minimum font size limit
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadPDF() {
|
||||
const gridElement = document.querySelector('.bingo-grid');
|
||||
const canvas = await html2canvas(gridElement, { scale: 2 });
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
|
||||
const padding = 40;
|
||||
|
||||
// Create a jsPDF instance
|
||||
const pdf = new jsPDF({
|
||||
orientation: 'landscape',
|
||||
unit: 'pt',
|
||||
format: [canvas.width + padding * 2, canvas.height + padding * 2],
|
||||
});
|
||||
|
||||
// Add the image to the PDF with padding
|
||||
pdf.addImage(imgData, 'PNG', padding, padding, canvas.width, canvas.height);
|
||||
|
||||
// Save the PDF
|
||||
pdf.save('bingo-grid.pdf');
|
||||
}
|
||||
|
||||
|
||||
export function deleteGridCookieOnNotPlaying() {
|
||||
if (!isGameLockCookiePresent()) {
|
||||
deleteSavedGridCookie();
|
||||
running_bingo = false;
|
||||
tried_to_regen = false;
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle between dark and light themes
|
||||
function toggleTheme() {
|
||||
theme = theme === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
setThemeCookie(theme);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (getThemeCookie()) {
|
||||
theme = getThemeCookie();
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
} else {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
theme = prefersDark ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
|
||||
const savedGrid = getGridFromCookie();
|
||||
const savedEntries = getEntriesFromCookie();
|
||||
|
||||
closeAlertButton = document.getElementById('close-alert');
|
||||
alertBackground = document.getElementById('alert-background');
|
||||
closeAlertButton.addEventListener('click', closeAlert);
|
||||
closeSettingsButton = document.getElementById('close-settings');
|
||||
settingsBackground = document.getElementById('settings-background');
|
||||
closeSettingsButton.addEventListener('click', closeSettings);
|
||||
|
||||
deleteGridCookieOnNotPlaying();
|
||||
|
||||
if (savedGrid) {
|
||||
grid = savedGrid;
|
||||
if (savedEntries) {
|
||||
inputText = savedEntries;
|
||||
}
|
||||
bingoCount = getBingoCount();
|
||||
} else {
|
||||
running_bingo = false;
|
||||
generateBingo();
|
||||
deleteGameLockCookie();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
afterUpdate(() => {
|
||||
adjustFontSizes();
|
||||
});
|
||||
|
||||
function adjustFontSizes() {
|
||||
const cells = document.querySelectorAll('.bingo-cell');
|
||||
cells.forEach(cell => {
|
||||
let fontSize = 18; // Base font size
|
||||
cell.style.fontSize = `${fontSize}px`;
|
||||
|
||||
while (cell.scrollHeight > cell.clientHeight || cell.scrollWidth > cell.clientWidth) {
|
||||
fontSize--;
|
||||
cell.style.fontSize = `${fontSize}px`;
|
||||
if (fontSize < 8) break; // Minimum font size limit
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function downloadPDF() {
|
||||
const gridElement = document.querySelector('.bingo-grid');
|
||||
const canvas = await html2canvas(gridElement, { scale: 2 });
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const pdf = new jsPDF({
|
||||
orientation: 'landscape',
|
||||
unit: 'pt',
|
||||
format: [canvas.width, canvas.height]
|
||||
});
|
||||
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
|
||||
pdf.save('bingo-grid.pdf');
|
||||
}
|
||||
|
||||
export function deleteGridCookieOnNotPlaying() {
|
||||
if (!isGameLockCookiePresent()) {
|
||||
deleteSavedGridCookie();
|
||||
running_bingo = false;
|
||||
tried_to_regen = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const savedGrid = getGridFromCookie();
|
||||
const savedEntries = getEntriesFromCookie();
|
||||
|
||||
deleteGridCookieOnNotPlaying();
|
||||
|
||||
if (savedGrid) {
|
||||
grid = savedGrid;
|
||||
if (savedEntries) {
|
||||
inputText = savedEntries;
|
||||
}
|
||||
} else {
|
||||
running_bingo = false;
|
||||
generateBingo();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bingo-grid-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
background-color: #f4f4f9;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bingo-grid {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bingo-cell {
|
||||
border: 1px solid #333;
|
||||
width: 150px; /* Bigger size */
|
||||
height: 150px; /* Bigger size */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 18px; /* Base font size */
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bingo-cell.clicked {
|
||||
background-color: #add8e6; /* Highlight color for clicked state */
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 30px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.bingo-running-warning {
|
||||
/* Add your styles as needed */
|
||||
padding: 1rem;
|
||||
margin: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border: 5px solid orange;
|
||||
border-radius: 10px;
|
||||
/* center text and buttons */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="bingo-grid-container">
|
||||
<h1>Randomized Bingo Generator</h1>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="rows">Rows:</label>
|
||||
<input id="rows" type="number" bind:value={rows} min="1" max="10" style="width: 50px; margin-right: 10px;" on:input={generateBingo} />
|
||||
|
||||
<label for="cols">Columns:</label>
|
||||
<input id="cols" type="number" bind:value={cols} min="1" max="10" style="width: 50px;" on:input={generateBingo} />
|
||||
</div>
|
||||
<p>Enter your items below and click the button to generate a random 5x5 bingo grid.</p>
|
||||
<textarea bind:value={inputText} placeholder="Enter items line by line" style="width: 80%; height: 300px; margin-bottom: 10px;" on:input={generateBingo}></textarea>
|
||||
<p>NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.</p>
|
||||
<button on:click={downloadPDF}>Download as PDF</button>
|
||||
<button on:click={generateBingo}>Regenerate Bingo</button>
|
||||
|
||||
{#if running_bingo && tried_to_regen}
|
||||
<div class="bingo-running-warning">
|
||||
<p>You are currently playing this game of Bingo and it therefore doesn't Refresh changes or Regenerate the table. If you would like to End the Game, Click the Button below.</p>
|
||||
<button style="background-color: darkred;" on:click={resetBingo}>Stop Bingo and Regenerate</button>
|
||||
<head>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<div class="root-bingo-container">
|
||||
<div class="flex-row-container">
|
||||
<div class="bingo-container bingo-main-container">
|
||||
<h1>Randomized Bingo Generator</h1>
|
||||
<div style="margin-bottom: 10px;">
|
||||
</div>
|
||||
{/if}
|
||||
{#if running_bingo && !tried_to_regen}
|
||||
<i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
|
||||
{/if}
|
||||
|
||||
{#if grid.length > 0}
|
||||
<div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
|
||||
{#each grid as row}
|
||||
{#each row as cell}
|
||||
<div
|
||||
class="bingo-cell"
|
||||
on:click={() => {cell.clicked = !cell.clicked; cellClicked();}}
|
||||
class:clicked={cell.clicked}
|
||||
>
|
||||
{cell.value}
|
||||
<div class="notice-box">
|
||||
<div class="button-container">
|
||||
<button on:click={generateBingo}>Regenerate Bingo</button>
|
||||
<button on:click={downloadPDF}>Download as PDF</button>
|
||||
<button on:click={openSettings}>Configure Bingo</button>
|
||||
</div>
|
||||
{#if running_bingo && tried_to_regen}
|
||||
<div class="bingo-running-warning">
|
||||
<p>You are currently playing this game of Bingo and it therefore doesn't Refresh changes or Regenerate the table. If you would like to End the Game, Click the Button below.</p>
|
||||
<button on:click={resetBingo}>Stop Bingo and Regenerate</button>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
{/if}
|
||||
{#if running_bingo && !tried_to_regen}
|
||||
<i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="notice-box cookie-notice">
|
||||
<p>This Website uses functional Cookies to store the Running Bingo Game, Settings and the Entered Bingo Entries.<br><br>They can be deleted in the Settings.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bingo-container bingo-grid-container">
|
||||
{#if grid.length > 0}
|
||||
<div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
|
||||
{#each grid as row}
|
||||
{#each row as cell}
|
||||
<button class="bingo-cell"
|
||||
on:click={() => { cell.clicked = !cell.clicked; cellClicked(); }}
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') { // Handle Enter or Space key
|
||||
cell.clicked = !cell.clicked;
|
||||
cellClicked();
|
||||
}
|
||||
}}
|
||||
class:clicked={cell.clicked}
|
||||
>{cell.value}</button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="centered-notice notice-box">
|
||||
<p>Click the Button to generate a new Bingo</p>
|
||||
<button on:click={generateBingo}>Generate Bingo</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/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="overlay-background">
|
||||
<div class="overlay-content">
|
||||
<h2>Bingo!</h2>
|
||||
<p>You achieved a new Bingo!<br>You now have <b>{bingoCount}</b> Bingos.</p>
|
||||
<button id="close-alert" class="close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="settings-background" class="overlay-background">
|
||||
<div class="overlay-content settings-container">
|
||||
<h2>Bingo Settings</h2>
|
||||
<div class="flex-row-container">
|
||||
<div class="flex-row-item settings-box">
|
||||
<h3>Bingo Items</h3>
|
||||
<div class="settings-element">
|
||||
<p>NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.</p>
|
||||
<textarea class="bingo-item-input" bind:value={inputText} placeholder="Enter items line by line" on:input={generateBingo}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row-item flex-column-container">
|
||||
<div class="settings-box flex-column-item">
|
||||
<h3>Bingo Dimensions</h3>
|
||||
<div class="settings-element">
|
||||
<label for="rows">Rows:</label>
|
||||
<input class="bingo-dimension-input" id="rows" type="number" bind:value={rows} min="1" max="10" on:input={generateBingo} />
|
||||
</div>
|
||||
<div class="settings-element">
|
||||
<label for="cols">Columns:</label>
|
||||
<input class="bingo-dimension-input" id="cols" type="number" bind:value={cols} min="1" max="10" on:input={generateBingo} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-box flex-column-item">
|
||||
<h3>Display</h3>
|
||||
<div class="settings-element">
|
||||
<button on:click={toggleTheme}>Toggle Dark/Light Mode</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-box flex-column-item">
|
||||
<h3>Reset</h3>
|
||||
<div class="settings-element">
|
||||
<button on:click={deleteAllCookies}>Reset and delete Cookies</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<button id="close-settings" class="close-btn">Save and Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
BIN
static/favicon.png
Normal file
BIN
static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Loading…
Add table
Add a link
Reference in a new issue