fullscreen

android/app/src/main/java/com/phaser/scopa/MainActivity.java

@@ -1,5 +1,41 @@
 package com.phaser.scopa;
 
+import android.os.Bundle;
+
+import androidx.core.view.WindowCompat;
+import androidx.core.view.WindowInsetsCompat;
+import androidx.core.view.WindowInsetsControllerCompat;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+	@Override
+	protected void onCreate(Bundle savedInstanceState) {
+		super.onCreate(savedInstanceState);
+		applyImmersiveMode();
+	}
+
+	@Override
+	public void onWindowFocusChanged(boolean hasFocus) {
+		super.onWindowFocusChanged(hasFocus);
+
+		if (hasFocus) {
+			applyImmersiveMode();
+		}
+	}
+
+	private void applyImmersiveMode() {
+		WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
+
+		WindowInsetsControllerCompat controller = WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
+
+		if (controller == null) {
+			return;
+		}
+
+		controller.hide(WindowInsetsCompat.Type.statusBars() | WindowInsetsCompat.Type.navigationBars());
+		controller.setSystemBarsBehavior(
+			WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
+		);
+	}
+}

index.html

@@ -6,7 +6,10 @@
   <title>Scopone Scientifico</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { background: #1a5c2a; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
+    html, body { width: 100%; height: 100%; }
+    body { background: #1a5c2a; overflow: hidden; }
+    #game { width: 100vw; height: 100vh; }
+    #game:fullscreen { width: 100vw; height: 100vh; }
     canvas { display: block; }
   </style>
 </head>

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);