diff --git a/README.md b/README.md index e414055..067a422 100644 --- a/README.md +++ b/README.md @@ -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/) diff --git a/package-lock.json b/package-lock.json index 24f1e29..877c03b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/package.json b/package.json index 6153a9e..b027537 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/app.html b/src/app.html index 7264648..de72b10 100644 --- a/src/app.html +++ b/src/app.html @@ -6,6 +6,8 @@ + + %sveltekit.head% diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte new file mode 100644 index 0000000..7e71c19 --- /dev/null +++ b/src/lib/components/Footer.svelte @@ -0,0 +1,90 @@ +
+
+ + + + +
+ +

Website by Jonas_Jones 2021 - {year}

+ +
+ + Homepage + + + + Blog + + + + Docs + + +
+
+ + + + \ No newline at end of file diff --git a/src/lib/cookies.js b/src/lib/cookies.js new file mode 100644 index 0000000..f02b5f5 --- /dev/null +++ b/src/lib/cookies.js @@ -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} 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} 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(); +} \ No newline at end of file diff --git a/src/lib/styles/main.css b/src/lib/styles/main.css new file mode 100644 index 0000000..299997e --- /dev/null +++ b/src/lib/styles/main.css @@ -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; +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7775963..48f2708 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,13 +1,19 @@ - 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(); - } - }); - - - - -
-

Randomized Bingo Generator

-
- - - - - -
-

Enter your items below and click the button to generate a random 5x5 bingo grid.

- -

NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.

- - - - {#if running_bingo && tried_to_regen} -
-

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.

- + + + +
+
+
+

Randomized Bingo Generator

+
- {/if} - {#if running_bingo && !tried_to_regen} - A game is currently running. Changes made to the configuration are not being updated to the grid. - {/if} - - {#if grid.length > 0} -
- {#each grid as row} - {#each row as cell} -
{cell.clicked = !cell.clicked; cellClicked();}} - class:clicked={cell.clicked} - > - {cell.value} +
+
+ + + +
+ {#if running_bingo && tried_to_regen} +
+

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.

+
- {/each} - {/each} + {/if} + {#if running_bingo && !tried_to_regen} + A game is currently running. Changes made to the configuration are not being updated to the grid. + {/if} +
+
+

This Website uses functional Cookies to store the Running Bingo Game, Settings and the Entered Bingo Entries.

They can be deleted in the Settings.

+
+
+
+ {#if grid.length > 0} +
+ {#each grid as row} + {#each row as cell} + + {/each} + {/each} +
+ {:else} +
+

Click the Button to generate a new Bingo

+ +
+ {/if}
- {/if} -

Notice: This Website uses functional Cookies to store the Running Bingo Game as well as the Entered Bingo Entries.

+ +
+
+

Bingo!

+

You achieved a new Bingo!
You now have {bingoCount} Bingos.

+ +
+
+ +
+
+

Bingo Settings

+
+
+

Bingo Items

+
+

NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.

+ +
+
+
+
+

Bingo Dimensions

+
+ + +
+
+ + +
+
+
+

Display

+
+ +
+
+
+

Reset

+
+ +
+
+
+
+
+ +
+
+
+ +