From a90ef4c22f0019ecc02381c1914c1c5407287f43 Mon Sep 17 00:00:00 2001
From: MelekTaus <melektaus@outlook.at>
Date: Sun, 27 Sep 2026 12:57:28 +0200
Subject: [PATCH] Draw the game view letterbox in the editor background colour

The bars around the camera frame in the Game tab were pure black.
They now take Theme.colors.background, so the tab blends in with the
rest of the editor instead of framing the game in a black box.

- GameViewport drops LETTERBOX_COLOR and uses the theme colour for
  both the letterbox and the model frame.
- e2e 3f checked "the crate is drawn, not letterbox" against
  #000000. With the new colour that would pass whatever is drawn,
  so it now compares against #1b1d22.

Tests:
- ./check.sh: 178 files, 2575 tests, CHECK EXIT 0
- GM_STEPS=1-3,46: ALL PASSED, 94 checks (3f reads #e0553f)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/editor/viewport/GameViewport.ts | 10 +++++-----
 tools/e2e/03-play.mjs               |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/editor/viewport/GameViewport.ts b/src/editor/viewport/GameViewport.ts
index 0e134a77..a1ba27b1 100644
--- a/src/editor/viewport/GameViewport.ts
+++ b/src/editor/viewport/GameViewport.ts
@@ -6,7 +6,7 @@ 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, ui } from '../../ui';
+import { Theme, textStyle, ui } from '../../ui';
 import { type ActiveCamera, cameraOfItems, cameraOfWorld } from '../../viewport/activeCamera';
 import { collectHolderItems, collectWorldItems } from '../../viewport/items';
 import {
@@ -19,8 +19,6 @@ import {
 } 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({
@@ -102,7 +100,9 @@ export class GameViewport extends WorldViewport {
   }
 
   private modelFrame(): Frame {
-    return collectHolderItems(this.state.project, this.state.activeScene, LETTERBOX_COLOR, this.editorWorld);
+    const state = this.state;
+    const background = Theme.colors.background;
+    return collectHolderItems(state.project, state.activeScene, background, this.editorWorld);
   }
 
   /**
@@ -134,7 +134,7 @@ export class GameViewport extends WorldViewport {
   }
 
   protected override get baseColor(): number {
-    return LETTERBOX_COLOR;
+    return Theme.colors.background;
   }
 
   protected override beforeItems(view: View | null): void {
diff --git a/tools/e2e/03-play.mjs b/tools/e2e/03-play.mjs
index f459dc33..c93ea81b 100644
--- a/tools/e2e/03-play.mjs
+++ b/tools/e2e/03-play.mjs
@@ -254,7 +254,8 @@ export async function play(t) {
   );
   check(
     'and the crate is really drawn there, not left as letterbox',
-    previewPixel !== '#000000',
+    // The letterbox is Theme.colors.background.
+    previewPixel !== '#1b1d22',
     previewPixel,
   );
   await shot('10c-game-preview');