KeyboardMover.defs.ts

KeyboardMover — definitions.

Holds the KeyboardMoverComponent class and the shapes its data and events travel in. No System lives here, which is the point: another component can name KeyboardMover in a query, or type an event it listens for, without pulling KeyboardMover's behaviour into its own bundle. Import from here, not from KeyboardMover.ts.

KeyboardMover.defs.ts

import { Component } from '@babylonjsmarket/ecs';

export interface KeyboardMoverInput {
  /** World units per second at full input. */
  speed?: number;
  /** When true, the mesh yaws to face its direction of motion. */
  faceMotion?: boolean;
}

export class KeyboardMoverComponent extends Component {
  speed: number;
  faceMotion: boolean;

  constructor(data: KeyboardMoverInput = {}) {
    super();
    this.speed = data.speed ?? 4;
    this.faceMotion = data.faceMotion ?? true;
  }

  serialize(): KeyboardMoverInput {
    return { speed: this.speed, faceMotion: this.faceMotion };
  }
}

KeyboardMover.panel.tsx

KeyboardMover panel — renderer-free Solid component. Binds directly to the component instance's fields. No @babylonjs/three imports.

KeyboardMover.panel.tsx

import { Component as SolidComponent, createSignal, onCleanup, onMount } from 'solid-js';
import { Slider, ResetButton, Section } from '../_shared/ui';
import { KeyboardMoverComponent } from './KeyboardMover';

export interface KeyboardMoverPanelProps {
  component: KeyboardMoverComponent;
}

const DEFAULTS = { speed: 4, faceMotion: true };

export const KeyboardMoverPanel: SolidComponent<KeyboardMoverPanelProps> = (props) => {
  const [speed, setSpeed] = createSignal(props.component.speed);
  const [faceMotion, setFaceMotion] = createSignal(props.component.faceMotion);

  // Poll so the readout reflects anything else mutating the component.
  let pollId: ReturnType<typeof setInterval> | undefined;
  onMount(() => {
    pollId = setInterval(() => {
      setSpeed(props.component.speed);
      setFaceMotion(props.component.faceMotion);
    }, 120);
  });
  onCleanup(() => {
    if (pollId) clearInterval(pollId);
  });

  const pushSpeed = (v: number) => {
    props.component.speed = v;
    setSpeed(v);
  };
  const pushFace = (v: boolean) => {
    props.component.faceMotion = v;
    setFaceMotion(v);
  };
  const reset = () => {
    pushSpeed(DEFAULTS.speed);
    pushFace(DEFAULTS.faceMotion);
  };

  return (
    <div style={{ 'font-family': 'system-ui, sans-serif', color: '#ddd', 'min-width': '220px' }}>
      <Section title="Motion">
        <Slider
          label="speed (world units / s)"
          value={speed()}
          min={0}
          max={15}
          step={0.1}
          onChange={pushSpeed}
        />
        <label style={{ display: 'flex', 'align-items': 'center', gap: '8px', 'font-size': '11px' }}>
          <input
            type="checkbox"
            checked={faceMotion()}
            onChange={(e) => pushFace(e.currentTarget.checked)}
          />
          <span>Face direction of motion</span>
        </label>
      </Section>

      <Section title="Controls">
        <div style={{ color: '#8b949e', 'font-size': '11px', 'line-height': 1.5 }}>
          W/A/S/D or arrow keys. Camera-relative — forward is always "where the camera is looking".
        </div>
      </Section>

      <ResetButton onClick={reset} />
    </div>
  );
};

KeyboardMover.ts

KeyboardMover — drives an entity's MeshPrimitive position via WASD / arrow keys. Movement is camera-relative: "forward" is whatever direction the arc camera is currently facing, so the character always walks away from the viewer when the user presses W.

Zero imports from @babylonjs or three. Mesh updates go through world.renderer; camera orientation comes from renderer.getCameraAngles.

KeyboardMover.ts

