added page title

added pink mode
Merge pull request #3 from JonasunderscoreJones/online
2025-10-24 14:39:18 +02:00 · 2025-03-26 20:14:55 +01:00 · 2025-03-26 16:39:37 +01:00 · 2025-03-26 16:01:44 +01:00 · 2025-03-26 15:49:06 +01:00 · 2025-03-26 14:55:23 +01:00
9 changed files with 96 additions and 13 deletions
--- 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
--- a/src/app.html
+++ b/src/app.html
@ -2,12 +2,14 @@
 <html lang="en">

 <head>
+	<title>Bingo</title>
 	<meta name="darkreader-lock">
 	<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">
+	<link href="https://fonts.googleapis.com/css2?family=Emilys+Candy&display=swap" rel="stylesheet">
 	%sveltekit.head%
 </head>

--- a/src/lib/scripts/online.js
+++ b/src/lib/scripts/online.js
@ -0,0 +1 @@
+// all methods like fetching, communicating with and requesting game moves with the server
--- 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);
 }
--- 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`;
          <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>
+      {#if theme === 'pink'}
+      <div style="justify-content: center; flex-direction: column" class="notice-box">
+        <img src="/hello_barbie_bingo.png" width="80%" alt="Confetti" />
+      </div>
+      {/if}
      <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>
@ -310,7 +324,7 @@ Bingo Item 25`;
        <div class="bingo-grid" style="grid-template-columns: repeat({cols}, 1fr);">
          {#each grid as row}
            {#each row as cell}
-              <button class="bingo-cell"
+              <button class="bingo-cell" style="width: calc((100vh - 10rem)/ {cols}); height: calc((100vh - 10rem)/ {rows});"
              on:click={() => { cell.clicked = !cell.clicked; cellClicked(); }}
              on:keydown={(event) => {
                if (event.key === 'Enter' || event.key === ' ') { // Handle Enter or Space key
@ -336,6 +350,10 @@ Bingo Item 25`;
    <div class="overlay-content">
      <h2>Bingo!</h2>
      <p>You achieved a new Bingo!<br>You now have <b>{bingoCount}</b> Bingos.</p>
+      {#if theme === 'pink'}
+        <img src="/congrats_bingo.png" height="500vh" alt="Confetti" />
+        <br>
+      {/if}
      <button id="close-alert" class="close-btn">Close</button>
    </div>
  </div>
@ -366,7 +384,7 @@ Bingo Item 25`;
          <div class="settings-box flex-column-item">
            <h3>Display</h3>
            <div class="settings-element">
-              <button on:click={toggleTheme}>Toggle Dark/Light Mode</button>
+              <button on:click={toggleTheme}>Toggle Dark/Lit Mode</button>
            </div>
          </div>
          <div class="settings-box flex-column-item">
--- a/static/barbie_bingo.png
+++ b/static/barbie_bingo.png
--- a/static/congrats_bingo.png
+++ b/static/congrats_bingo.png
--- a/static/hello_barbie_bingo.png
+++ b/static/hello_barbie_bingo.png
--- a/static/hello_kitty_bingo.png
+++ b/static/hello_kitty_bingo.png
Author	SHA1	Message	Date
Jonas_Jones	b1e334c191	added page title	2025-03-26 20:14:55 +01:00
Jonas_Jones	5fcdef1123	added pink mode	2025-03-26 16:39:37 +01:00
Jonas_Jones	36a7afb3b0	Merge pull request #3 from JonasunderscoreJones/online added roadmap	2025-03-26 16:01:44 +01:00
Jonas_Jones	b141f2eb73	fixed tile scaling on different bingo dimensions	2025-03-26 15:49:06 +01:00
Jonas_Jones	4bd946b75e	fixed bingo zoom on different scaling	2025-03-26 14:55:23 +01:00
Jonas_Jones	57e735c991	added roadmap	2025-03-26 14:06:32 +01:00
				`@ -0,0 +1 @@`
				`// all methods like fetching, communicating with and requesting game moves with the server`