feat: add theme selector

README.md

@@ -30,7 +30,6 @@ npx npm-check-updates -u
 npm install
 ```
 
-
 ## Adding data from unsplash random API
 
 ### Get an access token from unsplash api

justfile

@@ -2,7 +2,7 @@ set dotenv-load := true
 
 init theme:
     #!/bin/bash
-    test -f ./data/{{theme}}.json || echo '[]' > ./data/{{theme}}.json
+    test -f ./src/data/{{theme}}.json || echo '[]' > ./src/data/{{theme}}.json
 
 get_data theme:
     #!/bin/bash
@@ -16,7 +16,7 @@ make_unique theme:
     import { readFileSync } from 'node:fs';
     import { promisify } from 'node:util';
     import { exec } from 'node:child_process';
-    import existingData from './data/{{theme}}.json' assert { type: 'json' };
+    import existingData from './src/data/{{theme}}.json' assert { type: 'json' };
 
     const pexec = promisify(exec);
 
@@ -34,4 +34,4 @@ make_unique theme:
 
 build theme: (init theme)
     #!/bin/bash
-    just make_unique {{theme}} > ./data/{{theme}}-tmp.json && mv ./data/{{theme}}-tmp.json ./data/{{theme}}.json
+    just make_unique {{theme}} > ./src/data/{{theme}}-tmp.json && mv ./src/data/{{theme}}-tmp.json ./src/data/{{theme}}.json

src/app.postcss

@@ -2,3 +2,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root [data-theme='skeleton'] {
+    --theme-rounded-base: 4px;
+    --theme-rounded-container: 4px;
+}

src/lib/components/Chrono.svelte

@@ -57,15 +57,15 @@
 </div>
 
 <div class="flex justify-around pb-4">
-    <button class="px-2 rounded variant-ringed-primary" on:click={start}>
+    <button class="px-2 rounded variant-ringed" on:click={start}>
         <span class={$applicationState === 'started' ? 'animate-ping' : ''}>
             <i class="mi-play" />
         </span> Start
     </button>
-    <button class="px-2 rounded variant-ringed-primary" on:click={pause}>
+    <button class="px-2 rounded variant-ringed" on:click={pause}>
         <i class="mi-pause" /> Pause
     </button>
-    <button class="px-2 rounded variant-ringed-primary" on:click={clear}>
+    <button class="px-2 rounded variant-ringed" on:click={clear}>
         <i class="mi-refresh" /> Clear
     </button>
     <span class="px-2">

src/lib/components/Menu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { currentTheme, themes } from '$lib/store';
+    import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
+
+    let isOpen = false;
+
+    function toggleMenu() {
+        isOpen = !isOpen;
+    }
+
+    function closeMenu() {
+        isOpen = false;
+    }
+</script>
+
+<div class="absolute z-10 p-4 gap-2 flex flex-col items-start">
+    <button class="px-2 rounded variant-filled" on:click={toggleMenu}>
+        <i class="mi-menu" /> <span class="capitalize">{$currentTheme}</span>
+    </button>
+
+    <div class:isOpen class="hidden">
+        <RadioGroup flexDirection="flex-col">
+            {#each $themes as theme}
+                <RadioItem bind:group={$currentTheme} name="pose-duration" value={theme} on:click={closeMenu}>
+                    <span class="capitalize">{theme}</span>
+                </RadioItem>
+            {/each}
+        </RadioGroup>
+    </div>
+</div>
+
+<style>
+    .isOpen {
+        position: relative;
+        display: block !important;
+    }
+</style>

src/lib/store.ts

@@ -1,6 +1,23 @@
 import { writable, readable, derived, type Readable } from 'svelte/store';
 import { raf, caf, animate } from '$lib/utils';
-import { data } from '$lib/data';
+import { get } from 'svelte/store';
+
+const themeFiles = import.meta.glob('../data/*.json');
+const themeData: Record<string, object> = {};
+
+function formatPath(path: string) {
+    return path.replace('../data/', '').replace('.json', '');
+}
+
+await Promise.all(
+    Object.entries(themeFiles).map(async ([path, content]) => {
+        const imported = await content();
+        themeData[formatPath(path)] = imported.default;
+    })
+);
+
+export const themes = writable<string[]>(Object.keys(themeFiles).map(formatPath));
+export const currentTheme = writable(get(themes)[0]);
 
 const createApplicationState = function () {
     const { subscribe, set } = writable('paused');
@@ -19,19 +36,23 @@ const createApplicationState = function () {
 
 export const applicationState = createApplicationState();
 
-const createImage = function () {
-    const images = data;
+const images = derived<object[]>([currentTheme], ([$currentTheme]) => {
+    return themeData[$currentTheme];
+});
 
+const createImage = function () {
     let step = 0;
 
-    const { subscribe, set } = writable(images[step]);
+    console.log(get(images));
+
+    const { subscribe, set } = writable(get(images)[step]);
 
     return {
         subscribe,
         next: () => {
             step++;
-            step = step % images.length;
-            set(images[step]);
+            step = step % get(images).length;
+            set(get(images)[step]);
         }
     };
 };
@@ -74,7 +95,7 @@ const createPoseDuration = function () {
         set: (seconds: number) => {
             animate(() => {
                 set(seconds);
-            })
+            });
         }
     };
 };

src/lib/utils.ts

@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
 
-export function animate(cb : () => void) {
-    if(!document.startViewTransition) {
+export function animate(cb: () => void) {
+    if (!document.startViewTransition) {
         cb();
         return;
     }

src/routes/+page.svelte

@@ -2,11 +2,13 @@
     import Chrono from '$lib/components/Chrono.svelte';
     import TimingBar from '$lib/components/TimingBar.svelte';
     import Subject from '$lib/components/Subject.svelte';
+    import Menu from '$lib/components/Menu.svelte';
 </script>
 
 <div class="container mx-auto flex justify-center pt-2">
     <div class="columns-1 flex flex-col justify-center card w-[400px] overflow-y-hidden">
         <header>
+            <Menu />
             <Subject />
             <TimingBar />
         </header>