Jonas_Jones/BingoGenerator
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/BingoGenerator.git synced 2025-10-22 22:09:18 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

added notice for missing bingo

Browse source
This commit is contained in:
Jonas_Jones 2025-03-26 01:38:19 +01:00
parent 3f582af8bf
commit 22c541a798
2 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/lib/styles/main.css
View file

@ -257,6 +257,15 @@ button:hover {
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;
}

33
src/routes/+page.svelte
View file

@ -284,21 +284,26 @@ Bingo Item 25`;
</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>
<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}
{/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>