fullscreen

src/main.ts

@@ -3,6 +3,45 @@ import { BootScene } from './scenes/BootScene';
 import { MenuScene } from './scenes/MenuScene';
 import { GameScene } from './scenes/GameScene';
 
+const installFullscreenRequest = (host: HTMLElement): void => {
+  const canRequestFullscreen =
+    typeof document.fullscreenEnabled === 'boolean'
+      ? document.fullscreenEnabled
+      : typeof host.requestFullscreen === 'function';
+
+  if (!canRequestFullscreen || typeof host.requestFullscreen !== 'function') {
+    return;
+  }
+
+  let handled = false;
+  const events: Array<keyof DocumentEventMap> = ['pointerdown', 'keydown', 'touchstart'];
+
+  const requestFullscreen = async (): Promise<void> => {
+    if (handled) {
+      return;
+    }
+
+    handled = true;
+    events.forEach((eventName) => {
+      document.removeEventListener(eventName, requestFullscreen);
+    });
+
+    if (document.fullscreenElement) {
+      return;
+    }
+
+    try {
+      await host.requestFullscreen();
+    } catch {
+      // Ignore browser denials so gameplay continues normally.
+    }
+  };
+
+  events.forEach((eventName) => {
+    document.addEventListener(eventName, requestFullscreen, { once: true });
+  });
+};
+
 const config: Phaser.Types.Core.GameConfig = {
   type: Phaser.AUTO,
   width: 1280,
@@ -16,4 +55,10 @@ const config: Phaser.Types.Core.GameConfig = {
   },
 };
 
+const gameHost = document.getElementById('game');
+
+if (gameHost instanceof HTMLElement) {
+  installFullscreenRequest(gameHost);
+}
+
 new Phaser.Game(config);