Add zoom steps and a larger start caption to the game link (#266)
game-maker / gate (push) Successful in 4m5s
game-maker / suite (push) Failing after 12m45s

The released game only ever zoomed in whole steps up to 400%, so a
small camera on a large screen stayed far smaller than it could be.
The "Click to play" caption was drawn in the 11 px panel title size
and was easy to miss.

- GAME_SCALE_STEPS gains 300%, 500% and 600%. The game tab picker,
  Auto in the editor and the game link all read the same list.
- The start caption takes its size from the new Theme.captionSize
  (16) instead of a constant in GameScreen.
- The player page keeps the default arrow cursor at all times. It no
  longer switches to the hand over the caption.

Tests:
- view.test: Auto for 320x180 in 2000x2000 is now 6, with cases
  for 3 and 5. play-settings.test takes 2.5 and 8 as invalid steps.
- e2e 60 checks the caption against the panel title size and the
  arrow cursor before and after the start. Module 03 follows the new
  step list.
- ./check.sh 2808 tests, CHECK EXIT 0 (before the last Theme tweak,
  which changes no test). Full e2e run ALL PASSED, 1574 checks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-09-29 14:14:54 +02:00
1 parent 4194f3e150
commit 24d360aeec
8 files changed
+40 -9

No files matched your search

+13 -3
View File
@@ -1,4 +1,4 @@
import { Text } from 'pixi.js';
import { Text, type TextStyle } from 'pixi.js';
import type { World } from '../runtime/World';
import { Theme, textStyle, ui } from '../ui';
import { cameraOfWorld } from '../viewport/activeCamera';
@@ -12,8 +12,16 @@ import { type Frame, type ViewSource, WorldViewport } from '../viewport/WorldVie
* zoom step that fits (Auto), letterboxed in the page colour. Before the game runs, and after it
* stopped itself, it shows a line of text instead – "Click to play", or why there is nothing to play.
*/
function captionStyle(): TextStyle {
const style = textStyle('title').clone();
style.fontSize = Theme.captionSize;
style.letterSpacing = 1;
return style;
}
export class GameScreen extends WorldViewport {
private readonly caption = new Text({ text: '', style: textStyle('title') });
private readonly caption = new Text({ text: '', style: captionStyle() });
private readonly hint = new Text({ text: 'No active camera', style: textStyle('muted') });
private running: World | null = null;
/** Asked when the caption is clicked while it offers to start. */
@@ -41,7 +49,6 @@ export class GameScreen extends WorldViewport {
say(text: string, startable = false): void {
this.caption.text = text;
this.startable = startable;
this.cursor = startable ? 'pointer' : 'default';
this.redraw();
}
@@ -61,6 +68,8 @@ export class GameScreen extends WorldViewport {
*/
info(): {
caption: string | null;
/** How tall the caption is drawn, in CSS pixels. */
captionHeight: number;
scale: number | null;
frame: { x: number; y: number; w: number; h: number } | null;
} {
@@ -68,6 +77,7 @@ export class GameScreen extends WorldViewport {
const origin = this.getGlobalPosition();
return {
caption: this.running ? null : this.caption.text,
captionHeight: Math.round(this.caption.height),
scale: view?.scale ?? null,
frame: view ? { ...view.rect, x: origin.x + view.rect.x, y: origin.y + view.rect.y } : null,
};