From d821941fbdef35a34e39b066b48dd5221d2f028f Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Wed, 7 Jan 2026 16:17:38 +0800
Subject: [PATCH] step 1 put pet color into pet menu

---
 src/routes/scene/+page.svelte                   |  5 ++---
 .../scene/{ => components}/DesktopPet.svelte    | 17 +++++++++++------
 src/routes/scene/components/PetMenu.svelte      | 10 ++++++++++
 3 files changed, 23 insertions(+), 9 deletions(-)
 rename src/routes/scene/{ => components}/DesktopPet.svelte (85%)
 create mode 100644 src/routes/scene/components/PetMenu.svelte

diff --git a/src/routes/scene/+page.svelte b/src/routes/scene/+page.svelte
index a2c406f..745410c 100644
--- a/src/routes/scene/+page.svelte
+++ b/src/routes/scene/+page.svelte
@@ -9,7 +9,7 @@
 
   import { invoke } from "@tauri-apps/api/core";
 
-  import DesktopPet from "./DesktopPet.svelte";
+  import DesktopPet from "./components/DesktopPet.svelte";
 
   let innerWidth = 0;
   let innerHeight = 0;
@@ -95,8 +95,7 @@
             targetX={position.mapped.x * innerWidth}
             targetY={position.mapped.y * innerHeight}
             name={getFriendName(userId)}
-            bodyColor={config?.colorScheme?.body}
-            outlineColor={config?.colorScheme?.outline}
+            {config}
             {isInteractive}
           />
         {/if}
diff --git a/src/routes/scene/DesktopPet.svelte b/src/routes/scene/components/DesktopPet.svelte
similarity index 85%
rename from src/routes/scene/DesktopPet.svelte
rename to src/routes/scene/components/DesktopPet.svelte
index 5b161f9..54c8aff 100644
--- a/src/routes/scene/DesktopPet.svelte
+++ b/src/routes/scene/components/DesktopPet.svelte
@@ -4,14 +4,15 @@
   import { usePetState } from "$lib/composables/usePetState";
   import { getSpriteSheetUrl } from "$lib/utils/sprite-utils";
   import PetSprite from "$lib/components/PetSprite.svelte";
-  import onekoGif from "../../assets/oneko/oneko.gif";
+  import onekoGif from "../../../assets/oneko/oneko.gif";
+  import PetMenu from "./PetMenu.svelte";
+  import type { DollConfigurationDto } from "../../../types/bindings/DollConfigurationDto";
 
   export let id = "";
   export let targetX = 0;
   export let targetY = 0;
   export let name = "";
-  export let bodyColor: string | undefined = undefined;
-  export let outlineColor: string | undefined = undefined;
+  export let config: DollConfigurationDto | undefined = undefined;
   export let isInteractive = false;
 
   const { position, currentSprite, updatePosition, setPosition } = usePetState(
@@ -26,7 +27,7 @@
   let isPetMenuOpen = false;
 
   // Watch for color changes to regenerate sprite
-  $: updateSprite(bodyColor, outlineColor);
+  $: updateSprite(config?.colorScheme.body, config?.colorScheme.outline);
 
   $: (isInteractive, (isPetMenuOpen = false));
 
@@ -86,11 +87,15 @@
 >
   {#if isPetMenuOpen}
     <div
-      class="absolute -translate-y-44 w-30 h-40 bg-neutral-500 rounded-md"
+      class="absolute -translate-y-44 w-30 h-40 *:size-full"
       role="menu"
       tabindex="0"
       aria-label="Pet Menu"
-    ></div>
+    >
+      {#if config}
+        <PetMenu {config} />
+      {/if}
+    </div>
   {/if}
   <button
     onclick={() => {
diff --git a/src/routes/scene/components/PetMenu.svelte b/src/routes/scene/components/PetMenu.svelte
new file mode 100644
index 0000000..3b99dd4
--- /dev/null
+++ b/src/routes/scene/components/PetMenu.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { type DollConfigurationDto } from "../../../types/bindings/DollConfigurationDto";
+  export let config: DollConfigurationDto;
+</script>
+
+<div class="bg-base-100 border border-base-200 card p-1">
+  <div class="flex flex-col gap-1">
+    <p class="text-xs">{config.colorScheme.body}</p>
+  </div>
+</div>