Persist game state in localstorage

package.json

@@ -46,6 +46,7 @@
     "ky": "^1.5.0",
     "lightningcss": "^1.25.1",
     "svelte": "^4.2.19",
+    "svelte-persisted-store": "^0.11.0",
     "typescript": "^5.5.4"
   },
   "devDependencies": {

src/components/qwixx/PlayerSheet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { writable } from 'svelte/store';
+  import { persisted } from 'svelte-persisted-store';
 
   import { Direction } from '../../lib/qwixx/types.ts';
   import { createColorConfig } from '../../lib/qwixx/game.ts';
@@ -14,9 +14,21 @@
     createColorConfig('Green', [140, 90, 35], Direction.DESCENDING),
     createColorConfig('Blue', [215, 100, 50], Direction.DESCENDING),
   ];
-  const penalties = writable(0);
+  const penalties = persisted('qwixx-penalties', 0);
+
+  function reset() {
+    penalties.reset();
+    colors.forEach((color) => {
+      color.reset();
+    });
+  }
 </script>
 
+<header>
+  <h1><span aria-hidden>🎲</span> Qwixx</h1>
+  <button on:click={reset} class="button">Reset</button>
+</header>
+
 <section>
   <h2>Numbers</h2>
 
@@ -37,6 +49,18 @@
 </div>
 
 <style>
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--layout-gutter);
+  }
+
+  h1 {
+    font-family: var(--font-family-display);
+    font-size: 2rem;
+  }
+
   .numbers {
     display: flex;
     flex-wrap: wrap;

src/lib/qwixx/game.ts

@@ -1,4 +1,5 @@
-import { derived, writable } from 'svelte/store';
+import { derived } from 'svelte/store';
+import { persisted } from 'svelte-persisted-store';
 
 import { Direction, type ColorConfig, type HSLColor } from './types';
 import { POINTS } from './constants';
@@ -8,7 +9,7 @@ export function createColorConfig(
   color: HSLColor,
   direction: Direction,
 ): ColorConfig {
-  const numbers = writable<number[]>([]);
+  const numbers = persisted<number[]>(`qwixx-numbers-${label}`, []);
   const points = derived(numbers, ($numbers) => {
     let crosses = $numbers.length;
 
@@ -27,7 +28,7 @@ export function createColorConfig(
 
     return POINTS[crosses] || 0;
   });
-  const isLocked = writable(false);
+  const isLocked = persisted(`qwixx-locked-${label}`, false);
 
   const [hue, saturation, lightness] = color;
   const style = `--hue: ${hue}; --saturation: ${saturation}%; --lightness: ${lightness}%;`;
@@ -82,6 +83,11 @@ export function createColorConfig(
     });
   };
 
+  const reset = () => {
+    numbers.reset();
+    isLocked.reset();
+  };
+
   return {
     label,
     direction,
@@ -90,5 +96,6 @@ export function createColorConfig(
     points,
     isLocked,
     style,
+    reset,
   };
 }

src/lib/qwixx/types.ts

@@ -15,4 +15,5 @@ export type ColorConfig = {
   points: Readable<number>;
   isLocked: Writable<boolean>;
   style: string;
+  reset: () => void;
 };