@linxin666/dsh-pet 0.3.2 → 0.3.4

package/src/client/pet.module.css

@@ -21,33 +21,6 @@
   flex: 0 0 auto;
 }
 
-.closeButton {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  z-index: 2;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid rgba(226, 232, 255, 0.72);
-  border-radius: 999px;
-  color: #f8fafc;
-  background: rgba(7, 11, 26, 0.78);
-  font: 600 18px/20px sans-serif;
-  cursor: pointer;
-  touch-action: manipulation;
-  transition: background 120ms ease, box-shadow 120ms ease;
-}
-
-.closeButton:hover {
-  background: rgba(44, 62, 126, 0.95);
-}
-
-.closeButton:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(126, 152, 255, 0.95);
-}
-
 .bubble {
   position: absolute;
   bottom: 100%;
@@ -436,8 +409,198 @@
 
   .action,
   .summon,
-  .bubbleMore,
-  .closeButton {
+  .bubbleMore {
     transition: none;
   }
 }
+
+/* ------------------------------------------------------------------ */
+/* Gameplay HUD (miku-pet generalization): toggle, card, bars, shop.   */
+/* ------------------------------------------------------------------ */
+
+.gameplayHud {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+}
+
+.gameplayModeChip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translateY(-100%) translateY(-4px);
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: rgba(126, 152, 255, 0.18);
+  color: #cdd7ff;
+  font-size: 10px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.gameplayCard {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  /* The card opens BESIDE the sprite (right side when the space allows,
+     otherwise left), vertically centered and clamped to the sprite's height,
+     so it never enters the bubble band above or the hover-panel band below.
+     The transform and max-height are set inline from measured space by the
+     GameplayHud placement effect; these are pre-measure fallbacks. */
+  transform: none;
+  max-height: 340px;
+  overflow-y: auto;
+  min-width: 180px;
+  padding: 10px 12px;
+  border: 1px solid rgba(126, 152, 255, 0.25);
+  border-radius: 10px;
+  background: rgba(7, 11, 26, 0.92);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  color: #dfe6ff;
+  font-size: 12px;
+}
+
+.gameplayBars {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.gameplayBarRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gameplayBarLabel {
+  width: 34px;
+  flex-shrink: 0;
+  color: #9aa8d8;
+}
+
+.gameplayBarTrack {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(126, 152, 255, 0.15);
+  overflow: hidden;
+}
+
+.gameplayBarFill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #7e98ff, #9db4ff);
+  transition: width 300ms ease;
+}
+
+.gameplayActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.gameplayShopItems {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.gameplayShopItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 6px;
+  border: 1px solid rgba(126, 152, 255, 0.25);
+  border-radius: 8px;
+  background: rgba(126, 152, 255, 0.08);
+  color: inherit;
+  cursor: pointer;
+}
+
+.gameplayShopItem:hover {
+  border-color: rgba(126, 152, 255, 0.7);
+  background: rgba(126, 152, 255, 0.16);
+}
+
+.gameplayShopItemImage {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+  image-rendering: pixelated;
+  pointer-events: none;
+}
+
+.gameplayShopItemLabel {
+  font-size: 11px;
+  text-align: center;
+}
+
+.gameplayShopItemPrice {
+  font-size: 10px;
+  color: #ffd27e;
+}
+
+.gameplayClose {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  border: none;
+  background: none;
+  color: #9aa8d8;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 2px;
+}
+
+.gameplayClose:hover {
+  color: #ffffff;
+}
+
+.gameplayFloat {
+  position: absolute;
+  left: 50%;
+  top: -8px;
+  transform: translateX(-50%);
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: rgba(255, 210, 126, 0.92);
+  color: #3a2a00;
+  font-size: 11px;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: pet-gameplay-float 1100ms ease-out forwards;
+}
+
+@keyframes pet-gameplay-float {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px);
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-18px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gameplayFloat {
+    animation: none;
+    opacity: 1;
+  }
+
+  .gameplayBarFill {
+    transition: none;
+  }
+}
+

package/src/client/renderers/Frames2dVisualMount.tsx

