feat: add drawind number

shezard · Feb 11, 2024 · e76c5be · e76c5be
1 parent d0c2847
commit e76c5be
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { currentTheme, step, themes } from '$lib/store';
+    import { currentTheme, step, stepNumber, themes } from '$lib/store';
     import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 
     let isOpen = false;
@@ -14,9 +14,11 @@
     }
 </script>
 
-<div class="absolute z-10 p-4 gap-2 flex flex-col items-start">
+<div class="absolute z-10 p-4 gap-2 flex flex-col ">
     <button class="px-2 rounded variant-filled" on:click={toggleMenu}>
-        <i class="mi-menu" /> <span class="capitalize">{$currentTheme}</span>
+        <i class="mi-menu" />
+        <span class="capitalize">{$currentTheme}</span>
+        <span class="text-xs">({$step}/{$stepNumber})</span>
     </button>
 
     <div class:isOpen class="hidden">

diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -54,10 +54,15 @@ const createStep = function () {
 
 export const step = createStep();
 
+export const stepNumber = derived([currentTheme], ([$currentTheme]) => {
+    const images = themeData[$currentTheme]
+    return images.length;
+});
+
 export const image = derived([currentTheme, step], ([$currentTheme, $step]) => {
     const images = themeData[$currentTheme]
     return images[$step];
-});;
+});
 
 const currentTime = readable(0, (set) => {
     let rafId: number;