Merge pull request #3 from JonasunderscoreJones/online

added roadmap

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

src/lib/scripts/online.js

@@ -0,0 +1 @@
+// all methods like fetching, communicating with and requesting game moves with the server

src/lib/styles/main.css

@@ -102,12 +102,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;

src/routes/+page.svelte

@@ -310,7 +310,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