feat(settings): reset balance button

AnsonH · Nov 19, 2024 · 8aea4a9 · 8aea4a9
1 parent e29d203
commit 8aea4a9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/lib/components/SettingsWindow/SettingsWindow.svelte b/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}
diff --git a/src/lib/constants/game.ts b/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: {

diff --git a/src/lib/stores/game.ts b/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.