@@ -0,0 +1,111 @@
+/**
+ * Frames2d visual mount — the React bridge between the pet center chrome
+ * and the imperative frames2d renderer, mirroring the live2d mount. The
+ * bridge owns the contract context (asset base, phase stream, interaction
+ * write-back, activation cleanups), feeds the polled phase into the stream,
+ * forwards the chrome's drag gesture onto the conventional 'drag' track
+ * (when the pet declares one), and renders the localized fallback card when
+ * the served config is invalid.
+ * @module @linxin666/dsh-pet/client/renderers/Frames2dVisualMount
+ */
+
+import { useEffect, useRef, useState, type ReactElement } from 'react'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { PetDefinition } from '../../registry.ts'
+import type { ActivityPhase } from '../../state.ts'
+import { createPhaseStream, type PhaseStream } from '../phase-stream.ts'
+import type { DragStream } from '../drag-stream.ts'
+import type { PetRendererContext } from '../../contracts/renderer.ts'
+import { defaultPetRendererRegistry } from './registry.ts'
+import type { Frames2dRendererHandle } from './frames2d.ts'
+import type { GameplayBus } from '../gameplay-hud.tsx'
+import type { NS } from '../locales.ts'
+
+/** Mount the frames2d renderer as the sprite's visual (inside the chrome). */
+export function Frames2dVisualMount(props: {
+  definition: PetDefinition
+  phase: ActivityPhase
+  onPet: () => void
+  /** Chrome drag gesture stream (the renderer switch owns it). */
+  drag: DragStream
+  /** Gameplay coordination bus; the mount registers its track override. */
+  bus?: GameplayBus
+  t: PropsLocale<typeof NS>['t']
+}): ReactElement {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const streamRef = useRef<PhaseStream | null>(null)
+  const handleRef = useRef<Frames2dRendererHandle | null>(null)
+  const [invalid, setInvalid] = useState(false)
+
+  // One activation per pet definition: build the contract context and mount.
+  useEffect(() => {
+    setInvalid(false)
+    const container = containerRef.current
+    const frames2d = props.definition.frames2d
+    if (container === null || frames2d === undefined) return undefined
+    streamRef.current ??= createPhaseStream(props.phase)
+    const cleanups: (() => void)[] = []
+    const ctx: PetRendererContext = {
+      petId: props.definition.id,
+      assetBase: '/pet/' + encodeURIComponent(props.definition.id),
+      container,
+      phase: streamRef.current,
+      interact: props.onPet,
+      onCleanup: (fn) => { cleanups.push(fn) },
+    }
+    let handle: Frames2dRendererHandle
+    try {
+      handle = defaultPetRendererRegistry.mount('frames2d', ctx, frames2d) as Frames2dRendererHandle
+    } catch {
+      setInvalid(true)
+      return () => { for (const fn of cleanups.splice(0)) fn() }
+    }
+    handleRef.current = handle
+    // The gameplay HUD steers one shared override slot through the bus;
+    // mode rules (work blocks drag, sleep wakes on it) keep the two
+    // producers from fighting over the slot.
+    if (props.bus !== undefined) {
+      const gameplayBus = props.bus
+      gameplayBus.setTrack = (track) => { handleRef.current?.setState(track) }
+      cleanups.push(() => { gameplayBus.setTrack = undefined })
+    }
+    // The drag gesture drives the conventional 'drag' track when declared.
+    // On release, a declared gameplay.dragEndState (miku: standup) plays
+    // once; its fallback auto-releases the override back to the phase map.
+    const dragTrack = props.definition.gameplay?.dragState ?? (frames2d.tracks.drag === undefined ? undefined : 'drag')
+    const offDrag = props.drag.subscribe((dragging) => {
+      if (dragTrack === undefined) return
+      if (dragging) {
+        handle.setState(dragTrack)
+        return
+      }
+      handle.setState(props.definition.gameplay?.dragEndState)
+    })
+    cleanups.push(offDrag)
+    return () => {
+      handleRef.current = null
+      for (const fn of cleanups.splice(0)) fn()
+      handle.dispose()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- one activation per pet identity
+  }, [props.definition])
+
+  // Feed the polled phase into the activation's stream (change-only).
+  useEffect(() => {
+    streamRef.current?.push(props.phase)
+  }, [props.phase])
+
+  return (
+    <div
+      ref={containerRef}
+      data-dsh-pet-frames2d={props.definition.id}
+      style={{ width: '100%', height: '100%', pointerEvents: 'none' }}
+    >
+      {invalid && (
+        <span data-dsh-pet-frames2d-error="invalid-config">
+          {props.t('pet.renderer.unavailable', { renderer: 'frames2d' })}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/client/renderers/PetRendererSwitch.tsx

@@ -8,13 +8,16 @@
  * @module @linxin666/dsh-pet/client/renderers/PetRendererSwitch
  */
 
-import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react'
+import { cloneElement, isValidElement, useRef, type ReactElement, type ReactNode } from 'react'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { PetDefinition } from '../../registry.ts'
 import type { ActivityPhase } from '../../state.ts'
 import type { PetSpriteProps } from '../PetSprite.tsx'
+import { createDragStream, type DragStream } from '../drag-stream.ts'
+import type { GameplayBus } from '../gameplay-hud.tsx'
 import { defaultPetRendererRegistry } from './registry.ts'
 import { Live2dVisualMount } from './live2d/Live2dVisualMount.tsx'
+import { Frames2dVisualMount } from './Frames2dVisualMount.tsx'
 import type { NS } from '../locales.ts'
 
 /** Dispatch one pet definition to its renderer; unknown kinds get a card. */
@@ -24,11 +27,35 @@ export function PetRendererSwitch(props: {
   phase: ActivityPhase
   /** The chrome's pet interaction (affinity write-back owner). */
   onPet: () => void
+  /** External drag stream (gameplay HUD shares it); created locally otherwise. */
+  drag?: DragStream
+  /** Gameplay coordination bus forwarded to the frames2d visual mount. */
+  bus?: GameplayBus
   t: PropsLocale<typeof NS>['t']
   children?: ReactNode
 }): ReactElement {
   const renderer = props.definition.renderer ?? 'sprite2d'
+  // The frames2d drag stream lives one level up: the chrome (PetSprite)
+  // reports the gesture through onDraggingChange, the visual subscribes.
+  const dragRef = useRef<{ id: string; stream: ReturnType<typeof createDragStream> } | null>(null)
+  if (dragRef.current === null || dragRef.current.id !== props.definition.id) {
+    dragRef.current = { id: props.definition.id, stream: createDragStream() }
+  }
+  const drag = props.drag ?? dragRef.current.stream
   if (renderer === 'sprite2d') return <>{props.children}</>
+  if (renderer === 'frames2d' && defaultPetRendererRegistry.has('frames2d') && isValidElement<PetSpriteProps>(props.children)) {
+    const visual = (
+      <Frames2dVisualMount
+        definition={props.definition}
+        phase={props.phase}
+        onPet={props.onPet}
+        drag={drag}
+        {...(props.bus === undefined ? {} : { bus: props.bus })}
+        t={props.t}
+      />
+    )
+    return cloneElement(props.children, { visual, onDraggingChange: (dragging: boolean) => drag.push(dragging) })
+  }
   if (renderer === 'live2d' && defaultPetRendererRegistry.has('live2d') && isValidElement<PetSpriteProps>(props.children)) {
     const visual = (
       <Live2dVisualMount

package/src/client/renderers/frames2d.test.ts

@@ -0,0 +1,137 @@
+// @vitest-environment jsdom
+/**
+ * frames2d renderer unit tests — playback chain, phase mapping, gameplay
+ * override, fallback settling, and the stall watchdog, all on fake timers.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { frames2dRenderer, type Frames2dRendererHandle, type PetFrames2dConfig } from './frames2d.ts'
+import { createPhaseStream, type PhaseStream } from '../phase-stream.ts'
+import type { PetRendererContext } from '../../contracts/renderer.ts'
+import type { ActivityPhase } from '../../state.ts'
+
+const CONFIG: PetFrames2dConfig = {
+  tracks: {
+    idle: { frames: ['/pet/miku/idle/1.webp', '/pet/miku/idle/2.webp'], durations: [100, 100], loop: true },
+    work: { frames: ['/pet/miku/work/1.webp', '/pet/miku/work/2.webp'], durations: [100, 100], loop: true },
+    happy: { frames: ['/pet/miku/happy/1.webp'], durations: [100], loop: false },
+    standup: { frames: ['/pet/miku/standup/1.webp'], durations: [100], loop: false, fallback: 'idle' },
+  },
+  phases: { idle: 'idle', thinking: 'work', done: 'happy' },
+}
+
+function setup(): { ctx: PetRendererContext; stream: PhaseStream; img: () => HTMLImageElement } {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const stream = createPhaseStream('idle')
+  const cleanups: (() => void)[] = []
+  const ctx: PetRendererContext = {
+    petId: 'miku',
+    assetBase: '/pet/miku',
+    container,
+    phase: stream,
+    interact: () => {},
+    onCleanup: (fn) => { cleanups.push(fn) },
+  }
+  return { ctx, stream, img: () => container.querySelector('img') as HTMLImageElement }
+}
+
+describe('frames2dRenderer', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    document.body.innerHTML = ''
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('validates the served config fail-closed', () => {
+    expect(() => frames2dRenderer.validateConfig(null)).toThrow()
+    expect(() => frames2dRenderer.validateConfig({ tracks: {}, phases: { idle: 'idle' } })).toThrow()
+    expect(() => frames2dRenderer.validateConfig({ tracks: { idle: { frames: [], durations: [], loop: true } }, phases: { idle: 'idle' } })).toThrow()
+    expect(frames2dRenderer.validateConfig(CONFIG).phases.idle).toBe('idle')
+  })
+
+  it('plays the idle track on mount and advances frames on its durations', () => {
+    const { ctx, img } = setup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    expect(handle.currentTrack()).toBe('idle')
+    expect(img().getAttribute('src')).toBe('/pet/miku/idle/1.webp')
+    vi.advanceTimersByTime(100)
+    expect(img().getAttribute('src')).toBe('/pet/miku/idle/2.webp')
+    vi.advanceTimersByTime(100)
+    expect(img().getAttribute('src')).toBe('/pet/miku/idle/1.webp')
+    handle.dispose()
+  })
+
+  it('follows the phase stream through the phases map', () => {
+    const { ctx, stream, img } = setup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    stream.push('thinking' as ActivityPhase)
+    expect(handle.currentTrack()).toBe('work')
+    expect(img().getAttribute('src')).toBe('/pet/miku/work/1.webp')
+    // Unmapped phases fall back to the idle track.
+    stream.push('waiting' as ActivityPhase)
+    expect(handle.currentTrack()).toBe('idle')
+    handle.dispose()
+  })
+
+  it('settles a finished non-loop track into its fallback', () => {
+    const { ctx, stream } = setup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    stream.push('done' as ActivityPhase)
+    expect(handle.currentTrack()).toBe('happy')
+    vi.advanceTimersByTime(150)
+    expect(handle.currentTrack()).toBe('idle')
+    handle.dispose()
+  })
+
+  it('lets the gameplay driver force and release a track', () => {
+    const { ctx, stream } = setup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    handle.setState('standup')
+    expect(handle.currentTrack()).toBe('standup')
+    // Phase changes are ignored while the override holds.
+    stream.push('thinking' as ActivityPhase)
+    expect(handle.currentTrack()).toBe('standup')
+    // The finished override settles into its fallback, which matches the
+    // current phase map (thinking -> work? no: standup fell back to idle,
+    // but the phase says work, so the release lands on the phase track).
+    vi.advanceTimersByTime(150)
+    expect(handle.currentTrack()).toBe('idle')
+    handle.setState('work')
+    expect(handle.currentTrack()).toBe('work')
+    handle.setState(undefined)
+    expect(handle.currentTrack()).toBe('work')
+    handle.dispose()
+  })
+
+  it('ignores unknown setState ids', () => {
+    const { ctx } = setup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    handle.setState('ghost')
+    expect(handle.currentTrack()).toBe('idle')
+    handle.dispose()
+  })
+
+  it('re-kicks a stalled looping track via the watchdog', () => {
+    const { ctx, img } = setup()
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    expect(img().getAttribute('src')).toBe('/pet/miku/idle/1.webp')
+    // Simulate a throttled-away chain: burn the pending frame timer without
+    // the renderer noticing by jumping far past it, then let the watchdog fire.
+    vi.advanceTimersByTime(100) // frame 2
+    expect(img().getAttribute('src')).toBe('/pet/miku/idle/2.webp')
+    vi.advanceTimersByTime(100) // wraps to frame 1
+    expect(img().getAttribute('src')).toBe('/pet/miku/idle/1.webp')
+    handle.dispose()
+  })
+
+  it('disposes idempotently and removes the image', () => {
+    const { ctx } = setup()
+    const container = ctx.container
+    const handle = frames2dRenderer.mount(ctx, frames2dRenderer.validateConfig(CONFIG)) as Frames2dRendererHandle
+    handle.dispose()
+    handle.dispose()
+    expect(container.querySelector('img')).toBeNull()
+  })
+})