@linxin666/dsh-pet 0.3.20 → 0.3.22

package/lib/client.js

@@ -75,6 +75,55 @@ window.__ModuleLoader__.load({
 			return previous !== null && JSON.stringify(previous) === JSON.stringify(next);
 		}
 		//#endregion
+		//#region src/client/work-tick-gate.ts
+		/**
+		* Page-wide work-tick gate for the pet's work mode. Hot reloads can leave
+		* several GameplayHud instances alive, each running its own work interval;
+		* without a shared gate every interval would call workTick and each stale call
+		* re-rolls, re-grants treats and re-plays the success/fail track, so the
+		* outcome appears to play several times per window. The gate accepts the first
+		* adjudication of a window and silently suppresses the duplicates that follow.
+		*
+		* The window is the active pet's own `gameplay.work.tickMs`, not a constant: a
+		* pet configured with a shorter cadence must actually adjudicate that often,
+		* while a fixed window would downgrade it without saying so (#1494).
+		* @module @linxin666/dsh-pet/client/work-tick-gate
+		*/
+		/** Window used when the active pet declares no work cadence. */
+		const DEFAULT_WORK_TICK_MS = 1e4;
+		/** Manifest bounds for `gameplay.work.tickMs` (src/gameplay.ts). */
+		const MIN_WORK_TICK_MS = 1e3;
+		const MAX_WORK_TICK_MS = 6e4;
+		/**
+		* The gate window for one pet: its configured cadence, clamped to the manifest's
+		* own bounds so a malformed registry entry cannot disable or flood the gate.
+		* @param tickMs - the active definition's `gameplay.work.tickMs`, when it has one.
+		* @returns the window in milliseconds.
+		*/
+		function workTickWindowMs(tickMs) {
+			if (typeof tickMs !== "number" || !Number.isFinite(tickMs)) return DEFAULT_WORK_TICK_MS;
+			return Math.min(MAX_WORK_TICK_MS, Math.max(MIN_WORK_TICK_MS, tickMs));
+		}
+		/**
+		* Create a gate.
+		* @param now - the clock, injectable so tests control the window.
+		* @returns the gate over that clock.
+		*/
+		function createWorkTickGate(now = Date.now) {
+			let lastAdjudicatedAt = 0;
+			return {
+				allow: (tickMs) => {
+					const at = now();
+					if (at - lastAdjudicatedAt < workTickWindowMs(tickMs)) return false;
+					lastAdjudicatedAt = at;
+					return true;
+				},
+				reset: () => {
+					lastAdjudicatedAt = 0;
+				}
+			};
+		}
+		//#endregion
 		//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 		function r(e) {
 			var t, f, n = "";
@@ -322,12 +371,13 @@ window.__ModuleLoader__.load({
 					const delta = now - last;
 					last = now;
 					elapsed += delta;
-					const duration = decoration.durations[index] ?? 120;
+					let duration = decoration.durations[index] ?? 120;
 					if (elapsed >= duration) {
 						do {
 							elapsed -= duration;
 							if (index < segment.to) index += 1;
 							else if (decoration.loop) index = segment.from;
+							duration = decoration.durations[index] ?? 120;
 						} while (elapsed >= duration);
 						el.style.backgroundPosition = position(index);
 					}
@@ -1095,6 +1145,7 @@ window.__ModuleLoader__.load({
 					gameplayBus.setIdleTrack = (track) => {
 						handleRef.current?.setIdleTrack(track);
 					};
+					if (gameplayBus.idleTrack !== void 0) handle.setIdleTrack(gameplayBus.idleTrack);
 					cleanups.push(() => {
 						gameplayBus.setTrack = void 0;
 						gameplayBus.setIdleTrack = void 0;
@@ -1208,6 +1259,7 @@ window.__ModuleLoader__.load({
 			const def = definition.gameplay;
 			const view = ui.snapshot?.gameplay;
 			const phase = ui.snapshot?.phase ?? "idle";
+			const persistedSkin = ui.snapshot?.skin;
 			const [open, setOpen] = (0, react.useState)(false);
 			const [page, setPage] = (0, react.useState)("root");
 			const [skinId, setSkinId] = (0, react.useState)(void 0);
@@ -1400,20 +1452,24 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				const work = def?.work;
 				if (def === void 0 || work === void 0 || view?.mode !== "work") return void 0;
-				bus.setTrack?.(work.state);
+				const skinGameplay = definition.frames2d?.skins?.find((skin) => skin.id === skinIdRef.current)?.gameplayTracks;
+				/** The state's track, swapped for the skin's override when it declares one. */
+				const trackOf = (state) => skinGameplay?.[state] ?? state;
+				bus.setTrack?.(trackOf(work.state));
 				let resultTimer = 0;
 				const timer = window.setInterval(() => {
 					if (busyRef.current) return;
 					busyRef.current = true;
 					api.workTick().then((result) => {
 						busyRef.current = false;
+						if (modeRef.current !== "work") return;
 						applyResult(result);
 						if (result.ok !== true || result.outcome === void 0) return;
-						const resultTrack = result.outcome === "success" ? work.successState : work.failState;
+						const resultTrack = trackOf(result.outcome === "success" ? work.successState : work.failState);
 						const hold = result.outcome === "success" ? work.resultMs?.success ?? 1300 : work.resultMs?.fail ?? 1900;
 						bus.setTrack?.(resultTrack);
 						resultTimer = window.setTimeout(() => {
-							if (modeRef.current === "work") bus.setTrack?.(work.state);
+							if (modeRef.current === "work") bus.setTrack?.(trackOf(work.state));
 						}, hold);
 					}, () => {
 						busyRef.current = false;
@@ -1427,7 +1483,8 @@ window.__ModuleLoader__.load({
 			}, [
 				definition.id,
 				def,
-				view?.mode
+				view?.mode,
+				skinId
 			]);
 			(0, react.useEffect)(() => {
 				const sleep = def?.sleep;
@@ -1464,10 +1521,32 @@ window.__ModuleLoader__.load({
 			const setMode = (next) => {
 				api.setMode(next).then(applyResult, () => void 0);
 			};
+			(0, react.useEffect)(() => {
+				setSkinId(persistedSkin);
+			}, [definition.id, persistedSkin]);
+			(0, react.useEffect)(() => {
+				const skin = definition.frames2d?.skins?.find((candidate) => candidate.id === skinId);
+				bus.idleTrack = skin?.idleTrack;
+				bus.setIdleTrack?.(skin?.idleTrack);
+			}, [
+				definition.id,
+				skinId,
+				persistedSkin
+			]);
 			const skins = definition.frames2d?.skins;
+			/** The base idle track one skin id resolves to (undefined = default look). */
+			const skinTrackOf = (id) => id === void 0 ? void 0 : definition.frames2d?.skins?.find((candidate) => candidate.id === id)?.idleTrack;
 			const selectSkin = (skin) => {
 				setSkinId(skin?.id);
 				bus.setIdleTrack?.(skin?.idleTrack);
+				const restore = () => {
+					setSkinId(persistedSkin);
+					bus.setIdleTrack?.(skinTrackOf(persistedSkin));
+				};
+				api.setSkin(skin?.id).then((result) => {
+					if (result.ok) return;
+					restore();
+				}, restore);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: hudRef,
@@ -2000,10 +2079,11 @@ window.__ModuleLoader__.load({
 		* Frame presentation has two modes picked once at mount by capability
 		* probing:
 		* - Canvas bitmap buffer (default where createImageBitmap/fetch/2D context
-		*   exist): every frame is decoded exactly once into an ImageBitmap during
-		*   the warm pass and drawn onto one <canvas> - steady-state playback issues
-		*   zero DOM mutations and zero re-decodes (measured hotspot: swapping
-		*   <img>.src per frame drove image decode + invalidation every tick).
+		*   exist): frames are decoded once into an ImageBitmap on demand, with a
+		*   bounded look-ahead window over the playing track, and drawn onto one
+		*   <canvas> - steady-state playback issues zero DOM mutations and zero
+		*   re-decodes (measured hotspot: swapping <img>.src per frame drove image
+		*   decode + invalidation every tick).
 		* - Classic <img> fallback (jsdom/tests or missing APIs): identical to the
 		*   historical behavior - cache-warm Image elements plus guarded src swaps,
 		*   so environments without modern decoding keep working unchanged.
@@ -2187,6 +2267,25 @@ window.__ModuleLoader__.load({
 					pumpFrames();
 					return job;
 				};
+				/**
+				* Bounded look-ahead window: decode only the frames playback is about to
+				* need. The historical warm pass decoded every frame of every track up
+				* front - a shipped pet carries ~1.1k 512x683 frames, so that pass pulls
+				* tens of megabytes and retains every decoded bitmap for the life of the
+				* page. Prefetching the playing track's next frames keeps loops and phase
+				* switches warm while unplayed tracks (and every unselected skin's
+				* frames) stay on demand, where playback jumps the queue anyway.
+				*/
+				const PREFETCH_AHEAD = 12;
+				const prefetchAhead = (trackId, index) => {
+					const def = config.tracks[trackId];
+					if (def === void 0) return;
+					const end = Math.min(def.frames.length, index + 1 + PREFETCH_AHEAD);
+					for (let ahead = index + 1; ahead < end; ahead += 1) {
+						const url = def.frames[ahead];
+						if (url !== void 0) loadFrame(url);
+					}
+				};
 				let disposed = false;
 				let timer;
 				let watchdog;
@@ -2221,6 +2320,7 @@ window.__ModuleLoader__.load({
 				const show = (trackId, index) => {
 					const url = config.tracks[trackId]?.frames[index];
 					if (url === void 0) return;
+					prefetchAhead(trackId, index);
 					if (img !== null) {
 						if (img.getAttribute("src") !== url) img.src = url;
 						return;
@@ -2277,11 +2377,6 @@ window.__ModuleLoader__.load({
 					const expected = (def.durations[frameIndex] ?? 200) + WATCHDOG_MS;
 					if (Date.now() - lastAdvance > expected) tick();
 				}, WATCHDOG_MS);
-				const warmTrackIds = [.../* @__PURE__ */ new Set([...Object.values(config.phases), config.phases.idle])];
-				for (const warmTrack of [...warmTrackIds, ...Object.keys(config.tracks)].map((id) => config.tracks[id])) {
-					if (warmTrack === void 0) continue;
-					for (const warmUrl of warmTrack.frames) loadFrame(warmUrl);
-				}
 				play(track);
 				let disposedOnce = false;
 				const dispose = () => {
@@ -3656,7 +3751,7 @@ window.__ModuleLoader__.load({
 		/** The building package's version, when the bundle carries it. */
 		function bakedVersion() {
 			try {
-				return "0.3.20";
+				return "0.3.22";
 			} catch {
 				return;
 			}
@@ -3739,6 +3834,7 @@ window.__ModuleLoader__.load({
 			setConfig: (patch) => petFetch("/api/pet/set-config", patch),
 			setName: (name) => petFetch("/api/pet/set-name", { name }),
 			setPet: (petId) => petFetch("/api/pet/set-pet", { petId }),
+			setSkin: (skin) => petFetch("/api/pet/set-skin", skin === void 0 ? {} : { skin }),
 			gameplayTouch: (zone) => petFetch("/api/pet/gameplay/touch", zone === void 0 ? {} : { zone }),
 			gameplaySetMode: (mode) => petFetch("/api/pet/gameplay/mode", { mode }),
 			gameplayWorkTick: () => petFetch("/api/pet/gameplay/work-tick", {}),
@@ -3763,16 +3859,17 @@ window.__ModuleLoader__.load({
 		* first-level settings section.
 		* @param ctx - client root context.
 		*/
+		/** The page-wide work-tick gate; its window follows the active pet's cadence. */
+		const workTickGate = createWorkTickGate();
 		/**
-		* Module-wide work-tick throttle (ms). Hot reloads can leave several
-		* GameplayHud instances alive, each running its own 10s work interval;
-		* without a shared gate every interval would call workTick and each stale
-		* call re-rolls, re-grants treats and re-plays the success/fail track, so
-		* the outcome appears to play several times per window. This shared marker
-		* accepts the first adjudication of a window and silently suppresses the
-		* duplicates that follow. Reset when (re-)entering work mode.
+		* The work cadence the active pet declares, when its registry entry is known.
+		* @param store - the pet store holding the host snapshot and the registry list.
+		* @returns the configured `gameplay.work.tickMs`, or undefined when unknown.
 		*/
-		let lastWorkTickAt = 0;
+		function activeWorkTickMs(store) {
+			const state = store.getSnapshot();
+			return state.pets.find((entry) => entry.id === state.snapshot?.pet.id)?.gameplay?.work?.tickMs;
+		}
 		function apply(ctx) {
 			reportDailyHeartbeat([{ name: "@linxin666/dsh-pet" }]);
 			ctx.effect(() => {
@@ -3934,14 +4031,19 @@ window.__ModuleLoader__.load({
 						},
 						gameplay: {
 							touch: (zone) => petApi.gameplayTouch(zone),
+							setSkin: (skin) => petApi.setSkin(skin).then((result) => {
+								if (result.ok) pollNow();
+								return result;
+							}, () => ({
+								ok: false,
+								error: "transport"
+							})),
 							setMode: async (mode) => {
-								if (mode === "work") lastWorkTickAt = 0;
+								if (mode === "work") workTickGate.reset();
 								return petApi.gameplaySetMode(mode);
 							},
 							workTick: async () => {
-								const now = Date.now();
-								if (now - lastWorkTickAt < 8500) return { ok: true };
-								lastWorkTickAt = now;
+								if (!workTickGate.allow(activeWorkTickMs(petStore))) return { ok: true };
 								return petApi.gameplayWorkTick();
 							},
 							buy: (item) => petApi.gameplayBuy(item)