Add reusable NPC dialog box and showroom tutorial

[moufmouf]

What

When the player enters zoneShowStep1 (next to the bot sprite in showroom room 1), a video-game-like dialog box opens at the bottom of the screen and runs a 10-step tutorial of the 5 showroom rooms. On room-specific steps the camera pans to the matching zone (zoneShowStep2…zoneShowStep5, read from the Tiled map at runtime) and returns to the player at the end. Walking out of the zone closes the dialog; re-entering restarts it.

How

• src/dialog-box/ — reusable, map-agnostic module (intended for later extraction into a separate NPM library):
  • api.ts: main-script side. openDialog(steps, options) opens the box and resolves when it closes; each step has an optional onDisplay hook that runs in the main script, so all side effects (camera…) stay in the caller and the box stays generic. closeDialog() force-closes.
  • iframe.ts + style.ts: the UI (avatar, name, text, step counter, Next/Close button), rendered inside a fixed iframe opened with WA.ui.website.open.
  • types.ts: the two local player variables used for cross-iframe communication (dialogBoxData main→iframe, dialogBoxEvent iframe→main, with a timestamp so repeated events still fire onVariableChange).
• npc-dialog.html — thin wrapper page for the iframe. Loads iframe_api.js from the embedding server's origin (via document.referrer) so it works on staging, prod and self-hosted alike, and declares color-scheme: dark to keep the iframe transparent over WorkAdventure's dark theme.
• src/showroomTutorial.ts — the map-specific tutorial (French texts, camera hooks). NPC name is a placeholder constant (Cubi).
• src/main.ts — wires the zoneShowStep1 enter/leave events (opens/closes the tutorial, disables proximity meetings while in the zone).
• npc-avatar.png — front-facing head cropped from tilesets/Bot1.png, used as the default avatar.
• campus.tmj — adds the zoneShowStep5 area (terrace) used as a camera target.

Reviewer notes

• wa-map-optimizer-vite is upgraded 1.2.3 → 1.3.1: 1.2.3 has an un-awaited writeFile race that produced an empty dist/campus.tmj once npc-dialog.html was added to the build inputs. npm run buildmap passes with 1.3.1.
• The iframe UI and its event protocol were tested against a mocked WA API; tsc and the production build pass. The end-to-end run on https://play.staging.workadventu.re/_/zixd24ab2t/localhost:5173/campus.tmj#moveTo=zoneShowStep1 should be double-checked visually (camera framing is tunable via CAMERA_PADDING in showroomTutorial.ts).

🤖 Generated with Claude Code