diff --git a/README.md b/README.md index 067a422..fbce9bb 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,20 @@ # BingoGenerator Website Found at [bingo.jonasjones.dev](https://bingo.jonasjones.dev/) and [bingogenerator.jonasjones.dev](https://bingogenerator.jonasjones.dev/) + +## Online Multiplayer Roadmap +- shared Games + - same board + - tiles to bingo count (game-internal leaderboard for all players) + +- cloud-saved templates + - save/load bingo-templates + - ability to make public/private + +- perhaps ingame chat? (very much not a priority though) + +- technical details + - absolutely need warning before enabling online features (since there is no monitoring of any kind) + - cloudflare DB with worker attached (online.bingo.jonasjones.dev) + - on page tab to toggle offline/online mode. only offline bingos are saved to cookie + - the only online data stored in cookies is login data (session key) + - games, templates, etc. are only saved on DB diff --git a/src/app.html b/src/app.html index de72b10..7fbb7ae 100644 --- a/src/app.html +++ b/src/app.html @@ -2,12 +2,14 @@ + Bingo + %sveltekit.head% diff --git a/src/lib/scripts/online.js b/src/lib/scripts/online.js new file mode 100644 index 0000000..71568c6 --- /dev/null +++ b/src/lib/scripts/online.js @@ -0,0 +1 @@ +// all methods like fetching, communicating with and requesting game moves with the server \ No newline at end of file diff --git a/src/lib/styles/main.css b/src/lib/styles/main.css index 299997e..b6b05f7 100644 --- a/src/lib/styles/main.css +++ b/src/lib/styles/main.css @@ -23,7 +23,7 @@ --settings-input-bg-color: #1b1b1d; --settings-input-text-color: white; - --settomgs-input-border-color: #333; + --settings-input-border-color: #333; --shadow-color: rgba(0, 0, 0, 0.3); } @@ -53,11 +53,49 @@ --settings-input-bg-color: #f0f0f0; --settings-input-text-color: black; - --settomgs-input-border-color: #ccc; + --settings-input-border-color: #ccc; --shadow-color: rgba(0, 0, 0, 0.3); } +[data-theme='pink'] { + /* Pleasant Pink theme with good contrast */ + --bg-color: #e0218a; /* A vibrant pink for the background */ + --content-bg-color: #fddde6; /* A softer, light pink for content background */ + --text-color: #e52b50; /* Black text for high contrast and readability */ + --prompt-text-color: white; /* Black text for prompts */ + + --bingo-cell-border-color: #fb607f; /* A slightly darker pink for bingo cell borders */ + --bingo-cell-bg-color: #ffc0cb; /* Light pink for the bingo cell background */ + --bingo-cell-bg-color-hover: #e63e62; /* A medium pink for hover effect */ + --bingo-cell-clicked-bg-color: #e0218a; /* Vibrant pink for clicked state */ + + --button-bg-color: #ffc0cb; /* Black buttons for strong contrast */ + --button-color: var(--bg-color); /* Button text in vibrant pink */ + --button-bg-color-hover: #e63e62; /* Hover effect in medium pink for buttons */ + + --warning-bg-color: rgb(255, 204, 0); /* A bright yellow for warnings (keeps visibility) */ + + --overlay-bg-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white overlay */ + --overlay-content-bg-color: #ffc0cb; /* Light pink background for overlay content */ + --overlay-content-border-color: #e0218a; /* Vibrant pink for overlay borders */ + + --settings-bg-color: #e0218a; /* Vibrant pink for settings background */ + --settings-element-bg-color: #ffc0cb; /* Light pink for settings element background */ + + --settings-input-bg-color: #fb607f; /* Medium pink for input background */ + --settings-input-text-color: black; /* Black text for inputs */ + --settings-input-border-color: #e63e62; /* Darker pink for input borders */ + + --shadow-color: rgba(0, 0, 0, 0.3); /* Subtle shadow to give depth */ + + body, button { + font-family: "Emilys Candy", serif; + font-weight: 400; + font-style: normal; + } +} + body { font-family: "Noto Sans", sans-serif; font-size: 16px; @@ -102,12 +140,13 @@ body { display: grid; gap: 6px; margin: auto; + transition: transform 0.2s ease-in-out; } .bingo-cell { border: 1px solid var(--bingo-cell-border-color); - width: 150px; - height: 150px; + width: calc((100vh - 10rem)/5); + height: calc((100vh - 10rem)/5); display: flex; justify-content: center; align-items: center; @@ -128,6 +167,7 @@ body { .bingo-cell.clicked { background-color: var(--bingo-cell-clicked-bg-color); + color: var(--prompt-text-color); } button { @@ -180,6 +220,7 @@ button:hover { border-radius: 8px; min-width: 300px; text-align: center; + justify-content: center; box-shadow: 0 4px 8px var(--shadow-color); border: 2px solid var(--overlay-content-border-color); } @@ -254,6 +295,7 @@ button:hover { padding: 15px; margin: 10px; border-radius: 8px; + color: var(--prompt-text-color); box-shadow: inset 0 4px 8px var(--shadow-color); } @@ -275,8 +317,10 @@ button:hover { text-align: center; margin-top: auto; margin-bottom: auto; + color: var(--prompt-text-color); } .cookie-notice { margin-top: auto; + color: var(--prompt-text-color); } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9ce7d23..dd1bfba 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -226,17 +226,26 @@ 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 - }); + if (theme === 'dark') { + // `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 + }); + } else { + // pink confetti + party.sparkles(document.body, { + count: party.variation.range(50, 10000), // Number of confetti pieces + speed: party.variation.range(500, 500), // Speed 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'; + theme = theme === 'dark' ? 'pink' : 'dark'; document.documentElement.setAttribute('data-theme', theme); setThemeCookie(theme); } @@ -301,6 +310,11 @@ Bingo Item 25`; A game is currently running. Changes made to the configuration are not being updated to the grid. {/if} + {#if theme === 'pink'} +
+ Confetti +
+ {/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.

@@ -310,7 +324,7 @@ Bingo Item 25`;
{#each grid as row} {#each row as cell} -
@@ -366,7 +384,7 @@ Bingo Item 25`;

Display

- +
diff --git a/static/barbie_bingo.png b/static/barbie_bingo.png new file mode 100644 index 0000000..9c447e2 Binary files /dev/null and b/static/barbie_bingo.png differ diff --git a/static/congrats_bingo.png b/static/congrats_bingo.png new file mode 100644 index 0000000..6d929c7 Binary files /dev/null and b/static/congrats_bingo.png differ diff --git a/static/hello_barbie_bingo.png b/static/hello_barbie_bingo.png new file mode 100644 index 0000000..5a76e68 Binary files /dev/null and b/static/hello_barbie_bingo.png differ diff --git a/static/hello_kitty_bingo.png b/static/hello_kitty_bingo.png new file mode 100644 index 0000000..758f277 Binary files /dev/null and b/static/hello_kitty_bingo.png differ