feat: reset balance button

src/lib/components/SettingsWindow/SettingsWindow.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { DEFAULT_BALANCE } from '$lib/constants/game';
+  import { balance } from '$lib/stores/game';
   import { isGameSettingsOpen } from '$lib/stores/layout';
   import { isAnimationOn } from '$lib/stores/settings';
   import { hasPreferReducedMotion } from '$lib/utils/settings';
@@ -24,11 +26,18 @@
       <p class="text-sm font-medium text-white">Game Settings</p>
     </svelte:fragment>
 
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-5">
       <div class="flex items-center gap-4">
         <Switch id="isAnimationOn" bind:checked={$isAnimationOn} />
         <Label.Root for="isAnimationOn" class="text-sm  text-white">Animations</Label.Root>
       </div>
+
+      <button
+        on:click={() => ($balance = DEFAULT_BALANCE)}
+        class="touch-manipulation self-start rounded-md bg-red-500 px-3 py-2 text-sm text-white transition-colors hover:bg-red-400 active:bg-red-600"
+      >
+        Reset Balance
+      </button>
     </div>
   </DraggableWindow>
 {/if}

src/lib/constants/game.ts

@@ -2,6 +2,8 @@ import { RiskLevel } from '$lib/types';
 import { getBinColors } from '$lib/utils/colors';
 import { computeBinProbabilities } from '$lib/utils/numbers';
 
+export const DEFAULT_BALANCE = 200;
+
 export const LOCAL_STORAGE_KEY = {
   BALANCE: 'plinko_balance',
   SETTINGS: {

src/lib/stores/game.ts

@@ -1,5 +1,5 @@
 import PlinkoEngine from '$lib/components/Plinko/PlinkoEngine';
-import { binColor } from '$lib/constants/game';
+import { binColor, DEFAULT_BALANCE } from '$lib/constants/game';
 import {
   RiskLevel,
   type BetAmountOfExistingBalls,
@@ -37,7 +37,7 @@ export const totalProfitHistory = writable<number[]>([0]);
  * on every balance change. This prevents unnecessary writes to local storage, which can
  * be slow on low-end devices.
  */
-export const balance = writable<number>(200);
+export const balance = writable<number>(DEFAULT_BALANCE);
 
 /**
  * RGB colors for every bin. The length of the array is the number of bins.

src/lib/utils/game.ts

@@ -3,13 +3,17 @@ import { balance } from '$lib/stores/game';
 import { get } from 'svelte/store';
 
 export function setBalanceFromLocalStorage() {
-  const balanceVal = window.localStorage.getItem(LOCAL_STORAGE_KEY.BALANCE);
-  if (balanceVal) {
-    balance.set(parseFloat(balanceVal));
+  const rawValue = window.localStorage.getItem(LOCAL_STORAGE_KEY.BALANCE);
+  const parsedValue = parseFloat(rawValue ?? '');
+  if (!isNaN(parsedValue)) {
+    balance.set(parsedValue);
   }
 }
 
 export function writeBalanceToLocalStorage() {
-  const balanceVal = get(balance).toFixed(2);
-  window.localStorage.setItem(LOCAL_STORAGE_KEY.BALANCE, balanceVal);
+  const balanceVal = get(balance);
+  if (!isNaN(balanceVal)) {
+    const balanceValStr = balanceVal.toFixed(2);
+    window.localStorage.setItem(LOCAL_STORAGE_KEY.BALANCE, balanceValStr);
+  }
 }

tests/game.spec.ts

@@ -25,6 +25,16 @@ test.describe('Balance', () => {
 
     await expect(page.getByText('1,234.00')).toBeVisible();
   });
+
+  test('can handle improper local storage value', async ({ page, context }) => {
+    await context.addInitScript(() => {
+      window.localStorage.setItem('plinko_balance', 'foo_bar');
+    });
+
+    await page.goto('/');
+
+    await expect(page.getByText('200.00')).toBeVisible();
+  });
 });
 
 test.describe('Manual Betting', () => {