Show only the game view in fullscreen, in the editor and the link (#267)

A game is easier to judge and to play without the editor around it.
The Game tab and the game link now both have a button that puts the
game view itself into fullscreen, not just the browser window.

- The Game tab header has a fullscreen button on the right. It hides
  toolbar, panels, tab headers and console and keeps the zoom from the
  picker. A running game keeps running.
- A corner button at the top right, or Esc, leaves fullscreen and puts
  the view back into the tab where it was.
- The game link shows the same corner button. Over a running game it
  hides after 2 s without mouse movement and returns on the next move.
- A click on the corner button never reaches the game.
- Stop ends fullscreen. Stop switches back to the Scene tab, and any
  switch away from the Game tab ends fullscreen, so no empty screen is
  left behind.
- src/viewport/fullscreen.ts wraps the Fullscreen API and holds the
  rule for when the button shows. FullscreenCorner.ts is the button
  used by both pages. Two SVG icons are new.
- Editor.showGameFullscreen moves the GameViewport into the root while
  fullscreen is on.

Tests:
- ./check.sh: 195 files, 2815 tests, exit 0 (3 new unit tests).
- e2e 60: 2 new checks for the corner button on the game link.
- e2e 61 (new): 4 checks for fullscreen in the editor.
- Full e2e run (local): ALL PASSED, 1580 checks.
- Counter-checks fail as expected: rule without "no game running",
  no stopPropagation (60h), no end on tab switch (61c), no reparenting
  of the view (61a).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/Editor.ts

@@ -33,6 +33,7 @@ import { GamePane } from './viewport/GamePane';
 import { ScenePane } from './viewport/ScenePane';
 import { GameViewport } from './viewport/GameViewport';
 import { SceneViewport } from './viewport/SceneViewport';
+import { leaveFullscreen, onFullscreenChange } from '../viewport/fullscreen';
 import { TAB_OF_ASSET } from './assetTabs';
 import { attachAutosave } from './autosave';
 import { PasswordDialog } from './auth/PasswordDialog';
@@ -463,6 +464,8 @@ export class Editor implements PlayHost {
     const onTick = (ticker: Ticker) => this.tick(ticker.deltaMS / 1000);
     app.ticker.add(onTick);
     this.cleanups.push(() => app.ticker.remove(onTick));
+    // Only the game tab's button asks for fullscreen, so every change is the game view's (#267).
+    this.cleanups.push(onFullscreenChange((on) => this.showGameFullscreen(on)));
     // In the game view Tab is a game key (an inventory, a target switch) – like every other key there.
     const focus = ui().focus;
     focus.tabBelongsElsewhere = () => this.tab === 'game';
@@ -690,6 +693,28 @@ export class Editor implements PlayHost {
     else this.showTab(tab);
   }
 
+  /**
+   * In fullscreen the game view is all the page shows: it moves from its tab to the root, and the
+   * toolbar and the workspace step aside. Leaving puts it back where it was, below the tab header.
+   */
+  private showGameFullscreen(on: boolean): void {
+    if (on === this.gameView.isFullscreen) return;
+    this.toolbar.visible = !on;
+    this.workspace.visible = !on;
+    if (on) this.root.add(this.gameView, 1);
+    else this.gamePane.add(this.gameView, 1);
+    this.gameView.setFullscreen(on);
+    this.root.relayout();
+    // The pane may come back at the size it had, and a resize to the same size lays nothing out.
+    this.gamePane.relayout();
+  }
+
+  /** Back to the editor now, not when the browser reports it: the caller goes on with the layout. */
+  private endGameFullscreen(): void {
+    leaveFullscreen();
+    this.showGameFullscreen(false);
+  }
+
   private kindOf(doc: DocumentId): CentreTab | null {
     if (doc.startsWith('values:')) {
       const target = this.valueTargets.get(doc);
@@ -754,6 +779,8 @@ export class Editor implements PlayHost {
 
   /** Shows the pane for `tab`, with `strip` lit in the row – none for an empty kind reached by `showTab`. */
   private display(tab: TabId, strip: StripTab | null): void {
+    // Fullscreen is the game view's; a tab that takes its place (Stop goes back to the scene) ends it.
+    if (tab !== 'game') this.endGameFullscreen();
     this.tab = tab;
     this.documents = { docs: this.documents.docs, active: strip && isDocument(strip) ? strip : null };
     // The hierarchy lists what the visible tab edits; every other tab is about the scene.
@@ -817,6 +844,7 @@ export class Editor implements PlayHost {
   async dispose(): Promise<void> {
     if (this.disposed) return;
     this.disposed = true;
+    this.endGameFullscreen();
     await this.autosave.flush();
     this.autosave.stop();
     if (this.play.isPlaying) this.play.stop();

src/editor/debug/hookHelpers.ts

@@ -1,4 +1,5 @@
-import type { Application } from 'pixi.js';
+import type { Application, Container } from 'pixi.js';
+import { ui } from '../../ui';
 import type { Editor } from '../Editor';
 import type { SnapToggle } from '../graph/SnapToggle';
 import type { EditorState } from '../state';
@@ -18,6 +19,16 @@ export function centreOf(widget: { getGlobalPosition(): { x: number; y: number }
   return { x: p.x + widget.w / 2, y: p.y + widget.h / 2 };
 }
 
+/** Whether `node` and everything it hangs from are visible, up to a stage. */
+export function shownOnStage(node: Container): boolean {
+  let current = node;
+  while (current.visible) {
+    if (!current.parent) return current === ui().app.stage;
+    current = current.parent;
+  }
+  return false;
+}
+
 /** A tab's magnet (#194): where to click it, how big it is drawn, and whether it is on. */
 export function snapButton(snap: SnapToggle): {
   x: number;

src/editor/debug/sceneHooks.ts

@@ -5,7 +5,7 @@ import { currentVisibilityPopup } from '../panels/SceneVisibilityPopup';
 import { currentTilemapWidgets, paintedLayerId, paintedTilemap } from '../panels/TilemapPanel';
 import type { TilemapTool } from '../state';
 import { rectOf } from '../textProbe';
-import { centreOf, type HookContext } from './hookHelpers';
+import { centreOf, type HookContext, shownOnStage } from './hookHelpers';
 
 /** The Scene and Game tabs, the tilemap painted in the scene view, and the Container tab. */
 export function sceneHooks({ state, editor }: HookContext) {
@@ -96,6 +96,16 @@ export function sceneHooks({ state, editor }: HookContext) {
         picker: centreOf(gamePane.scalePicker),
       };
     },
+    /**
+     * Fullscreen of the game view (#267): whether the view is moved to the root, whether the browser
+     * is in fullscreen, the header button, and the corner button while it shows.
+     */
+    gameFullscreen: () => ({
+      on: gameView.isFullscreen,
+      document: document.fullscreenElement !== null,
+      headerButton: shownOnStage(gamePane.fullscreenButton) ? centreOf(gamePane.fullscreenButton) : null,
+      corner: shownOnStage(gameView.fullscreenButton) ? centreOf(gameView.fullscreenButton) : null,
+    }),
     /** Which typeface a text ended up drawn in, and how wide it made it. */
     textInfo: (id: string) => viewport.textInfo(id),
     gameTextInfo: (id: string) => gameView.textInfo(id),

src/editor/viewport/GamePane.ts

@@ -1,4 +1,5 @@
-import { Dropdown, Menu, type MenuItem, VStack } from '../../ui';
+import { Button, Dropdown, Menu, type MenuItem, Spacer, Theme, UI_ICON_SVG, VStack } from '../../ui';
+import { toggleFullscreen } from '../../viewport/fullscreen';
 import { GAME_SCALE_STEPS, type GameScale } from '../../viewport/view';
 import { TabHeader } from '../TabHeader';
 import type { GameViewport } from './GameViewport';
@@ -6,11 +7,16 @@ import type { GameViewport } from './GameViewport';
 /** Room for the longest label, "Auto · 400%". */
 const SCALE_WIDTH = 110;
 
-/** The game tab (#225): a header with the scale picker above the game view. */
+/** The game tab (#225): a header with the scale picker and the fullscreen button above the game view. */
 export class GamePane extends VStack {
   readonly header = new TabHeader();
   /** Public for the check scripts. */
   readonly scalePicker: Dropdown;
+  readonly fullscreenButton = new Button('', {
+    width: Theme.controlHeight,
+    icon: UI_ICON_SVG.fullscreen,
+    onClick: () => void toggleFullscreen(),
+  });
 
   constructor(readonly view: GameViewport) {
     super();
@@ -19,6 +25,8 @@ export class GamePane extends VStack {
       onClick: () => this.openScalePicker(),
     });
     this.header.add(this.scalePicker);
+    this.header.add(new Spacer(), 1);
+    this.header.add(this.fullscreenButton);
     this.add(this.header);
     this.add(view, 1);
     view.onScaleShown = (factor) => this.scalePicker.setText(scaleLabel(view.scaleMode, factor));

src/editor/viewport/GameViewport.ts

@@ -8,6 +8,7 @@ import type { EditorState } from '../state';
 import type { World } from '../../runtime/World';
 import { Theme, textStyle, ui } from '../../ui';
 import { type ActiveCamera, cameraOfItems, cameraOfWorld } from '../../viewport/activeCamera';
+import { FullscreenCorner } from '../../viewport/FullscreenCorner';
 import { collectHolderItems, collectWorldItems } from '../../viewport/items';
 import { routePointer } from '../../viewport/gamePointer';
 import { cameraFactor, cameraView, type GameScale, type View } from '../../viewport/view';
@@ -26,6 +27,9 @@ export class GameViewport extends WorldViewport<EditorState> {
   private factor: number | null = null;
   /** Told the factor of every redraw: auto and fit change with the view. */
   onScaleShown: ((factor: number | null) => void) | null = null;
+  /** The way back out of fullscreen (#267); the tab header has the way in. */
+  readonly fullscreenButton = new FullscreenCorner(this);
+  private fullscreen = false;
 
   constructor(state: EditorState) {
     super(state);
@@ -34,6 +38,8 @@ export class GameViewport extends WorldViewport<EditorState> {
     this.addChild(this.hint);
     this.editorRunCaption.eventMode = 'none';
     this.addChild(this.editorRunCaption);
+    this.addChild(this.fullscreenButton);
+    this.fullscreenButton.sync(false, false);
     routePointer(
       this,
       () => this.pointerWorld(),
@@ -44,9 +50,20 @@ export class GameViewport extends WorldViewport<EditorState> {
   /** null = not playing. */
   setWorld(world: World | null): void {
     this.playWorld = world;
+    this.fullscreenButton.sync(this.fullscreen, world !== null);
     this.redraw();
   }
 
+  get isFullscreen(): boolean {
+    return this.fullscreen;
+  }
+
+  /** Whether this view is all the screen shows; the editor moves it there and back. */
+  setFullscreen(on: boolean): void {
+    this.fullscreen = on;
+    this.fullscreenButton.sync(on, this.playWorld !== null);
+  }
+
   /** null = no behavior is running outside play mode. */
   setEditorWorld(world: World | null): void {
     this.editorWorld = world;
@@ -134,5 +151,6 @@ export class GameViewport extends WorldViewport<EditorState> {
     // 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);
+    this.fullscreenButton.place(this.w);
   }
 }

src/player/GameScreen.ts

@@ -2,6 +2,7 @@ import { Text, type TextStyle } from 'pixi.js';
 import type { World } from '../runtime/World';
 import { Theme, textStyle, ui } from '../ui';
 import { cameraOfWorld } from '../viewport/activeCamera';
+import { FullscreenCorner } from '../viewport/FullscreenCorner';
 import { routePointer } from '../viewport/gamePointer';
 import { collectWorldItems } from '../viewport/items';
 import { cameraView, type View } from '../viewport/view';
@@ -27,6 +28,7 @@ export class GameScreen extends WorldViewport {
   /** Asked when the caption is clicked while it offers to start. */
   onStart: (() => void) | null = null;
   private startable = false;
+  readonly fullscreenButton = new FullscreenCorner(this);
 
   constructor(source: ViewSource) {
     super(source);
@@ -35,6 +37,7 @@ export class GameScreen extends WorldViewport {
       text.anchor.set(0.5);
       this.addChild(text);
     }
+    this.addChild(this.fullscreenButton);
     routePointer(
       this,
       () => this.running,
@@ -59,6 +62,7 @@ export class GameScreen extends WorldViewport {
   /** null = not running. */
   setWorld(world: World | null): void {
     this.running = world;
+    this.fullscreenButton.sync(true, world !== null);
     this.redraw();
   }
 
@@ -101,5 +105,6 @@ export class GameScreen extends WorldViewport {
     this.caption.position.set(this.w / 2, this.h / 2);
     this.hint.visible = this.running !== null && view === null;
     this.hint.position.set(this.w / 2, this.h / 2);
+    this.fullscreenButton.place(this.w);
   }
 }

src/player/playerHook.ts

@@ -13,5 +13,14 @@ export function installPlayerHook(screen: GameScreen, player: () => Player | nul
     screen: () => screen.info(),
     log: () => player()?.log() ?? [],
     pixelAt: (x: number, y: number) => stagePixel(ui().app, x, y),
+    /** Whether the page is in fullscreen, and the corner button while it shows (#267). */
+    fullscreen: () => {
+      const button = screen.fullscreenButton;
+      const origin = button.getGlobalPosition();
+      return {
+        on: document.fullscreenElement !== null,
+        button: button.visible ? { x: origin.x + button.w / 2, y: origin.y + button.h / 2 } : null,
+      };
+    },
   };
 }

src/ui/icons.ts

@@ -3,7 +3,9 @@
  * come from whatever font the system has, so they are SVG files like every other icon.
  */
 import current from './icons/current.svg?raw';
+import fullscreenExit from './icons/fullscreen-exit.svg?raw';
+import fullscreen from './icons/fullscreen.svg?raw';
 import ticked from './icons/ticked.svg?raw';
 import unticked from './icons/unticked.svg?raw';
 
-export const UI_ICON_SVG = { current, ticked, unticked };
+export const UI_ICON_SVG = { current, fullscreen, fullscreenExit, ticked, unticked };

src/ui/icons/fullscreen-exit.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="fullscreen-exit" viewBox="-8 -8 16 16" width="16" height="16">
+  <path d="M-6 -2 L-2 -2 L-2 -6" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <path d="M2 -6 L2 -2 L6 -2" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <path d="M6 2 L2 2 L2 6" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <path d="M-2 6 L-2 2 L-6 2" fill="none" stroke="currentColor" stroke-width="1.5" />
+</svg>

src/ui/icons/fullscreen.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="fullscreen" viewBox="-8 -8 16 16" width="16" height="16">
+  <path d="M-6 -2 L-6 -6 L-2 -6" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <path d="M2 -6 L6 -6 L6 -2" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <path d="M6 2 L6 6 L2 6" fill="none" stroke="currentColor" stroke-width="1.5" />
+  <path d="M-2 6 L-6 6 L-6 2" fill="none" stroke="currentColor" stroke-width="1.5" />
+</svg>

src/viewport/FullscreenCorner.ts

@@ -0,0 +1,78 @@
+import type { Container, FederatedPointerEvent } from 'pixi.js';
+import { Button, requestRender, Theme, UI_ICON_SVG } from '../ui';
+import {
+  CORNER_BUTTON_IDLE_SECONDS,
+  isFullscreen,
+  onFullscreenChange,
+  showsCornerButton,
+  toggleFullscreen,
+} from './fullscreen';
+
+/**
+ * The fullscreen button in the top right corner of a game on screen (#267): on the player page
+ * always, in the editor while its game view is in fullscreen. Over a running game it steps aside
+ * once the mouse rests (`showsCornerButton`).
+ */
+export class FullscreenCorner extends Button {
+  private active = true;
+  private running = false;
+  private lastMove = performance.now();
+  private hideTimer = 0;
+  private readonly stopChange: () => void;
+
+  constructor(host: Container) {
+    super('', {
+      width: Theme.controlHeight,
+      icon: isFullscreen() ? UI_ICON_SVG.fullscreenExit : UI_ICON_SVG.fullscreen,
+      onClick: () => void toggleFullscreen(),
+    });
+    this.focusable = false;
+    this.resize(Theme.controlHeight, Theme.controlHeight);
+    // The button lies on the game: a press on it must neither start the game nor reach it as a click.
+    const keep = (e: FederatedPointerEvent): void => e.stopPropagation();
+    this.on('pointerdown', keep);
+    this.on('pointerup', keep);
+    this.on('pointerover', () => this.refresh());
+    this.on('pointerout', () => this.refresh());
+    host.on('globalpointermove', () => {
+      this.lastMove = performance.now();
+      this.refresh();
+    });
+    this.stopChange = onFullscreenChange((on) =>
+      this.setIcon(on ? UI_ICON_SVG.fullscreenExit : UI_ICON_SVG.fullscreen),
+    );
+  }
+
+  override destroy(options?: Parameters<Button['destroy']>[0]): void {
+    this.stopChange();
+    window.clearTimeout(this.hideTimer);
+    super.destroy(options);
+  }
+
+  /** `active`: whether the host wants the button at all; `running`: whether a game is on screen. */
+  sync(active: boolean, running: boolean): void {
+    this.active = active;
+    this.running = running;
+    this.refresh();
+  }
+
+  /** Top right, a gap in from both edges of a host `w` wide. */
+  place(w: number): void {
+    this.position.set(Math.round(w - this.w - Theme.gap * 2), Theme.gap * 2);
+  }
+
+  private refresh(): void {
+    window.clearTimeout(this.hideTimer);
+    const idleSeconds = (performance.now() - this.lastMove) / 1000;
+    const show =
+      this.active && showsCornerButton({ running: this.running, idleSeconds, overButton: this.hovered });
+    if (show !== this.visible) {
+      this.visible = show;
+      requestRender();
+    }
+    if (show && this.running && !this.hovered) {
+      const left = CORNER_BUTTON_IDLE_SECONDS - idleSeconds;
+      this.hideTimer = window.setTimeout(() => this.refresh(), Math.max(0, left * 1000) + 20);
+    }
+  }
+}

src/viewport/fullscreen.ts

@@ -0,0 +1,44 @@
+/**
+ * Fullscreen for the game view (#267): the browser's Fullscreen API on the whole page, which is the
+ * one canvas. What the canvas then shows – only the game – is up to the page that asked.
+ */
+
+/** How long the corner button stays after the mouse last moved over a running game. */
+export const CORNER_BUTTON_IDLE_SECONDS = 2;
+
+/**
+ * Whether the corner button shows: always while no game runs, and over a running game only while
+ * the mouse moves or rests on the button – it would otherwise sit over the picture for good.
+ */
+export function showsCornerButton(state: {
+  running: boolean;
+  idleSeconds: number;
+  overButton: boolean;
+}): boolean {
+  return !state.running || state.overButton || state.idleSeconds < CORNER_BUTTON_IDLE_SECONDS;
+}
+
+export function isFullscreen(): boolean {
+  return document.fullscreenElement !== null;
+}
+
+/** Enters or leaves fullscreen; a browser that refuses leaves everything as it was. */
+export async function toggleFullscreen(): Promise<void> {
+  try {
+    if (isFullscreen()) await document.exitFullscreen();
+    else await document.documentElement.requestFullscreen();
+  } catch (error) {
+    console.warn('[fullscreen]', error);
+  }
+}
+
+export function leaveFullscreen(): void {
+  if (isFullscreen()) void document.exitFullscreen().catch((error) => console.warn('[fullscreen]', error));
+}
+
+/** Calls `handler` whenever fullscreen starts or ends, by the button or by Esc; returns the call that stops it. */
+export function onFullscreenChange(handler: (on: boolean) => void): () => void {
+  const listener = (): void => handler(isFullscreen());
+  document.addEventListener('fullscreenchange', listener);
+  return () => document.removeEventListener('fullscreenchange', listener);
+}