Commit WIP stuff

.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+.idea

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

docker-compose.yml

@@ -0,0 +1,11 @@
+services:
+  ollama:
+    image: ollama/ollama:rocm
+    devices:
+      - "/dev/kfd:/dev/kfd"
+      - "/dev/dri:/dev/dri"
+    volumes:
+      - "dot-ollama:/root/.ollama"
+
+volumes:
+  dot-ollama:

src/lib/BingoCard.svelte

@@ -1,12 +1,12 @@
 <script>
     import BingoCardValue from '$lib/BingoCardValue.svelte';
 
-    const {spaces = []} = $props();
+    const {spaces = $bindable([])} = $props();
 </script>
 
 <section class="bingo-card">
-    {#each spaces as space, i}
-        <BingoCardValue value={space}></BingoCardValue>
+    {#each spaces as _, i}
+        <BingoCardValue bind:value={spaces[i]}></BingoCardValue>
     {/each}
 </section>
 

src/lib/BingoSettings.svelte

@@ -0,0 +1,23 @@
+<script>
+    import pako from 'pako';
+    import { page } from '$app/stores';
+    let { randomizeUrl = $bindable(false), spaces = $bindable([])} = $props();
+
+    async function onCopyClick() {
+        const jsonData = JSON.stringify(randomizeUrl ? spaces.toSorted(() => 0.5-Math.random()) : spaces);
+        const compressedData = pako.deflate(jsonData);
+        $page.url.searchParams.set('spaces', compressedData)
+        const newUrl = new URL(window.location.toString());
+        newUrl.searchParams.set('spaces', compressedData);
+        await navigator.clipboard.writeText(newUrl.toString());
+    }
+
+</script>
+
+<div>
+    <label>
+        <input type="checkbox" bind:checked={randomizeUrl}  />
+        Randomize on copy
+    </label>
+    <button onclick={onCopyClick} >Copy</button>
+</div>

src/routes/+page.svelte

@@ -1,26 +1,48 @@
 <script>
     import BingoCard from '$lib/BingoCard.svelte';
     import {browser} from '$app/environment';
-    import pako from 'pako';
+    import {page} from '$app/stores';
 
-    let spaces = $state([...Array(25).keys()].fill('Free Space', 12, 13));
+    import pako from 'pako';
+    import BingoSettings from "$lib/BingoSettings.svelte";
+
+    let spaces = $state([...Array(25).keys()].map(val => String(val)).fill('Free Space', 12, 13));
+    let randomizeUrl = $state(false);
 
     $effect(() => {
         if (!browser) return;
-        const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has('data')) {
-            const textDecoder = new TextDecoder();
-            const compressedData = Uint8Array.from(urlParams.get('data').split(',').map(Number))
-            const jsonData = textDecoder.decode(pako.inflate(compressedData))
+        if ($page.url.searchParams.has('spaces')) {
+            const compressedData = Uint8Array.from($page.url.searchParams.get('spaces').split(',').map(Number))
+            const jsonData = (new TextDecoder).decode(pako.inflate(compressedData))
             spaces = JSON.parse(jsonData);
+            const newUrl = new URL(window.location.toString());
+            newUrl.searchParams.delete('spaces');
+            history.pushState(null, '', newUrl.toString());
         }
     })
 </script>
 
 <main>
-    <h1>Bingo</h1>
-    <BingoCard spaces={spaces} />
+    <section id="heading">
+        <h1>Bingo</h1>
+    </section>
+    <section id="card">
+        <BingoCard bind:spaces={spaces} />
+    </section>
+    <section id="settings">
+        <BingoSettings bind:randomizeUrl={randomizeUrl} ></BingoSettings>
+    </section>
 </main>
 
 <style>
+    h1 {
+        margin: 0;
+        padding: 0;
+    }
+
+    main {
+        display: flex;
+        flex-flow: column;
+        gap: 1rem;
+    }
 </style>