replace RecolorOptions with DollColorSchemeDto

src/lib/utils/sprite-utils.ts

@@ -1,24 +1,18 @@
-import { commands } from "$lib/bindings";
+import { commands, type DollColorSchemeDto } from "$lib/bindings";
 import onekoGif from "../../assets/oneko/oneko.gif";
 
-export interface RecolorOptions {
-  bodyColor: string;
-  outlineColor: string;
-  applyTexture?: boolean;
-}
-
 export async function getSpriteSheetUrl(
-  options?: RecolorOptions,
+  options?: DollColorSchemeDto,
 ): Promise<string> {
-  if (!options || !options.bodyColor || !options.outlineColor) {
+  if (!options) {
     return onekoGif;
   }
 
   try {
     const result = await commands.recolorGifBase64(
-      options.bodyColor,
+      options.body,
-      options.outlineColor,
+      options.outline,
-      options.applyTexture ?? true,
+      true, // TODO: default true for now, will add customization in the future
     );
     return `data:image/gif;base64,${result}`;
   } catch (e) {

src/routes/app-menu/components/doll-preview.svelte

@@ -3,10 +3,9 @@
   import { SPRITE_SETS, SPRITE_SIZE } from "$lib/constants/pet-sprites";
   import { getSpriteSheetUrl } from "$lib/utils/sprite-utils";
   import PetSprite from "$lib/components/PetSprite.svelte";
+  import type { DollColorSchemeDto } from "$lib/bindings";
 
-  export let bodyColor: string;
+  export let dollColorScheme: DollColorSchemeDto;
-  export let outlineColor: string;
-  export let applyTexture: boolean = true;
 
   let previewBase64: string | null = null;
   let error: string | null = null;
@@ -21,11 +20,7 @@
 
   function generatePreview() {
     error = null;
-    getSpriteSheetUrl({
+    getSpriteSheetUrl(dollColorScheme)
-      bodyColor,
-      outlineColor,
-      applyTexture,
-    })
       .then((url: string) => {
         previewBase64 = url;
       })
@@ -70,7 +65,7 @@
     }, 3000);
   }
 
-  $: if (bodyColor && outlineColor) {
+  $: if (dollColorScheme) {
     debouncedGeneratePreview();
   }
 
@@ -103,7 +98,10 @@
         />
       </div>
     {:else}
-      <div class="size-full skeleton" style:background-color={bodyColor}></div>
+      <div
+        class="size-full skeleton"
+        style:background-color={dollColorScheme.body}
+      ></div>
     {/if}
   </div>
 </div>

src/routes/app-menu/tabs/your-dolls/dolls-list.svelte

@@ -43,10 +43,7 @@
               class="flex flex-col w-full text-center py-6 gap-2 *:mx-auto hover:opacity-70 hover:cursor-pointer"
             >
               <div class="flex justify-center">
-                <DollPreview
+                <DollPreview dollColorScheme={doll.configuration.colorScheme} />
-                  bodyColor={doll.configuration.colorScheme.body}
-                  outlineColor={doll.configuration.colorScheme.outline}
-                />
               </div>
               <p
                 style:background-color={doll.configuration.colorScheme.body}

src/routes/doll-editor/+page.svelte

@@ -16,8 +16,8 @@
   let saving = false;
 
   let name = "";
-  let bodyColor = "#FFFFFF";
+  let body = "#FFFFFF";
-  let outlineColor = "#000000";
+  let outline = "#000000";
 
   onMount(async () => {
     // Check URL search params for ID
@@ -39,8 +39,8 @@
     try {
       const doll: DollDto = await commands.getDoll(id);
       name = doll.name;
-      bodyColor = doll.configuration.colorScheme.body;
+      body = doll.configuration.colorScheme.body;
-      outlineColor = doll.configuration.colorScheme.outline;
+      outline = doll.configuration.colorScheme.outline;
     } catch (e) {
       error = (e as Error)?.message ?? String(e);
       console.error("Failed to fetch doll:", e);
@@ -59,8 +59,8 @@
           name,
           configuration: {
             colorScheme: {
-              body: bodyColor,
+              body: body,
-              outline: outlineColor,
+              outline: outline,
             },
           },
         };
@@ -70,8 +70,8 @@
           name,
           configuration: {
             colorScheme: {
-              body: bodyColor,
+              body: body,
-              outline: outlineColor,
+              outline: outline,
             },
           },
         };
@@ -108,7 +108,7 @@
   {:else}
     <div class="h-full w-full p-4 gap-4 flex flex-col">
       <div class="flex justify-center mt-4">
-        <DollPreview {bodyColor} {outlineColor} />
+        <DollPreview dollColorScheme={{ body, outline }} />
       </div>
       <div class="form-control w-full">
         <label class="label" for="name-input">
@@ -132,13 +132,13 @@
             id="body-color-input"
             type="color"
             class="input input-bordered w-10 p-0"
-            bind:value={bodyColor}
+            bind:value={body}
             disabled={saving}
           />
           <input
             type="text"
             class="input input-bordered w-full"
-            bind:value={bodyColor}
+            bind:value={body}
             disabled={saving}
           />
         </div>
@@ -152,13 +152,13 @@
             id="outline-color-input"
             type="color"
             class="input input-bordered w-10 p-0"
-            bind:value={outlineColor}
+            bind:value={outline}
             disabled={saving}
           />
           <input
             type="text"
             class="input input-bordered w-full"
-            bind:value={outlineColor}
+            bind:value={outline}
             disabled={saving}
           />
         </div>

src/routes/welcome/+page.svelte

@@ -98,7 +98,9 @@
                 <input
                   class="input input-bordered input-sm"
                   type="password"
-                  autocomplete={useRegister ? "new-password" : "current-password"}
+                  autocomplete={useRegister
+                    ? "new-password"
+                    : "current-password"}
                   bind:value={form.password}
                   placeholder="••••••••"
                 />
@@ -146,7 +148,9 @@
                 }
               }}
             >
-              {useRegister ? "Already have an account? Sign in" : "New here? Create an account"}
+              {useRegister
+                ? "Already have an account? Sign in"
+                : "New here? Create an account"}
             </button>
             <button
               class="btn btn-link p-0 btn-sm text-base-content w-max"
@@ -175,7 +179,7 @@
   >
     <div></div>
     <div class="flex flex-col scale-200 origin-bottom-right">
-      <DollPreview bodyColor="b7f2ff" outlineColor="496065" />
+      <DollPreview dollColorScheme={{ body: "b7f2ff", outline: "496065" }} />
     </div>
   </div>
 </div>