fix: correctly update themes image

shezard · Feb 11, 2024 · aba3259 · aba3259
1 parent 317082c
commit aba3259
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { currentTheme, image, themes } from '$lib/store';
+    import { currentTheme, step, themes } from '$lib/store';
     import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 
     let isOpen = false;
@@ -10,7 +10,7 @@
 
     function closeMenu() {
         isOpen = false;
-        image.next();
+        step.next();
     }
 </script>
 

diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -26,7 +26,7 @@ const createApplicationState = function () {
         subscribe,
         update: (applicationState: 'started' | 'paused' | 'clear') => {
             if (applicationState === 'clear') {
-                image.next();
+                step.next();
                 applicationState = 'paused';
             }
             set(applicationState);
@@ -36,26 +36,29 @@ const createApplicationState = function () {
 
 export const applicationState = createApplicationState();
 
-const images = derived([currentTheme], ([$currentTheme]) => {
-    return themeData[$currentTheme];
-});
-
-const createImage = function () {
-    let step = 0;
+const createStep = function () {
 
-    const { subscribe, set } = writable(get(images)[step]);
+    const { subscribe, update } = writable(0);
 
     return {
         subscribe,
         next: () => {
-            step++;
-            step = step % get(images).length;
-            set(get(images)[step]);
+            update((step) => {
+                const length = themeData[get(currentTheme)].length;
+                step++;
+                step = step % length;
+                return step
+            });
         }
     };
 };
 
-export const image = createImage();
+export const step = createStep();
+
+export const image = derived([currentTheme, step], ([$currentTheme, $step]) => {
+    const images = themeData[$currentTheme]
+    return images[$step];
+});;
 
 const currentTime = readable(0, (set) => {
     let rafId: number;
@@ -134,7 +137,7 @@ export const mm = derived(secondTiming, ($secondTiming) => {
 
 export const ss = derived([secondTiming, poseDuration], ([$secondTiming, $poseDuration]) => {
     if ($secondTiming > 0 && $secondTiming % $poseDuration === 0) {
-        image.next();
+        step.next();
     }
 
     return ($secondTiming % 60).toString().padStart(2, '0');