mirror of
https://github.com/JonasunderscoreJones/BingoGenerator.git
synced 2025-10-23 00:49:19 +02:00
Merge pull request #1 from JonasunderscoreJones/css-redesign
Full redesign
This commit is contained in:
GitHub
commit
c1ab850d27
5 changed files with 502 additions and 91 deletions
|
|
@ -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>
|
||||
|
|
@ -91,4 +91,45 @@ export function getGridFromCookie(cookieName = 'bingoGrid') {
|
|||
export function deleteSavedGridCookie(cookieName = 'bingoGrid') {
|
||||
document.cookie = `${cookieName}=;path=/;max-age=0`;
|
||||
deleteGameLockCookie();
|
||||
}
|
||||
|
||||
/**
|
||||
* Functions to add the Page-Theme cookie
|
||||
* @module cookies
|
||||
*/
|
||||
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,32 +1,120 @@
|
|||
.bingo-grid-container {
|
||||
: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;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border: 2px solid #333;
|
||||
margin: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px;
|
||||
background-color: #f4f4f9;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.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-bottom: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.bingo-cell {
|
||||
border: 1px solid #333;
|
||||
width: 150px; /* Bigger size */
|
||||
height: 150px; /* Bigger size */
|
||||
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; /* Base font size */
|
||||
background-color: #fff;
|
||||
color: black;
|
||||
font-size: 18px;
|
||||
background-color: var(--bingo-cell-bg-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -34,57 +122,161 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.bingo-cell:hover, .bingo-cell.clicked:hover {
|
||||
background-color: var(--bingo-cell-bg-color-hover);
|
||||
}
|
||||
|
||||
.bingo-cell.clicked {
|
||||
background-color: #add8e6; /* Highlight color for clicked state */
|
||||
background-color: var(--bingo-cell-clicked-bg-color);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 30px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
background-color: var(--button-bg-color);
|
||||
color: var(--button-color);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
color: var(--button-bg-color);
|
||||
background-color: var(--button-bg-color-hover);
|
||||
}
|
||||
|
||||
.bingo-running-warning {
|
||||
/* Add your styles as needed */
|
||||
width: 20vw;
|
||||
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;
|
||||
border: 5px solid var(--text-color);
|
||||
}
|
||||
|
||||
.alert-background {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Fixed position */
|
||||
.bingo-running-warning:hover {
|
||||
background-color: var(--warning-bg-color-hover);
|
||||
}
|
||||
|
||||
.overlay-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Dark background */
|
||||
justify-content: center; /* Center the alert content */
|
||||
align-items: center; /* Center the alert content */
|
||||
z-index: 1000; /* Keep it on top */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--overlay-bg-color);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
background-color: #fff;
|
||||
.overlay-content {
|
||||
background-color: var(--overlay-content-bg-color);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
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,15 +1,18 @@
|
|||
<script>
|
||||
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 } from '$lib/cookies.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');
|
||||
|
||||
let theme = 'light';
|
||||
|
||||
let inputText = `Bingo Item 1
|
||||
Bingo Item 2
|
||||
Bingo Item 3
|
||||
|
|
@ -45,6 +48,8 @@ Bingo Item 25`;
|
|||
|
||||
let closeAlertButton = null;
|
||||
let alertBackground = null;
|
||||
let closeSettingsButton = null;
|
||||
let settingsBackground = null;
|
||||
|
||||
function openAlert() {
|
||||
alertBackground.style.display = 'flex';
|
||||
|
|
@ -54,6 +59,14 @@ Bingo Item 25`;
|
|||
alertBackground.style.display = 'none';
|
||||
}
|
||||
|
||||
function openSettings() {
|
||||
settingsBackground.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
settingsBackground.style.display = 'none';
|
||||
}
|
||||
|
||||
|
||||
function generateBingo() {
|
||||
if (running_bingo) {
|
||||
|
|
@ -201,21 +214,40 @@ Bingo Item 25`;
|
|||
}
|
||||
|
||||
function triggerConfetti() {
|
||||
// `party.confetti` can be used for screen-wide confetti
|
||||
party.confetti(document.body, {
|
||||
count: party.variation.range(50, 2000), // Number of confetti pieces
|
||||
spread: 70, // Spread of confetti
|
||||
size: party.variation.range(0.5, 1.5), // Size of confetti
|
||||
});
|
||||
}
|
||||
// `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();
|
||||
|
||||
|
|
@ -232,57 +264,111 @@ Bingo Item 25`;
|
|||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
{/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}
|
||||
{#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}
|
||||
<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>
|
||||
{/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="alert-background" class="alert-background">
|
||||
<div class="alert-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 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 />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue