Skip to content

Simulator debug design

Context

The docs need an embedded simulator panel so developers can paste map payloads and validate rendering without leaving VitePress.

Scope

  • Add a new top-level docs section: simulator.
  • Build a lightweight playground component with a clean UI.
  • Support mapHex (required), pathHex (optional), and roomProperties JSON (optional).

Design choices

  1. Keep implementation independent from src/app/debugTools.
  2. Use a browser-only VitePress component and wrap it with ClientOnly.
  3. Determine map type from input prefix:
    • 7b22: structured map
    • otherwise: raster map
  4. Default sample input uses only mapHex from existing mock data.
  5. Provide full-screen editing for long payloads.

UX

  • Two-column layout on desktop, stacked layout on mobile.
  • Explicit render action instead of auto-render while typing.
  • Inline status and error messages with field-level failure context.

Verification

  • New nav item 模拟调试 appears next to 参考.
  • /simulator/ renders and can draw map from default sample.
  • Optional inputs can be empty without blocking map rendering.

最后更新于: