From 0312516d7ae057f591571f8d7211b695370cd145 Mon Sep 17 00:00:00 2001
From: Lumi <lumi@bnuuy.systems>
Date: Sat, 10 Oct 2026 00:25:33 -0700
Subject: [PATCH] Keep the meters in their usual order for hosted pets

The meters rendered in the stats object's key order. The host serializes
saves with alphabetically sorted keys, so a pet that had been hosted showed
clean/energy/fun/tummy instead of tummy/fun/energy/clean, even after coming
back local. Render the meters and debug sliders from a fixed STATS order.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BmRXrH3X8VnAPbuCgo6PgW
---
 docs/host-page.md         | 2 +-
 web/app/config.ts         | 5 ++++-
 web/components/Debug.tsx  | 6 +++---
 web/components/Device.tsx | 6 +++---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/docs/host-page.md b/docs/host-page.md
index d61382c..eccc89d 100644
--- a/docs/host-page.md
+++ b/docs/host-page.md
@@ -164,7 +164,7 @@ needed.
 | Class | Used for |
 |---|---|
 | `pet-btn`, `text-button`, `px-icon` | action, food and game-pad buttons, small buttons, pixel icons (style with `image-rendering: pixelated`) |
-| `pet-meter`, `pet-meter-label`, `pet-meter-pips`, `pet-meter-word` | stat rows; pips are `<i>` elements and a full one has class `on` |
+| `pet-meter`, `pet-meter-label`, `pet-meter-pips`, `pet-meter-word` | stat rows, always tummy, fun, energy, clean (`STATS` in `web/app/config.ts`), whatever key order a save has; pips are `<i>` elements and a full one has class `on` |
 | `chat-pet`, `chat-owner`, `chat-event`, `chat-act`, `chat-who`, `chat-emote`, `chat-tool`, `chat-tool-detail`, `live`, `typing` | list items and parts of chat lines; `chat-act` is a silent pet line (the pet acting on its own), `live` is the line currently streaming, and `typing` marks a live line that has no words yet (its `<p>` holds three empty `<span>` dots to animate) |
 | `diary-page`, `drafting`, `diary-doodles` | diary pages, the page being written, the sticker row |
 | `pet-toast` | transient notifications inside `pet-toasts` |
diff --git a/web/app/config.ts b/web/app/config.ts
index 2772fda..150adc6 100644
--- a/web/app/config.ts
+++ b/web/app/config.ts
@@ -1,4 +1,4 @@
-import type { Action, Config, Stage } from "../types.ts";
+import type { Action, Config, Stage, Stat } from "../types.ts";
 import { DAY, HOUR } from "./utils.ts";
 const element = document.getElementById("pet-config");
 if (!element?.textContent) throw new Error("Missing #pet-config JSON configuration");
@@ -41,6 +41,9 @@ export const NAME_IDEAS = [
   "Fig",
   "Bun",
 ];
+// Display order of the meters. Saves can arrive with keys in another order
+// (the host serializes them alphabetically), so never render by key order.
+export const STATS: readonly Stat[] = ["tummy", "fun", "energy", "clean"];
 export const STAGE_AGE: [Stage, number][] = [
   ["adult", 5 * DAY],
   ["teen", 2 * DAY],
diff --git a/web/components/Debug.tsx b/web/components/Debug.tsx
index 22c519e..2b18f54 100644
--- a/web/components/Debug.tsx
+++ b/web/components/Debug.tsx
@@ -1,13 +1,13 @@
 import { useState } from "preact/hooks";
 import { disturbanceCount } from "../app/animation.ts";
 import { offerThing } from "../app/care.ts";
-import { DAY, MIN, STAGE_AGE } from "../app/config.ts";
+import { DAY, MIN, STAGE_AGE, STATS } from "../app/config.ts";
 import { copyText, setAge } from "../app/debug.ts";
 import { writeDiary } from "../app/diary.ts";
 import { age, dayNum, worldState } from "../app/simulation.ts";
 import { save } from "../app/storage.ts";
 import { brain, emit, store, ui, view } from "../app/store.ts";
-import type { Disturbance, Stat } from "../types.ts";
+import type { Disturbance } from "../types.ts";
 import { header, wakeChance } from "../world.ts";
 import { canRunLocally, isRemote } from "../app/hosting.ts";
 export function Debug() {
@@ -67,7 +67,7 @@ export function Debug() {
             </button>
           </div>
           <div class="debug-grid">
-            {(Object.keys(s.stats) as Stat[]).map((k) => (
+            {STATS.map((k) => (
               <div class="debug-stat" key={k}>
                 <label for={`debug-${k}`}>{k}</label>
                 <input
diff --git a/web/components/Device.tsx b/web/components/Device.tsx
index 0f5bed9..f03b8ec 100644
--- a/web/components/Device.tsx
+++ b/web/components/Device.tsx
@@ -2,12 +2,12 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { brainHas } from "../app/brain.ts";
 import { attachCanvas } from "../app/canvas.ts";
 import { act } from "../app/care.ts";
-import { ACT_NEEDS, CFG } from "../app/config.ts";
+import { ACT_NEEDS, CFG, STATS } from "../app/config.ts";
 import { gameControl } from "../app/game.ts";
 import { dayNum } from "../app/simulation.ts";
 import { brain, store, view } from "../app/store.ts";
 import { ui } from "../app/store.ts";
-import type { Action, Stat } from "../types.ts";
+import type { Action } from "../types.ts";
 import { FOODS, levelWords } from "../world.ts";
 import { Setup } from "./Setup.tsx";
 import { Icon } from "./shared.tsx";
@@ -81,7 +81,7 @@ export function Device() {
           `${s.pet.name} · ${s.pet.stage} · day ${dayNum()} · ${s.pet.traits.join(", ")}${status.length ? " · " + status.join(", ") : ""}`}
       </p>
       <div id="pet-meters" class="pet-meters" hidden={!s.pet}>
-        {(Object.keys(s.stats) as Stat[]).map((k) => (
+        {STATS.map((k) => (
           <div class="pet-meter" key={k}>
             <span class="pet-meter-label">{k}</span>
             <span
-- 
knotmirror 0.0.1