mirror of
https://github.com/JonasunderscoreJones/BingoGenerator.git
synced 2025-10-26 01:29:19 +02:00
Compare commits
No commits in common. "089ad0b653ef33ec591f65f057ed98471433db00" and "9f9a7d75ca1adb2fa9f8f2717b79db18096f7f02" have entirely different histories.
089ad0b653
...
9f9a7d75ca
9 changed files with 346 additions and 897 deletions
|
|
@ -1,2 +1,2 @@
|
||||||
# BingoGenerator Website
|
# BingoGenerator Website
|
||||||
Found at [bingo.jonasjones.dev](https://bingo.jonasjones.dev/) and [bingogenerator.jonasjones.dev](https://bingogenerator.jonasjones.dev/)
|
Found at https://bingogenerator.jonasjones.dev/
|
||||||
|
|
|
||||||
101
package-lock.json
generated
101
package-lock.json
generated
|
|
@ -1,16 +1,15 @@
|
||||||
{
|
{
|
||||||
"name": "bingo.jonasjones.dev",
|
"name": "jonasjones.me",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "bingo.jonasjones.dev",
|
"name": "jonasjones.me",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"jspdf": "^2.5.2",
|
"jspdf": "^2.5.2"
|
||||||
"party-js": "^2.2.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-auto": "^2.0.0",
|
"@sveltejs/adapter-auto": "^2.0.0",
|
||||||
|
|
@ -23,9 +22,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/runtime": {
|
"node_modules/@babel/runtime": {
|
||||||
"version": "7.27.0",
|
"version": "7.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
|
||||||
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
|
"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"regenerator-runtime": "^0.14.0"
|
"regenerator-runtime": "^0.14.0"
|
||||||
|
|
@ -35,9 +34,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@cloudflare/workers-types": {
|
"node_modules/@cloudflare/workers-types": {
|
||||||
"version": "4.20250321.0",
|
"version": "4.20241106.0",
|
||||||
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20250321.0.tgz",
|
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20241106.0.tgz",
|
||||||
"integrity": "sha512-jPwtZJC7tVFOwFazuwq96be8haTnY9qik8hJ+oLFi50d9LTWPPrnrNHC4OxZmJTEcPIAy0y1WFZHe8C/b7xFXQ==",
|
"integrity": "sha512-pI4ivacmp+vgNO/siHDsZ6BdITR0LC4Mh/1+yzVLcl9U75pt5DUDCOWOiqIRFXRq6H65DPnJbEPFo3x9UfgofQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT OR Apache-2.0"
|
"license": "MIT OR Apache-2.0"
|
||||||
},
|
},
|
||||||
|
|
@ -685,9 +684,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/canvg": {
|
"node_modules/canvg": {
|
||||||
"version": "3.0.11",
|
"version": "3.0.10",
|
||||||
"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
|
"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
|
||||||
"integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
|
"integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -754,9 +753,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/core-js": {
|
"node_modules/core-js": {
|
||||||
"version": "3.41.0",
|
"version": "3.39.0",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.41.0.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
|
||||||
"integrity": "sha512-SJ4/EHwS36QMJd6h/Rg+GyR4A5xE0FSI3eZ+iBVpfqf1x0eTSg1smWLHrA+2jQThZSh97fmSgFSU8B61nxosxA==",
|
"integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
|
|
@ -775,9 +774,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.4.0",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||||
"integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
|
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -820,9 +819,9 @@
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/dompurify": {
|
"node_modules/dompurify": {
|
||||||
"version": "2.5.8",
|
"version": "2.5.7",
|
||||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
|
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz",
|
||||||
"integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
|
"integrity": "sha512-2q4bEI+coQM8f5ez7kt2xclg1XsecaV9ASJk/54vwlfRRNQfDqJz2pzQ8t0Ix/ToBpXlVjrRIx7pFC/o8itG2Q==",
|
||||||
"license": "(MPL-2.0 OR Apache-2.0)",
|
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
|
@ -872,9 +871,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/esm-env": {
|
"node_modules/esm-env": {
|
||||||
"version": "1.2.2",
|
"version": "1.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.1.4.tgz",
|
||||||
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
|
"integrity": "sha512-oO82nKPHKkzIj/hbtuDYy/JHqBHFlMIW36SDiPCVsj87ntDLcWN+sJ1erdVryd4NxODacFTsdrIE3b7IamqbOg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
|
@ -1093,9 +1092,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/magic-string": {
|
"node_modules/magic-string": {
|
||||||
"version": "0.30.17",
|
"version": "0.30.12",
|
||||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
|
||||||
"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
|
"integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -1176,9 +1175,9 @@
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.11",
|
"version": "3.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
|
|
@ -1214,12 +1213,6 @@
|
||||||
"wrappy": "1"
|
"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": {
|
"node_modules/path-is-absolute": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||||
|
|
@ -1258,9 +1251,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/postcss": {
|
"node_modules/postcss": {
|
||||||
"version": "8.5.3",
|
"version": "8.4.47",
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
|
||||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
|
|
@ -1278,8 +1271,8 @@
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"nanoid": "^3.3.8",
|
"nanoid": "^3.3.7",
|
||||||
"picocolors": "^1.1.1",
|
"picocolors": "^1.1.0",
|
||||||
"source-map-js": "^1.2.1"
|
"source-map-js": "^1.2.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
@ -1415,9 +1408,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/sirv/node_modules/mrmime": {
|
"node_modules/sirv/node_modules/mrmime": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
||||||
"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
|
"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
@ -1634,9 +1627,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "5.8.2",
|
"version": "5.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
|
||||||
"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
|
"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|
@ -1648,9 +1641,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/undici": {
|
"node_modules/undici": {
|
||||||
"version": "5.29.0",
|
"version": "5.28.4",
|
||||||
"resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
|
"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
|
||||||
"integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
|
"integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
@ -1670,9 +1663,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "4.5.10",
|
"version": "4.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.10.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",
|
||||||
"integrity": "sha512-f2ueoukYTMI/5kMMT7wW+ol3zL6z6PjN28zYrGKAjnbzXhRXWXPThD3uN6muCp+TbfXaDgGvRuPsg6mwVLaWwQ==",
|
"integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "bingo.jonasjones.dev",
|
"name": "jonasjones.me",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
@ -21,7 +21,6 @@
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"jspdf": "^2.5.2",
|
"jspdf": "^2.5.2"
|
||||||
"party-js": "^2.2.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,6 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<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%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,135 +0,0 @@
|
||||||
/**
|
|
||||||
* 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();
|
|
||||||
}
|
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
: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,19 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import '$lib/styles/main.css';
|
import { onMount, afterUpdate } from 'svelte';
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import html2canvas from 'html2canvas';
|
||||||
import { onMount, afterUpdate } from 'svelte';
|
import jsPDF from 'jspdf';
|
||||||
import html2canvas from 'html2canvas';
|
import { page } from '$app/stores';
|
||||||
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;
|
$: queryParams = $page.url.searchParams;
|
||||||
$: bingocode = queryParams.get('bingo');
|
$: bingocode = queryParams.get('bingo');
|
||||||
|
|
||||||
let theme = 'light';
|
let inputText = `Bingo Item 1
|
||||||
|
|
||||||
let inputText = `Bingo Item 1
|
|
||||||
Bingo Item 2
|
Bingo Item 2
|
||||||
Bingo Item 3
|
Bingo Item 3
|
||||||
Bingo Item 4
|
Bingo Item 4
|
||||||
|
|
@ -39,336 +33,308 @@ Bingo Item 23
|
||||||
Bingo Item 24
|
Bingo Item 24
|
||||||
Bingo Item 25`;
|
Bingo Item 25`;
|
||||||
|
|
||||||
let rows = 5;
|
let rows = 5;
|
||||||
let cols = 5;
|
let cols = 5;
|
||||||
let grid = [];
|
let grid = [];
|
||||||
let running_bingo = true;
|
let running_bingo = true;
|
||||||
let tried_to_regen = false;
|
let tried_to_regen = false;
|
||||||
let bingoCount = 0;
|
|
||||||
|
|
||||||
let closeAlertButton = null;
|
// Function to add an empty cookie called gameLock
|
||||||
let alertBackground = null;
|
export function addGameLockCookie() {
|
||||||
let closeSettingsButton = null;
|
document.cookie = `gameLock=;path=/;max-age=31536000`; // Cookie lasts for 1 year
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
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() {
|
// Function to check if the gameLock cookie is present
|
||||||
// Check rows for bingo
|
export function isGameLockCookiePresent() {
|
||||||
for (let row of grid) {
|
return document.cookie.split('; ').some(cookie => cookie.startsWith('gameLock='));
|
||||||
if (row.every(cell => cell.clicked)) {
|
}
|
||||||
return true; // Bingo detected in this row
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null; // Return null if the cookie is not found
|
||||||
|
}
|
||||||
|
|
||||||
|
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!');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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
|
function resetBingo() {
|
||||||
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;
|
running_bingo = false;
|
||||||
tried_to_regen = 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();
|
generateBingo();
|
||||||
|
deleteGameLockCookie();
|
||||||
}
|
}
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<head>
|
afterUpdate(() => {
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
adjustFontSizes();
|
||||||
</head>
|
});
|
||||||
<div class="root-bingo-container">
|
|
||||||
<div class="flex-row-container">
|
function adjustFontSizes() {
|
||||||
<div class="bingo-container bingo-main-container">
|
const cells = document.querySelectorAll('.bingo-cell');
|
||||||
<h1>Randomized Bingo Generator</h1>
|
cells.forEach(cell => {
|
||||||
<div style="margin-bottom: 10px;">
|
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>
|
||||||
</div>
|
</div>
|
||||||
<div class="notice-box">
|
{/if}
|
||||||
<div class="button-container">
|
{#if running_bingo && !tried_to_regen}
|
||||||
<button on:click={generateBingo}>Regenerate Bingo</button>
|
<i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
|
||||||
<button on:click={downloadPDF}>Download as PDF</button>
|
{/if}
|
||||||
<button on:click={openSettings}>Configure Bingo</button>
|
|
||||||
</div>
|
{#if grid.length > 0}
|
||||||
{#if running_bingo && tried_to_regen}
|
<div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
|
||||||
<div class="bingo-running-warning">
|
{#each grid as row}
|
||||||
<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>
|
{#each row as cell}
|
||||||
<button on:click={resetBingo}>Stop Bingo and Regenerate</button>
|
<div
|
||||||
|
class="bingo-cell"
|
||||||
|
on:click={() => {cell.clicked = !cell.clicked; cellClicked();}}
|
||||||
|
class:clicked={cell.clicked}
|
||||||
|
>
|
||||||
|
{cell.value}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/each}
|
||||||
{#if running_bingo && !tried_to_regen}
|
{/each}
|
||||||
<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>
|
</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>
|
||||||
|
|
||||||
<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 />
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 252 KiB |
Loading…
Add table
Add a link
Reference in a new issue