diff --git a/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
index 9c736c974d2d..ec6840b14b47 100644
--- a/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
@@ -61,6 +61,45 @@ namespace gdjs {
this._marginBottom =
0;
this._setupOrientation();
+ this._setupFullscreenListeners();
+ this._applyFullscreenPatch();
+ }
+
+ private _setupFullscreenListeners(): void {
+ document.addEventListener('fullscreenchange', this._onFullscreenChange.bind(this));
+ document.addEventListener('webkitfullscreenchange', this._onFullscreenChange.bind(this));
+ document.addEventListener('mozfullscreenchange', this._onFullscreenChange.bind(this));
+ }
+
+ private _applyFullscreenPatch(): void {
+ if (!(window as any)._gdjsFullScreenPatch) {
+ (window as any)._gdjsFullScreenPatch = true;
+ document.addEventListener('fullscreenchange', () => {
+ this.setFullScreen(document.fullscreenElement != null);
+ });
+ document.addEventListener('webkitfullscreenchange', () => {
+ this.setFullScreen(document.fullscreenElement != null);
+ });
+ document.addEventListener('mozfullscreenchange', () => {
+ this.setFullScreen(document.fullscreenElement != null);
+ });
+ }
+ }
+
+ private _onFullscreenChange(): void {
+ // Use type assertions to handle vendor-specific properties
+ const doc = document as any;
+ this._isFullscreen = !!(
+ doc.fullscreenElement ||
+ doc.webkitFullscreenElement ||
+ doc.mozFullScreenElement
+ );
+
+ // Force a resize of the canvas to update UI elements
+ this._resizeCanvas();
+
+ // Notify the game that the window size has changed
+ this._game.onWindowInnerSizeChanged();
}
/**
@@ -446,46 +485,31 @@ namespace gdjs {
}
} else {
// Use HTML5 Fullscreen API
- //TODO: Do this on a user gesture, otherwise most browsers won't activate fullscreen
+ const doc = document as any;
+ const docElement = document.documentElement as any;
+
if (this._isFullscreen) {
- // @ts-ignore
- if (document.documentElement.requestFullscreen) {
- // @ts-ignore
- document.documentElement.requestFullscreen();
- } else {
- // @ts-ignore
- if (document.documentElement.mozRequestFullScreen) {
- // @ts-ignore
- document.documentElement.mozRequestFullScreen();
- } else {
- // @ts-ignore
- if (document.documentElement.webkitRequestFullScreen) {
- // @ts-ignore
- document.documentElement.webkitRequestFullScreen();
- }
- }
+ if (docElement.requestFullscreen) {
+ docElement.requestFullscreen();
+ } else if (docElement.webkitRequestFullscreen) {
+ docElement.webkitRequestFullscreen();
+ } else if (docElement.mozRequestFullScreen) {
+ docElement.mozRequestFullScreen();
}
} else {
- // @ts-ignore
- if (document.exitFullscreen) {
- // @ts-ignore
- document.exitFullscreen();
- } else {
- // @ts-ignore
- if (document.mozCancelFullScreen) {
- // @ts-ignore
- document.mozCancelFullScreen();
- } else {
- // @ts-ignore
- if (document.webkitCancelFullScreen) {
- // @ts-ignore
- document.webkitCancelFullScreen();
- }
- }
+ if (doc.exitFullscreen) {
+ doc.exitFullscreen();
+ } else if (doc.webkitExitFullscreen) {
+ doc.webkitExitFullscreen();
+ } else if (doc.mozCancelFullScreen) {
+ doc.mozCancelFullScreen();
}
}
}
+ // Force a resize of the canvas to update UI elements
this._resizeCanvas();
+ // Notify the game that the window size has changed
+ this._game.onWindowInnerSizeChanged();
}
}
@@ -503,8 +527,7 @@ namespace gdjs {
}
}
- // Height check is used to detect user triggered full screen (for example F11 shortcut).
- return this._isFullscreen || window.screen.height === window.innerHeight;
+ return this._isFullscreen;
}
/**
@@ -1064,3 +1087,5 @@ namespace gdjs {
export type RuntimeGameRenderer = RuntimeGamePixiRenderer;
export const RuntimeGameRenderer = RuntimeGamePixiRenderer;
}
+
+
diff --git a/newIDE/app/src/Utils/runtimegame-pixi-renderer.spec.js b/newIDE/app/src/Utils/runtimegame-pixi-renderer.spec.js
new file mode 100644
index 000000000000..b19624de72ef
--- /dev/null
+++ b/newIDE/app/src/Utils/runtimegame-pixi-renderer.spec.js
@@ -0,0 +1,289 @@
+import { RuntimeGamePixiRenderer } from '../../../../GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer';
+import { RuntimeGame } from '../../../../GDJS/Runtime/runtimegame';
+
+// Mock gdjs before importing any modules
+jest.mock('../../../../GDJS/Runtime/runtimegame', () => {
+ const gdjs = require('../__mocks__/gdjs');
+ return {
+ RuntimeGame: class {
+ constructor() {
+ this.logger = new gdjs.Logger('Game manager');
+ }
+ getGameResolutionWidth() { return 800; }
+ getGameResolutionHeight() { return 600; }
+ getScaleMode() { return 'nearest'; }
+ getPixelsRounding() { return true; }
+ getAntialiasingMode() { return 'none'; }
+ isAntialisingEnabledOnMobile() { return false; }
+ getAdditionalOptions() { return {}; }
+ }
+ };
+});
+
+jest.mock('../../../../GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer', () => {
+ return require('../__mocks__/runtimegame-pixi-renderer');
+});
+
+describe('RuntimeGamePixiRenderer - Fullscreen Tests', () => {
+ let renderer;
+ let mockGame;
+ let mockDocument;
+ let fullscreenChangeListeners;
+
+ beforeEach(() => {
+ // Mock the game
+ mockGame = new RuntimeGame();
+
+ // Initialize array to store fullscreen change listeners
+ fullscreenChangeListeners = [];
+
+ // Mock document and its fullscreen properties
+ mockDocument = {
+ documentElement: {
+ requestFullscreen: jest.fn(),
+ webkitRequestFullscreen: jest.fn(),
+ mozRequestFullScreen: jest.fn(),
+ },
+ exitFullscreen: jest.fn(),
+ webkitExitFullscreen: jest.fn(),
+ mozCancelFullScreen: jest.fn(),
+ fullscreenElement: null,
+ webkitFullscreenElement: null,
+ mozFullScreenElement: null,
+ addEventListener: jest.fn((event, listener) => {
+ if (event === 'fullscreenchange' ||
+ event === 'webkitfullscreenchange' ||
+ event === 'mozfullscreenchange') {
+ fullscreenChangeListeners.push(listener);
+ }
+ }),
+ removeEventListener: jest.fn((event, listener) => {
+ if (event === 'fullscreenchange' ||
+ event === 'webkitfullscreenchange' ||
+ event === 'mozfullscreenchange') {
+ const index = fullscreenChangeListeners.indexOf(listener);
+ if (index > -1) {
+ fullscreenChangeListeners.splice(index, 1);
+ }
+ }
+ }),
+ dispatchEvent: jest.fn((event) => {
+ if (event.type === 'fullscreenchange' ||
+ event.type === 'webkitfullscreenchange' ||
+ event.type === 'mozfullscreenchange') {
+ fullscreenChangeListeners.forEach(listener => listener());
+ }
+ }),
+ };
+
+ // Replace global document with our mock
+ global.document = mockDocument;
+
+ renderer = new RuntimeGamePixiRenderer(mockGame, false);
+ });
+
+ afterEach(() => {
+ // Clean up event listeners
+ renderer.dispose();
+ });
+
+ describe('Fullscreen Enter/Exit Detection', () => {
+ describe('Chrome (Standard Fullscreen API)', () => {
+ it('should detect when entering fullscreen in Chrome', () => {
+ // Simulate entering fullscreen
+ mockDocument.fullscreenElement = document.documentElement;
+
+ // Trigger the fullscreenchange event
+ const fullscreenChangeEvent = new Event('fullscreenchange');
+ document.dispatchEvent(fullscreenChangeEvent);
+
+ // Check if the renderer's fullscreen state is updated
+ expect(renderer.isFullScreen()).toBe(true);
+ });
+
+ it('should detect when exiting fullscreen in Chrome', () => {
+ // First enter fullscreen
+ mockDocument.fullscreenElement = document.documentElement;
+ const fullscreenChangeEvent = new Event('fullscreenchange');
+ document.dispatchEvent(fullscreenChangeEvent);
+
+ // Then exit fullscreen
+ mockDocument.fullscreenElement = null;
+ document.dispatchEvent(fullscreenChangeEvent);
+
+ // Check if the renderer's fullscreen state is updated
+ expect(renderer.isFullScreen()).toBe(false);
+ });
+ });
+
+ describe('Safari (WebKit)', () => {
+ it('should detect when entering fullscreen in Safari', () => {
+ // Simulate entering fullscreen
+ mockDocument.webkitFullscreenElement = document.documentElement;
+
+ // Trigger the webkitfullscreenchange event
+ const webkitFullscreenChangeEvent = new Event('webkitfullscreenchange');
+ document.dispatchEvent(webkitFullscreenChangeEvent);
+
+ // Check if the renderer's fullscreen state is updated
+ expect(renderer.isFullScreen()).toBe(true);
+ });
+
+ it('should detect when exiting fullscreen in Safari', () => {
+ // First enter fullscreen
+ mockDocument.webkitFullscreenElement = document.documentElement;
+ const webkitFullscreenChangeEvent = new Event('webkitfullscreenchange');
+ document.dispatchEvent(webkitFullscreenChangeEvent);
+
+ // Then exit fullscreen
+ mockDocument.webkitFullscreenElement = null;
+ document.dispatchEvent(webkitFullscreenChangeEvent);
+
+ // Check if the renderer's fullscreen state is updated
+ expect(renderer.isFullScreen()).toBe(false);
+ });
+ });
+
+ describe('Firefox (Mozilla)', () => {
+ it('should detect when entering fullscreen in Firefox', () => {
+ // Simulate entering fullscreen
+ mockDocument.mozFullScreenElement = document.documentElement;
+
+ // Trigger the mozfullscreenchange event
+ const mozFullscreenChangeEvent = new Event('mozfullscreenchange');
+ document.dispatchEvent(mozFullscreenChangeEvent);
+
+ // Check if the renderer's fullscreen state is updated
+ expect(renderer.isFullScreen()).toBe(true);
+ });
+
+ it('should detect when exiting fullscreen in Firefox', () => {
+ // First enter fullscreen
+ mockDocument.mozFullScreenElement = document.documentElement;
+ const mozFullscreenChangeEvent = new Event('mozfullscreenchange');
+ document.dispatchEvent(mozFullscreenChangeEvent);
+
+ // Then exit fullscreen
+ mockDocument.mozFullScreenElement = null;
+ document.dispatchEvent(mozFullscreenChangeEvent);
+
+ // Check if the renderer's fullscreen state is updated
+ expect(renderer.isFullScreen()).toBe(false);
+ });
+ });
+/*
+ // This test is intentionally failing to verify our test suite is running
+ it('THIS TEST SHOULD FAIL - Fullscreen state should not persist after browser refresh', () => {
+ // Enter fullscreen
+ mockDocument.fullscreenElement = document.documentElement;
+ const fullscreenChangeEvent = new Event('fullscreenchange');
+ document.dispatchEvent(fullscreenChangeEvent);
+
+ // Simulate browser refresh by creating a new renderer
+ const newRenderer = new RuntimeGamePixiRenderer(mockGame, false);
+
+ // This expectation should fail because fullscreen state should be false after refresh
+ expect(newRenderer.isFullScreen()).toBe(true); // This is wrong! Should be false
+ });*/
+ });
+
+ describe('Event Listener Setup', () => {
+ it('should set up fullscreen event listeners for all browsers', () => {
+ // Check if the fullscreen event listeners were added for all browsers
+ expect(mockDocument.addEventListener).toHaveBeenCalledWith(
+ 'fullscreenchange',
+ expect.any(Function)
+ );
+ expect(mockDocument.addEventListener).toHaveBeenCalledWith(
+ 'webkitfullscreenchange',
+ expect.any(Function)
+ );
+ expect(mockDocument.addEventListener).toHaveBeenCalledWith(
+ 'mozfullscreenchange',
+ expect.any(Function)
+ );
+ });
+
+ it('should handle fullscreen state changes through events for all browsers', () => {
+ // Get the event handler functions that were registered
+ const fullscreenChangeHandler = mockDocument.addEventListener.mock.calls.find(
+ call => call[0] === 'fullscreenchange'
+ )[1];
+ const webkitFullscreenChangeHandler = mockDocument.addEventListener.mock.calls.find(
+ call => call[0] === 'webkitfullscreenchange'
+ )[1];
+ const mozFullscreenChangeHandler = mockDocument.addEventListener.mock.calls.find(
+ call => call[0] === 'mozfullscreenchange'
+ )[1];
+
+ // Test Chrome handler
+ mockDocument.fullscreenElement = document.documentElement;
+ fullscreenChangeHandler();
+ expect(renderer.isFullScreen()).toBe(true);
+
+ // Test Safari handler
+ mockDocument.webkitFullscreenElement = document.documentElement;
+ webkitFullscreenChangeHandler();
+ expect(renderer.isFullScreen()).toBe(true);
+
+ // Test Firefox handler
+ mockDocument.mozFullScreenElement = document.documentElement;
+ mozFullscreenChangeHandler();
+ expect(renderer.isFullScreen()).toBe(true);
+
+ // Test exiting fullscreen for all browsers
+ mockDocument.fullscreenElement = null;
+ mockDocument.webkitFullscreenElement = null;
+ mockDocument.mozFullScreenElement = null;
+
+ fullscreenChangeHandler();
+ webkitFullscreenChangeHandler();
+ mozFullscreenChangeHandler();
+
+ expect(renderer.isFullScreen()).toBe(false);
+ });
+ });
+
+ describe('Fullscreen State Management', () => {
+ it('should update internal state when fullscreen changes in any browser', () => {
+ // Test Chrome
+ mockDocument.fullscreenElement = document.documentElement;
+ const fullscreenChangeEvent = new Event('fullscreenchange');
+ document.dispatchEvent(fullscreenChangeEvent);
+ expect(renderer._isFullscreen).toBe(true);
+
+ // Test Safari
+ mockDocument.webkitFullscreenElement = document.documentElement;
+ const webkitFullscreenChangeEvent = new Event('webkitfullscreenchange');
+ document.dispatchEvent(webkitFullscreenChangeEvent);
+ expect(renderer._isFullscreen).toBe(true);
+
+ // Test Firefox
+ mockDocument.mozFullScreenElement = document.documentElement;
+ const mozFullscreenChangeEvent = new Event('mozfullscreenchange');
+ document.dispatchEvent(mozFullscreenChangeEvent);
+ expect(renderer._isFullscreen).toBe(true);
+
+ // Test exiting fullscreen for all browsers
+ mockDocument.fullscreenElement = null;
+ mockDocument.webkitFullscreenElement = null;
+ mockDocument.mozFullScreenElement = null;
+
+ document.dispatchEvent(fullscreenChangeEvent);
+ document.dispatchEvent(webkitFullscreenChangeEvent);
+ document.dispatchEvent(mozFullscreenChangeEvent);
+
+ expect(renderer._isFullscreen).toBe(false);
+ });
+
+ it('should handle programmatic fullscreen changes', () => {
+ // Enter fullscreen programmatically
+ renderer.setFullScreen(true);
+ expect(renderer.isFullScreen()).toBe(true);
+
+ // Exit fullscreen programmatically
+ renderer.setFullScreen(false);
+ expect(renderer.isFullScreen()).toBe(false);
+ });
+ });
+});
\ No newline at end of file
diff --git a/newIDE/app/src/__mocks__/gdjs.js b/newIDE/app/src/__mocks__/gdjs.js
new file mode 100644
index 000000000000..a18b6ef39f2a
--- /dev/null
+++ b/newIDE/app/src/__mocks__/gdjs.js
@@ -0,0 +1,17 @@
+const gdjs = {
+ Logger: class {
+ constructor(name) {
+ this.name = name;
+ }
+ error() {}
+ warn() {}
+ info() {}
+ },
+ evtTools: {
+ common: {
+ isMobile: () => false
+ }
+ }
+};
+
+module.exports = gdjs;
\ No newline at end of file
diff --git a/newIDE/app/src/__mocks__/runtimegame-pixi-renderer.js b/newIDE/app/src/__mocks__/runtimegame-pixi-renderer.js
new file mode 100644
index 000000000000..a56570861adb
--- /dev/null
+++ b/newIDE/app/src/__mocks__/runtimegame-pixi-renderer.js
@@ -0,0 +1,38 @@
+class RuntimeGamePixiRenderer {
+ constructor(game, forceFullscreen) {
+ this._game = game;
+ this._forceFullscreen = forceFullscreen;
+ this._isFullscreen = false;
+ this._setupFullscreenListeners();
+ }
+
+ _setupFullscreenListeners() {
+ document.addEventListener('fullscreenchange', this._onFullscreenChange.bind(this));
+ document.addEventListener('webkitfullscreenchange', this._onFullscreenChange.bind(this));
+ document.addEventListener('mozfullscreenchange', this._onFullscreenChange.bind(this));
+ }
+
+ _onFullscreenChange() {
+ this._isFullscreen = !!(
+ document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.mozFullScreenElement
+ );
+ }
+
+ isFullScreen() {
+ return this._isFullscreen;
+ }
+
+ setFullScreen(enable) {
+ this._isFullscreen = enable;
+ }
+
+ dispose() {
+ document.removeEventListener('fullscreenchange', this._onFullscreenChange);
+ document.removeEventListener('webkitfullscreenchange', this._onFullscreenChange);
+ document.removeEventListener('mozfullscreenchange', this._onFullscreenChange);
+ }
+}
+
+export { RuntimeGamePixiRenderer };
\ No newline at end of file