import { System } from '@babylonjsmarket/ecs';
import type { EventBus } from '@babylonjsmarket/ecs';
import type { CameraHandle, Vec3 } from '@babylonjsmarket/ecs/renderer-types';
import { MeshPrimitiveComponent } from '../MeshPrimitive/MeshPrimitive.defs';
import { ArcCameraComponent } from '../ArcCamera/ArcCamera.defs';
import { KeyboardMoverComponent } from './KeyboardMover.defs';

const FORWARD_KEYS = new Set(['KeyW', 'ArrowUp']);

const BACK_KEYS = new Set(['KeyS', 'ArrowDown']);

const LEFT_KEYS = new Set(['KeyA', 'ArrowLeft']);

const RIGHT_KEYS = new Set(['KeyD', 'ArrowRight']);

export class KeyboardMoverSystem extends System {
  private forward = 0;
  private back = 0;
  private left = 0;
  private right = 0;
  private unsubscribes: Array<() => void> = [];
  private currentYaw = 0;
  private _fwdTmp: Vec3 = [0, 0, 0];
  private _rightTmp: Vec3 = [0, 0, 0];

  constructor(eventBus: EventBus) {
    super(eventBus);
    this.query = { required: [KeyboardMoverComponent, MeshPrimitiveComponent] };
  }

  protected onInitialize(): void {
    this.unsubscribes.push(
      this.eventBus.on('keyboard.keydown', (e: { code: string }) => this.setKey(e.code, 1)),
      this.eventBus.on('keyboard.keyup', (e: { code: string }) => this.setKey(e.code, 0)),
    );
  }

  protected onShutdown(): void {
    this.unsubscribes.forEach((u) => u());
    this.unsubscribes = [];
  }

  private setKey(code: string, value: 0 | 1): void {
    if (FORWARD_KEYS.has(code)) this.forward = value;
    else if (BACK_KEYS.has(code)) this.back = value;
    else if (LEFT_KEYS.has(code)) this.left = value;
    else if (RIGHT_KEYS.has(code)) this.right = value;
  }

  protected onUpdate(dt: number): void {
    const r = this.world?.renderer;
    if (!r) return;

    const inputZ = this.forward - this.back;
    const inputX = this.right - this.left;

    // Camera basis in world space. The adapter bakes in its own handedness —
    // Babylon (left-handed) and Three (right-handed) return oppositely-signed
    // right vectors for the same camera position, so the System doesn't need
    // to know which engine is in play.
    const cam = this.findArcCameraHandle();
    if (cam) {
      r.getCameraForward(cam, this._fwdTmp);
      r.getCameraRight(cam, this._rightTmp);
    } else {
      this._fwdTmp[0] = -1; this._fwdTmp[1] = 0; this._fwdTmp[2] = 0;
      this._rightTmp[0] = 0; this._rightTmp[1] = 0; this._rightTmp[2] = -1;
    }

    // Project to the XZ plane (ignore Y so a tilted camera still walks flat)
    // and re-normalize.
    let fwdX = this._fwdTmp[0], fwdZ = this._fwdTmp[2];
    let rightX = this._rightTmp[0], rightZ = this._rightTmp[2];
    const fLen = Math.hypot(fwdX, fwdZ);
    if (fLen > 1e-6) { fwdX /= fLen; fwdZ /= fLen; }
    const rLen = Math.hypot(rightX, rightZ);
    if (rLen > 1e-6) { rightX /= rLen; rightZ /= rLen; }

    let vx = fwdX * inputZ + rightX * inputX;
    let vz = fwdZ * inputZ + rightZ * inputX;
    const len = Math.hypot(vx, vz);
    if (len > 1) {
      vx /= len;
      vz /= len;
    }

    for (const entity of this.entities) {
      const mover = entity.get(KeyboardMoverComponent);
      const mesh = entity.get(MeshPrimitiveComponent);
      if (!mover || !mesh?.handle) continue;

      if (vx !== 0 || vz !== 0) {
        mesh.position[0] += vx * mover.speed * dt;
        mesh.position[2] += vz * mover.speed * dt;
        r.setMeshPosition(mesh.handle, mesh.position[0], mesh.position[1], mesh.position[2]);

        if (mover.faceMotion) {
          this.currentYaw = Math.atan2(vx, vz);
          mesh.rotation[1] = this.currentYaw;
          r.setMeshRotation(mesh.handle, 0, this.currentYaw, 0);
        }
      }
    }
  }

  private findArcCameraHandle(): CameraHandle | undefined {
    if (!this.world) return undefined;
    for (const entity of this.world.getEntities()) {
      const arc = entity.get(ArcCameraComponent);
      if (arc?.handle) return arc.handle;
    }
    return undefined;
  }
}

The definitions live in KeyboardMover.defs.ts; re-exported so existing importers keep working. New code should import them from './KeyboardMover.defs' directly.

KeyboardMover.ts

export { KeyboardMoverComponent, type KeyboardMoverInput } from './KeyboardMover.defs';

KeyboardMover.viz.tsx

KeyboardMover.viz.tsx — ECS wrapper that registers the renderer-free KeyboardMoverPanel with vizStore and finds the first KeyboardMoverComponent to bind to.

KeyboardMover.viz.tsx

import { Component } from '@babylonjsmarket/ecs';
import { System } from '@babylonjsmarket/ecs';
import type { EventBus } from '@babylonjsmarket/ecs';
import type { Entity } from '@babylonjsmarket/ecs';
import { vizStore } from '../_shared/viz';
import { KeyboardMoverPanel } from './KeyboardMover.panel';
import { KeyboardMoverComponent } from './KeyboardMover';

export interface KeyboardMoverDebuggerInput {
  visible?: boolean;
  activationKey?: string;
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
}

export class KeyboardMoverDebuggerComponent extends Component {
  visible: boolean;
  activationKey: string;
  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

  constructor(data: KeyboardMoverDebuggerInput = {}) {
    super();
    this.visible = data.visible ?? false;
    this.activationKey = data.activationKey ?? 'Digit1';
    this.position = data.position ?? 'top-right';
  }

  serialize(): KeyboardMoverDebuggerInput {
    return {
      visible: this.visible,
      activationKey: this.activationKey,
      position: this.position,
    };
  }
}

const PANEL_ID = 'keyboard-mover-debugger';

export class KeyboardMoverDebuggerSystem extends System {
  private component: KeyboardMoverDebuggerComponent | null = null;
  private keydownHandler: ((e: KeyboardEvent) => void) | null = null;
  private panelRegistered = false;

  constructor(eventBus: EventBus) {
    super(eventBus);
    this.query = { required: [KeyboardMoverDebuggerComponent] };
    this._pauseable = false;
  }

  protected onInitialize(): void {
    for (const entity of this.entities) {
      const comp = entity.get(KeyboardMoverDebuggerComponent);
      if (comp) {
        this.component = comp;
        break;
      }
    }
    this.setupKeyboardListener();
    this.tryRegisterPanel();
  }

  protected onUpdate(_dt: number): void {
    if (!this.panelRegistered) this.tryRegisterPanel();
  }

  private tryRegisterPanel(): void {
    if (this.panelRegistered || !this.component || !this.world) return;

    const target = this.findComponent();
    if (!target) return;

    vizStore.registerPanel({
      id: PANEL_ID,
      title: 'Keyboard Mover',
      position: this.component.position,
      titleColor: '#fbbf24',
      content: () => <KeyboardMoverPanel component={target} />,
    });
    this.panelRegistered = true;
    if (this.component.visible) vizStore.showPanel(PANEL_ID);
  }

  private findComponent(): KeyboardMoverComponent | null {
    if (!this.world) return null;
    for (const entity of this.world.getEntities()) {
      const comp = entity.get(KeyboardMoverComponent);
      if (comp) return comp;
    }
    return null;
  }

  private setupKeyboardListener(): void {
    if (this.keydownHandler) return;
    this.keydownHandler = (e: KeyboardEvent) => {
      if (!this.component) return;
      if (e.code === this.component.activationKey) {
        e.preventDefault();
        vizStore.togglePanel(PANEL_ID);
        this.component.visible = vizStore.isVisible(PANEL_ID);
      }
    };
    window.addEventListener('keydown', this.keydownHandler);
  }

  protected onEntityAdded(entity: Entity): void {
    const comp = entity.get(KeyboardMoverDebuggerComponent);
    if (comp && !this.component) {
      this.component = comp;
      this.tryRegisterPanel();
    }
  }

  protected onShutdown(): void {
    vizStore.unregisterPanel(PANEL_ID);
    this.panelRegistered = false;
    if (this.keydownHandler) {
      window.removeEventListener('keydown', this.keydownHandler);
      this.keydownHandler = null;
    }
  }
}

KeyboardMover.contract.test.ts

11 ✓

ArcadeECS contract: KeyboardMover

Component() with no args constructs and applies defaults
Component merges sample input on top of defaults
Component.serialize() round-trips into a constructor input
System constructor signature is exactly (eventBus)
System declares a non-empty query.required
world.addSystem + initialize + update runs clean with no entity
adding the Component attaches the entity to the System
world.update(dt) does not throw with the entity attached
Adapter handles: create/dispose balance across entity lifecycle
EventBus has no lingering listeners after world.destroy()
Declared event names follow the "{domain}.{action}" convention

Last run 2026-08-22

KeyboardMover.contract.test.ts

import { runMechanicContract } from '@babylonjsmarket/ecs/testing';
import { KeyboardMoverComponent, KeyboardMoverSystem } from './KeyboardMover';
import { MeshPrimitiveComponent } from '../MeshPrimitive/MeshPrimitive.defs';

runMechanicContract({
  name: 'KeyboardMover',
  componentClass: KeyboardMoverComponent,
  systemClass: KeyboardMoverSystem,
  sampleInput: { speed: 6 },
  // KeyboardMover's query requires both its own component and a
  // MeshPrimitive on the same entity — the mover moves the mesh.
  companions: [MeshPrimitiveComponent],
  // Event-silent — it subscribes to keyboard events on `window`, not the
  // EventBus, and doesn't emit anything. Contract battery just validates
  // lifecycle + defaults + serialization.
});

KeyboardMover.test.ts

10 ✓

KeyboardMover

applies defaults
moves the mesh along camera-forward when W is held
uses the adapter-reported right vector so A/D stay correct under any handedness
normalizes diagonal input so W+D is not faster than a single axis
yaws the mesh to face its direction of motion when faceMotion is on
walks along a default basis (-X forward) when no ArcCamera exists
does nothing when the world has no renderer
skips entities whose mesh has no renderer handle
serializes its configuration
stops moving once the key is released

Last run 2026-08-22

KeyboardMover.test.ts

import { describe, it, expect, beforeEach } from 'vitest';
import { KeyboardMoverComponent, KeyboardMoverSystem } from './KeyboardMover';
import { MeshPrimitiveComponent } from '../MeshPrimitive/MeshPrimitive.defs';
import { ArcCameraComponent } from '../ArcCamera/ArcCamera.defs';
import { EventBus, World } from '@babylonjsmarket/ecs';
import { MockRendererAdapter } from '@babylonjsmarket/ecs';

describe('KeyboardMover', () => {
  let eventBus: EventBus;
  let world: World;
  let renderer: MockRendererAdapter;

  beforeEach(() => {
    eventBus = new EventBus();
    renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    world.addSystem(new KeyboardMoverSystem(eventBus));
    world.initialize();
  });

  it('applies defaults', () => {
    const c = new KeyboardMoverComponent();
    expect(c.speed).toBe(4);
    expect(c.faceMotion).toBe(true);
  });

  it('moves the mesh along camera-forward when W is held', () => {
    // Camera at alpha=0: forward (camera→target) is -X.
    const camEntity = world.createEntity('Camera');
    const arc = new ArcCameraComponent({ alpha: 0 });
    arc.handle = renderer.createArcCamera(camEntity.id, arc.toSpec());
    arc.initialized = true;
    camEntity.add(arc);

    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    mesh.handle = renderer.createMesh(playerEntity.id, { kind: 'capsule' });
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: false }));

    eventBus.emit('keyboard.keydown', { code: 'KeyW' });

    renderer.calls.length = 0;
    world.update(0.1);

    const move = renderer.calls.find((c) => c.method === 'setMeshPosition');
    expect(move).toBeDefined();
    // 1 second * 10 speed * 0.1 dt = 1 unit; direction -X.
    expect(move!.args[1]).toBeCloseTo(-1, 3);
    expect(move!.args[3]).toBeCloseTo(0, 3);
  });

  it('uses the adapter-reported right vector so A/D stay correct under any handedness', () => {
    const camEntity = world.createEntity('Camera');
    const arc = new ArcCameraComponent({ alpha: 0 });
    arc.handle = renderer.createArcCamera(camEntity.id, arc.toSpec());
    arc.initialized = true;
    camEntity.add(arc);

    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    mesh.handle = renderer.createMesh(playerEntity.id, { kind: 'capsule' });
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: false }));

    // Mock uses RH convention: at alpha=0, right = (0, 0, -1). Pressing D
    // (input +right) should therefore move the character in -Z.
    eventBus.emit('keyboard.keydown', { code: 'KeyD' });
    renderer.calls.length = 0;
    world.update(0.1);

    const move = renderer.calls.find((c) => c.method === 'setMeshPosition');
    expect(move).toBeDefined();
    expect(move!.args[1]).toBeCloseTo(0, 3);
    expect(move!.args[3]).toBeCloseTo(-1, 3);
  });

  it('normalizes diagonal input so W+D is not faster than a single axis', () => {
    const camEntity = world.createEntity('Camera');
    const arc = new ArcCameraComponent({ alpha: 0 });
    arc.handle = renderer.createArcCamera(camEntity.id, arc.toSpec());
    arc.initialized = true;
    camEntity.add(arc);

    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    mesh.handle = renderer.createMesh(playerEntity.id, { kind: 'capsule' });
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: false }));

    // Forward (-X) and right (-Z) at once → raw vector length √2; the System
    // clamps it back to a unit vector before applying speed.
    eventBus.emit('keyboard.keydown', { code: 'KeyW' });
    eventBus.emit('keyboard.keydown', { code: 'KeyD' });
    renderer.calls.length = 0;
    world.update(0.1);

    const move = renderer.calls.find((c) => c.method === 'setMeshPosition');
    expect(move).toBeDefined();
    // distance moved = clamped 1 * speed 10 * dt 0.1 = 1, split across two axes.
    const dist = Math.hypot(move!.args[1], move!.args[3]);
    expect(dist).toBeCloseTo(1, 3);
  });

  it('yaws the mesh to face its direction of motion when faceMotion is on', () => {
    const camEntity = world.createEntity('Camera');
    const arc = new ArcCameraComponent({ alpha: 0 });
    arc.handle = renderer.createArcCamera(camEntity.id, arc.toSpec());
    arc.initialized = true;
    camEntity.add(arc);

    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    mesh.handle = renderer.createMesh(playerEntity.id, { kind: 'capsule' });
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: true }));

    eventBus.emit('keyboard.keydown', { code: 'KeyW' });
    renderer.calls.length = 0;
    world.update(0.1);

    const rot = renderer.calls.find((c) => c.method === 'setMeshRotation');
    expect(rot).toBeDefined();
    // Moving along -X → yaw = atan2(vx=-1, vz=0) = -π/2.
    expect(rot!.args[2]).toBeCloseTo(-Math.PI / 2, 3);
    expect(mesh.rotation[1]).toBeCloseTo(-Math.PI / 2, 3);
  });

  it('walks along a default basis (-X forward) when no ArcCamera exists', () => {
    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    mesh.handle = renderer.createMesh(playerEntity.id, { kind: 'capsule' });
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: false }));

    eventBus.emit('keyboard.keydown', { code: 'KeyW' });
    renderer.calls.length = 0;
    world.update(0.1);

    const move = renderer.calls.find((c) => c.method === 'setMeshPosition');
    expect(move).toBeDefined();
    expect(move!.args[1]).toBeCloseTo(-1, 3);
    expect(move!.args[3]).toBeCloseTo(0, 3);
  });

  it('does nothing when the world has no renderer', () => {
    const busOnly = new EventBus();
    const headless = new World({ eventBus: busOnly });
    const system = new KeyboardMoverSystem(busOnly);
    headless.addSystem(system);
    headless.initialize();

    const player = headless.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    player.add(mesh);
    player.add(new KeyboardMoverComponent({ speed: 10 }));

    busOnly.emit('keyboard.keydown', { code: 'KeyW' });
    // No renderer → onUpdate bails before touching anything; just shouldn't throw.
    expect(() => headless.update(0.1)).not.toThrow();
  });

  it('skips entities whose mesh has no renderer handle', () => {
    const camEntity = world.createEntity('Camera');
    const arc = new ArcCameraComponent({ alpha: 0 });
    arc.handle = renderer.createArcCamera(camEntity.id, arc.toSpec());
    arc.initialized = true;
    camEntity.add(arc);

    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    // Intentionally no mesh.handle assigned.
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: false }));

    eventBus.emit('keyboard.keydown', { code: 'KeyW' });
    renderer.calls.length = 0;
    world.update(0.1);

    expect(renderer.calls.find((c) => c.method === 'setMeshPosition')).toBeUndefined();
  });

  it('serializes its configuration', () => {
    const c = new KeyboardMoverComponent({ speed: 7, faceMotion: false });
    expect(c.serialize()).toEqual({ speed: 7, faceMotion: false });
  });

  it('stops moving once the key is released', () => {
    const camEntity = world.createEntity('Camera');
    const arc = new ArcCameraComponent({ alpha: 0 });
    arc.handle = renderer.createArcCamera(camEntity.id, arc.toSpec());
    arc.initialized = true;
    camEntity.add(arc);

    const playerEntity = world.createEntity('Player');
    const mesh = new MeshPrimitiveComponent({ primitive: 'capsule', position: [0, 0, 0] });
    mesh.handle = renderer.createMesh(playerEntity.id, { kind: 'capsule' });
    playerEntity.add(mesh);
    playerEntity.add(new KeyboardMoverComponent({ speed: 10, faceMotion: false }));

    eventBus.emit('keyboard.keydown', { code: 'KeyW' });
    world.update(0.1);
    eventBus.emit('keyboard.keyup', { code: 'KeyW' });

    renderer.calls.length = 0;
    world.update(0.1);
    const move = renderer.calls.find((c) => c.method === 'setMeshPosition');
    expect(move).toBeUndefined();
  });
});

KeyboardMover.viz.test.tsx

14 ✓

KeyboardMoverPanel

mounts without a renderer and shows the speed control
dragging the speed slider writes back to the component
the faceMotion checkbox toggles the component field
the reset button restores speed and faceMotion to their defaults
polls the component so external mutations show up in the readout

KeyboardMoverDebuggerComponent

applies defaults
round-trips custom config through serialize

KeyboardMoverDebuggerSystem

registers the panel once a KeyboardMover exists, and shows it when visible
defers registration until a KeyboardMover appears, then registers on update
renders the bound panel content for the discovered KeyboardMover
toggles the panel on the activation key and mirrors visibility onto the component
ignores key presses that are not the activation key
adopts a debugger component added after initialization
removes the panel and the keydown listener on shutdown

Last run 2026-08-22

KeyboardMover.viz.test.tsx

// @vitest-environment jsdom
import { describe, it, expect, vi, afterEach } from 'vitest';
import { render, fireEvent } from '@solidjs/testing-library';
import { EventBus, World, MockRendererAdapter } from '@babylonjsmarket/ecs';
import { KeyboardMoverPanel } from './KeyboardMover.panel';
import { KeyboardMoverComponent } from './KeyboardMover';
import {
  KeyboardMoverDebuggerComponent,
  KeyboardMoverDebuggerSystem,
} from './KeyboardMover.viz';
import { vizStore } from '../_shared/viz';

const PANEL_ID = 'keyboard-mover-debugger';

describe('KeyboardMoverPanel', () => {
  it('mounts without a renderer and shows the speed control', () => {
    const comp = new KeyboardMoverComponent({ speed: 5 });
    const { container } = render(() => <KeyboardMoverPanel component={comp} />);
    expect(container.textContent).toContain('speed');
    expect(container.textContent).toContain('Face direction');
  });

  it('dragging the speed slider writes back to the component', () => {
    const comp = new KeyboardMoverComponent({ speed: 4 });
    const { getAllByRole } = render(() => <KeyboardMoverPanel component={comp} />);
    const slider = (getAllByRole('slider') as HTMLInputElement[])[0];
    fireEvent.input(slider, { target: { value: '8.5' } });
    expect(comp.speed).toBe(8.5);
  });

  it('the faceMotion checkbox toggles the component field', () => {
    const comp = new KeyboardMoverComponent({ faceMotion: true });
    const { getByRole } = render(() => <KeyboardMoverPanel component={comp} />);
    const box = getByRole('checkbox') as HTMLInputElement;
    fireEvent.click(box);
    expect(comp.faceMotion).toBe(false);
  });

  it('the reset button restores speed and faceMotion to their defaults', () => {
    const comp = new KeyboardMoverComponent({ speed: 11, faceMotion: false });
    const { getByText } = render(() => <KeyboardMoverPanel component={comp} />);
    fireEvent.click(getByText('Reset to Defaults'));
    expect(comp.speed).toBe(4);
    expect(comp.faceMotion).toBe(true);
  });

  it('polls the component so external mutations show up in the readout', () => {
    vi.useFakeTimers();
    try {
      const comp = new KeyboardMoverComponent({ speed: 3 });
      const { getAllByRole } = render(() => <KeyboardMoverPanel component={comp} />);
      const slider = (getAllByRole('slider') as HTMLInputElement[])[0];
      expect(slider.value).toBe('3');

      // Something other than the panel (e.g. the System) moves the field.
      comp.speed = 9;
      vi.advanceTimersByTime(120);

      expect(slider.value).toBe('9');
    } finally {
      vi.useRealTimers();
    }
  });
});

describe('KeyboardMoverDebuggerComponent', () => {
  it('applies defaults', () => {
    const c = new KeyboardMoverDebuggerComponent();
    expect(c.visible).toBe(false);
    expect(c.activationKey).toBe('Digit1');
    expect(c.position).toBe('top-right');
    expect(c.serialize()).toEqual({
      visible: false,
      activationKey: 'Digit1',
      position: 'top-right',
    });
  });

  it('round-trips custom config through serialize', () => {
    const c = new KeyboardMoverDebuggerComponent({
      visible: true,
      activationKey: 'KeyP',
      position: 'bottom-left',
    });
    expect(c.serialize()).toEqual({
      visible: true,
      activationKey: 'KeyP',
      position: 'bottom-left',
    });
  });
});

describe('KeyboardMoverDebuggerSystem', () => {
  let world: World;

  function makeWorld(): { world: World; eventBus: EventBus } {
    const eventBus = new EventBus();
    const renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    return { world, eventBus };
  }

  afterEach(() => {
    if (world) world.shutdown();
    vizStore.clear();
    // vizStore persists panel visibility to localStorage; wipe it so panel
    // state can't leak between cases.
    localStorage.clear();
  });

  it('registers the panel once a KeyboardMover exists, and shows it when visible', () => {
    const { world, eventBus } = makeWorld();
    const dbg = world.createEntity('Debug');
    dbg.add(new KeyboardMoverDebuggerComponent({ visible: true }));
    const player = world.createEntity('Player');
    player.add(new KeyboardMoverComponent());

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();

    expect(vizStore.panels[PANEL_ID]).toBeDefined();
    expect(vizStore.panels[PANEL_ID].position).toBe('top-right');
    expect(vizStore.isVisible(PANEL_ID)).toBe(true);
  });

  it('defers registration until a KeyboardMover appears, then registers on update', () => {
    const { world, eventBus } = makeWorld();
    const dbg = world.createEntity('Debug');
    dbg.add(new KeyboardMoverDebuggerComponent());

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();

    // No KeyboardMover yet → nothing registered.
    expect(vizStore.panels[PANEL_ID]).toBeUndefined();

    const player = world.createEntity('Player');
    player.add(new KeyboardMoverComponent());
    world.update(0.016);

    expect(vizStore.panels[PANEL_ID]).toBeDefined();
    expect(vizStore.isVisible(PANEL_ID)).toBe(false);

    // Already registered → a second update is a no-op (idempotent).
    world.update(0.016);
    expect(vizStore.panels[PANEL_ID]).toBeDefined();
  });

  it('renders the bound panel content for the discovered KeyboardMover', () => {
    const { world, eventBus } = makeWorld();
    world.createEntity('Debug').add(new KeyboardMoverDebuggerComponent());
    world.createEntity('Player').add(new KeyboardMoverComponent({ speed: 7 }));

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();

    const { container } = render(() => vizStore.panels[PANEL_ID].content());
    expect(container.textContent).toContain('speed');
  });

  it('toggles the panel on the activation key and mirrors visibility onto the component', () => {
    const { world, eventBus } = makeWorld();
    const dbg = world.createEntity('Debug');
    const comp = new KeyboardMoverDebuggerComponent({ activationKey: 'KeyM' });
    dbg.add(comp);
    world.createEntity('Player').add(new KeyboardMoverComponent());

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();

    const evt = new KeyboardEvent('keydown', { code: 'KeyM', cancelable: true });
    window.dispatchEvent(evt);
    expect(evt.defaultPrevented).toBe(true);
    expect(vizStore.isVisible(PANEL_ID)).toBe(true);
    expect(comp.visible).toBe(true);

    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyM' }));
    expect(vizStore.isVisible(PANEL_ID)).toBe(false);
    expect(comp.visible).toBe(false);
  });

  it('ignores key presses that are not the activation key', () => {
    const { world, eventBus } = makeWorld();
    world.createEntity('Debug').add(new KeyboardMoverDebuggerComponent({ activationKey: 'KeyM' }));
    world.createEntity('Player').add(new KeyboardMoverComponent());

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();

    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyX' }));
    expect(vizStore.isVisible(PANEL_ID)).toBe(false);
  });

  it('adopts a debugger component added after initialization', () => {
    const { world, eventBus } = makeWorld();
    world.createEntity('Player').add(new KeyboardMoverComponent());

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();
    // No debugger entity at init → no panel.
    expect(vizStore.panels[PANEL_ID]).toBeUndefined();

    const dbg = world.createEntity('Debug');
    dbg.add(new KeyboardMoverDebuggerComponent());

    expect(vizStore.panels[PANEL_ID]).toBeDefined();
  });

  it('removes the panel and the keydown listener on shutdown', () => {
    const { world, eventBus } = makeWorld();
    const dbg = world.createEntity('Debug');
    const comp = new KeyboardMoverDebuggerComponent({ activationKey: 'KeyM' });
    dbg.add(comp);
    world.createEntity('Player').add(new KeyboardMoverComponent());

    world.addSystem(new KeyboardMoverDebuggerSystem(eventBus));
    world.initialize();
    expect(vizStore.panels[PANEL_ID]).toBeDefined();

    world.shutdown();
    expect(vizStore.panels[PANEL_ID]).toBeUndefined();

    // Listener is gone → key press no longer reaches the (now-cleared) store.
    window.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyM' }));
    expect(vizStore.panels[PANEL_ID]).toBeUndefined();
  });
});