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>
This commit is contained in:
1 parent
24d360aeec
commit
cab1c0177f
17 files changed
+356
-8
No files matched your search
+3
-1
@@ -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 };
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 458 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 453 B |
Reference in new issue
Block a user