mirror of
https://github.com/JonasunderscoreJones/BingoGenerator.git
synced 2025-10-22 22:09:18 +02:00
main redesign
This commit is contained in:
parent
596613f72f
commit
c1433e20c1
3 changed files with 304 additions and 92 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,107 @@
|
|||
.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: rgb(132, 86, 0);
|
||||
|
||||
--overlay-bg-color: rgba(0, 0, 0, 0.7);
|
||||
--overlay-content-bg-color: #1b1b1b;
|
||||
|
||||
--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(--bg-color);
|
||||
--button-color: var(--text-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;
|
||||
|
||||
--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);
|
||||
}
|
||||
|
||||
.bingo-container {
|
||||
display: flex;
|
||||
margin: auto auto;
|
||||
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);
|
||||
margin: 7px;
|
||||
border-radius: 8px;}
|
||||
|
||||
.bingo-main-container {
|
||||
background-color: var(--content-bg-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bingo-grid-container {
|
||||
width: 95vw;
|
||||
height: 94vh;
|
||||
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 +109,129 @@
|
|||
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;
|
||||
background-color: var(--warning-bg-color);
|
||||
border-radius: 10px;
|
||||
/* center text and buttons */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-background {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Fixed position */
|
||||
.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);
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.cookie-notice {
|
||||
background-color: var(--bg-color);
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
margin-top: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 4px 8px var(--shadow-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
$: queryParams = $page.url.searchParams;
|
||||
$: bingocode = queryParams.get('bingo');
|
||||
|
||||
let theme = 'light';
|
||||
|
||||
let inputText = `Bingo Item 1
|
||||
Bingo Item 2
|
||||
Bingo Item 3
|
||||
|
|
@ -45,6 +47,8 @@ Bingo Item 25`;
|
|||
|
||||
let closeAlertButton = null;
|
||||
let alertBackground = null;
|
||||
let closeSettingsButton = null;
|
||||
let settingsBackground = null;
|
||||
|
||||
function openAlert() {
|
||||
alertBackground.style.display = 'flex';
|
||||
|
|
@ -54,6 +58,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 +213,34 @@ 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);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
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 +257,95 @@ 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>
|
||||
<div class="flex-row-container">
|
||||
<div class="bingo-container bingo-main-container">
|
||||
<h1>Randomized Bingo Generator</h1>
|
||||
<div style="margin-bottom: 10px;">
|
||||
</div>
|
||||
{/if}
|
||||
{#if running_bingo && !tried_to_regen}
|
||||
<i style="margin-bottom: 10px;">A game is currently running. Changes made to the configuration are not being updated to the grid.</i>
|
||||
{/if}
|
||||
<p>NOTE: If there are more lines than Bingo cells, not all Items will be in the Bingo. The selection is still randomized.</p>
|
||||
<div>
|
||||
<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 style="background-color: darkred;" 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 class="settings-element cookie-notice">
|
||||
<p>Notice: This Website uses functional Cookies to store the Running Bingo Game as well as the Entered Bingo Entries.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#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-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}
|
||||
{/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="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>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<body>
|
||||
<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></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>
|
||||
</div>
|
||||
<br>
|
||||
<button id="close-settings" class="close-btn">Save and Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue