feuerwerk/src/editor/viewport/GameViewport.ts

/**
 * The scene seen through its active camera, letterboxed into the widget: the running world while
 * playing, the model as a still preview otherwise.
 */
import { type FederatedPointerEvent, Text } from 'pixi.js';
import { isSymbolType } from '../../core/model/AssetTypes';
import type { EditorState } from '../state';
import type { World } from '../../runtime/World';
import { textStyle } from '../../ui';
import { type ActiveCamera, cameraOfItems, cameraOfWorld } from '../../viewport/activeCamera';
import { collectHolderItems, collectWorldItems } from '../../viewport/items';
import { cameraView, isInside, screenToWorld, type View } from '../../viewport/view';
import { type Frame, WorldViewport } from './WorldViewport';

const LETTERBOX_COLOR = 0x000000;

export class GameViewport extends WorldViewport {
  private readonly hint = new Text({ text: 'No active camera', style: textStyle('muted') });
  private readonly editorRunCaption = new Text({
    text: 'Behaviors run here · keys and clicks go to the game',
    style: textStyle('muted'),
  });
  private playWorld: World | null = null;
  /** The editor run's world: it takes the mouse, but it is never what this view draws. */
  private editorWorld: World | null = null;

  constructor(state: EditorState) {
    super(state);
    this.hint.eventMode = 'none';
    this.hint.anchor.set(0.5);
    this.addChild(this.hint);
    this.editorRunCaption.eventMode = 'none';
    this.addChild(this.editorRunCaption);

    this.on('pointerdown', (e: FederatedPointerEvent) => {
      if (e.button !== 0) return;
      this.reportPointer(e);
      this.pointerWorld()?.setPointerDown(true);
    });
    this.on('globalpointermove', (e: FederatedPointerEvent) => this.reportPointer(e));
    this.on('pointerup', () => this.pointerWorld()?.setPointerDown(false));
    this.on('pointerupoutside', () => this.pointerWorld()?.setPointerDown(false));
  }

  /** null = not playing. */
  setWorld(world: World | null): void {
    this.playWorld = world;
    this.redraw();
  }

  /** null = no behavior is running outside play mode. */
  setEditorWorld(world: World | null): void {
    this.editorWorld = world;
    this.redraw();
  }

  /** Where the mouse is reported: the running game, or the behaviors running without it. */
  private pointerWorld(): World | null {
    return this.playWorld ?? this.editorWorld;
  }

  /**
   * Skipped while the tab is hidden: the preview costs a collect of the whole scene and would
   * otherwise run on every selection change behind another tab. Showing the tab relayouts the
   * stack, which resizes this widget and thereby redraws it.
   */
  override redraw(): void {
    if (!this.visible) return;
    super.redraw();
  }

  protected override currentView(): View | null {
    const camera = this.activeCamera();
    return camera ? cameraView(camera, this.w, this.h) : null;
  }

  private activeCamera(): ActiveCamera | null {
    const world = this.playWorld;
    return world ? cameraOfWorld(world) : cameraOfItems(this.modelFrame().items);
  }

  private modelFrame(): Frame {
    return collectHolderItems(this.state.project, this.state.activeScene, LETTERBOX_COLOR, this.editorWorld);
  }

  /** `camera`: object id of the camera the view is through, empty when none is switched on. */
  override debugInfo(): ReturnType<WorldViewport['debugInfo']> & { camera: string } {
    return { ...super.debugInfo(), camera: this.activeCamera()?.id ?? '' };
  }

  protected override collectFrame(): Frame {
    if (this.playWorld) return collectWorldItems(this.playWorld);
    const frame = this.modelFrame();
    // Symbols are editor decoration, so the preview drops them: it shows what playing would show.
    return { ...frame, items: frame.items.filter((item) => !isSymbolType(item.type)) };
  }

  protected override get baseColor(): number {
    return LETTERBOX_COLOR;
  }

  protected override beforeItems(view: View | null): void {
    this.hint.visible = view === null;
    this.hint.position.set(this.w / 2, this.h / 2);
    // Which tab holds the keyboard is otherwise nowhere to be seen.
    this.editorRunCaption.visible = this.editorWorld !== null && !this.playWorld;
    this.editorRunCaption.position.set(8, 6);
  }

  /** Outside the camera frame counts as "not in view": that region is letterbox, not game. */
  private reportPointer(e: FederatedPointerEvent): void {
    const world = this.pointerWorld();
    const view = this.currentView();
    if (!world || !view) return;
    const local = this.toLocal(e.global);
    const point = screenToWorld(view, local.x, local.y);
    world.movePointer(point.x, point.y, isInside(view, local.x, local.y));
  }
}