Doll preview

src/app.css

@@ -76,3 +76,7 @@
 :root {
   background-color: transparent;
 }
+
+.pixelated {
+  image-rendering: pixelated;
+}

src/routes/app-menu/tabs/DollPreview.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { invoke } from "@tauri-apps/api/core";
+  import { fade } from "svelte/transition";
+
+  export let bodyColor: string;
+  export let outlineColor: string;
+  export let applyTexture: boolean = true;
+
+  let previewBase64: string | null = null;
+  let error: string | null = null;
+  let debounceTimer: number | null = null;
+
+  function generatePreview() {
+    error = null;
+    try {
+      invoke<string>("recolor_gif_base64", {
+        whiteColorHex: bodyColor,
+        blackColorHex: outlineColor,
+        applyTexture,
+      })
+        .then((result) => {
+          previewBase64 = result;
+        })
+        .catch((e) => {
+          error = (e as Error)?.message ?? String(e);
+          console.error(e);
+        });
+    } catch (e) {
+      error = (e as Error)?.message ?? String(e);
+      console.error(e);
+    }
+  }
+
+  function debouncedGeneratePreview() {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      generatePreview();
+    }, 300); // Adjust debounce delay as needed (300ms is a common starting point)
+  }
+
+  $: if (bodyColor && outlineColor) {
+    debouncedGeneratePreview();
+  }
+
+  onDestroy(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
+</script>
+
+<div class="size-32">
+  {#if error}
+    <div class="size-full flex justify-center items-center text-xs text-error">
+      Error
+    </div>
+  {:else if previewBase64}
+    <div
+      class="size-full bg-cover bg-center pixelated"
+      style="background-image: url('data:image/gif;base64,{previewBase64}')"
+    ></div>
+  {:else}
+    <div class="size-full skeleton" style:background-color={bodyColor}></div>
+  {/if}
+</div>

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

@@ -4,6 +4,7 @@
   import type { DollDto } from "../../../types/bindings/DollDto";
   import type { CreateDollDto } from "../../../types/bindings/CreateDollDto";
   import type { UpdateDollDto } from "../../../types/bindings/UpdateDollDto";
+  import DollPreview from './DollPreview.svelte';
 
   let dolls: DollDto[] = [];
   let loading = false;
@@ -144,6 +145,9 @@
         <div class="card bg-base-200 shadow-sm">
           <div class="card-body p-4">
             <h3 class="card-title text-base">{doll.name}</h3>
+            <div class="flex justify-center mb-2">
+              <DollPreview bodyColor={doll.configuration.colorScheme.body} outlineColor={doll.configuration.colorScheme.outline} />
+            </div>
             <div class="flex gap-2 text-sm text-base-content/70">
               <div class="flex items-center gap-1">
                 <div
@@ -191,10 +195,13 @@
             type="text"
             placeholder="Doll Name"
             class="input input-bordered w-full"
-            bind:value={newDollName}
-          />
-        </div>
-        <div class="form-control w-full mt-2">
+             bind:value={newDollName}
+           />
+         </div>
+         <div class="flex justify-center mt-4">
+           <DollPreview bodyColor={newDollColorBody} outlineColor={newDollColorOutline} />
+         </div>
+         <div class="form-control w-full mt-2">
           <label class="label">
             <span class="label-text">Body Color</span>
           </label>
@@ -253,10 +260,13 @@
             type="text"
             placeholder="Doll Name"
             class="input input-bordered w-full"
-            bind:value={editDollName}
-          />
-        </div>
-        <div class="form-control w-full mt-2">
+             bind:value={editDollName}
+           />
+         </div>
+         <div class="flex justify-center mt-4">
+           <DollPreview bodyColor={editDollColorBody} outlineColor={editDollColorOutline} />
+         </div>
+         <div class="form-control w-full mt-2">
           <label class="label">
             <span class="label-text">Body Color</span>
           </label>

src/routes/scene/DesktopPet.svelte

@@ -250,8 +250,4 @@
     pointer-events: none; /* Let clicks pass through */
     will-change: transform;
   }
-
-  .pixelated {
-    image-rendering: pixelated;
-  }
 </style>