brick-engine-js 1.0.1

package/src/menu/manager/GameManager.test.ts

@@ -0,0 +1,68 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import GameManager from './GameManager';
+import Game from '../../core/Game';
+import p5 from 'p5';
+
+describe('GameManager', () => {
+    let manager: GameManager;
+    let mockGame: Record<string, unknown>;
+
+    beforeEach(() => {
+        document.head.innerHTML = '';
+        manager = new GameManager();
+        mockGame = {
+            p: {} as p5,
+            view: {},
+            switchGame: vi.fn(),
+        };
+    });
+
+    afterEach(() => {
+        delete (window as unknown as Record<string, unknown>).BrickEngineGame;
+    });
+
+    it('should load script and switch game', async () => {
+        // [ARRANGE]
+        const entry = { id: 'test-game', name: 'TestGame', url: 'http://example.com/test.js' };
+
+        // Mocking script loading behavior
+        const appendSpy = vi.spyOn(document.head, 'appendChild').mockImplementation(((el: HTMLScriptElement) => {
+            // Simulate script load success
+            setTimeout(() => {
+                (window as unknown as Record<string, unknown>).BrickEngineGame = vi.fn().mockImplementation(function () {
+                    return {};
+                });
+                if (el.onload) el.onload(new Event('load'));
+            }, 0);
+            return el;
+        }) as unknown as <T extends Node>(node: T) => T);
+
+        // [ACT]
+        await manager.handleGameSwitch(entry, mockGame as unknown as Game);
+
+        // [ASSERT]
+        expect(appendSpy).toHaveBeenCalled();
+        expect(mockGame.switchGame).toHaveBeenCalled();
+        expect((window as unknown as Record<string, unknown>).BrickEngineGame).toBeUndefined(); // Should be deleted after switch
+    });
+
+    it('should handle script load failure', async () => {
+        // [ARRANGE]
+        const entry = { id: 'fail-game', name: 'FailGame', url: 'http://example.com/fail.js' };
+        vi.spyOn(document.head, 'appendChild').mockImplementation(((el: HTMLScriptElement) => {
+            setTimeout(() => {
+                if (el.onerror) el.onerror(new Event('error'));
+            }, 0);
+            return el;
+        }) as unknown as <T extends Node>(node: T) => T);
+
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+        // [ACT]
+        await manager.handleGameSwitch(entry, mockGame as unknown as Game);
+
+        // [ASSERT]
+        expect(consoleSpy).toHaveBeenCalledWith('Failed to load game:', expect.any(Error));
+    });
+});

package/src/menu/manager/GameManager.ts

@@ -0,0 +1,50 @@
+import Game from '../../core/Game';
+import { GameEntry } from '../../types/interfaces';
+
+export default class GameManager {
+    public async handleGameSwitch(entry: GameEntry, actualGame: Game) {
+        try {
+            await this._loadGameScript(entry.url);
+
+            // Client must define window.BrickEngineGame
+            console.log('Game instance defined on window.BrickEngineGame by client project: ', window.BrickEngineGame);
+
+            if (window.BrickEngineGame) {
+                const gameInstance = new window.BrickEngineGame(actualGame.p, actualGame.view);
+                console.log('Game loaded: ', entry.name);
+                console.log('Game loaded: ', entry.name);
+
+                // Set properly the Game ID using the GameRepository fetch ID
+                gameInstance.gameId = entry.id;
+
+                console.log('Switching to game');
+                actualGame.switchGame(gameInstance);
+
+                console.log('Game switched');
+                // Cleanup
+                console.log('Cleaning up window.BrickEngineGame');
+                delete window.BrickEngineGame;
+            } else {
+                console.error('Game bundle loaded but window.BrickEngineGame was not set.');
+            }
+        } catch (e) {
+            console.error('Failed to load game:', e);
+        }
+    }
+
+    private _loadGameScript(url: string): Promise<void> {
+        return new Promise((resolve, reject) => {
+            const existingScript = document.getElementById('game-client-script');
+            if (existingScript) {
+                existingScript.remove();
+            }
+
+            const script = document.createElement('script');
+            script.src = url;
+            script.id = 'game-client-script';
+            script.onload = () => resolve();
+            script.onerror = () => reject(new Error(`Failed to load script ${url}`));
+            document.head.appendChild(script);
+        });
+    }
+}

package/src/types/global.d.ts

@@ -0,0 +1,8 @@
+import Game from '../core/Game';
+import p5 from 'p5';
+
+declare global {
+    interface Window {
+        BrickEngineGame?: new (p: p5, view: GameView) => Game;
+    }
+}

package/src/types/interfaces.ts

@@ -0,0 +1,5 @@
+export interface GameEntry {
+    id: string;
+    name: string;
+    url: string;
+}

package/src/view/Debugger.test.ts

@@ -0,0 +1,152 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi, beforeEach, Mock } from 'vitest';
+import Debugger from './Debugger';
+import type p5 from 'p5';
+import configs from '../config/configs';
+import { GameModules } from '../core/types/Types';
+
+// Mock configs
+vi.mock('../config/configs', () => ({
+    default: {
+        game: {
+            debugger: {
+                enabled: true,
+                msInterval: 1000,
+            },
+        },
+    },
+}));
+
+describe('Debugger', () => {
+    let mockP5: Record<string, Mock>;
+    let mockGameModules: Record<string, unknown>;
+    let debuggerInstance: Debugger;
+
+    beforeEach(() => {
+        // [ARRANGE]
+        mockP5 = {
+            createElement: vi.fn().mockImplementation(() => ({
+                id: vi.fn().mockReturnThis(),
+                parent: vi.fn().mockReturnThis(),
+                class: vi.fn().mockReturnThis(),
+                html: vi.fn().mockReturnThis(),
+                attribute: vi.fn().mockReturnThis(),
+                mouseClicked: vi.fn().mockReturnThis(),
+                toggleClass: vi.fn().mockReturnThis(),
+                remove: vi.fn().mockReturnThis(),
+                elt: { hasAttribute: vi.fn().mockReturnValue(false) },
+            })),
+            select: vi.fn().mockReturnValue(null), // By default, no existing elements
+            selectAll: vi.fn().mockReturnValue([]),
+        } as unknown as Record<string, Mock>;
+
+        mockGameModules = {
+            state: {
+                getDebugData: vi.fn().mockReturnValue({ on: true }),
+            },
+            control: {
+                getDebugData: vi.fn().mockReturnValue({ lastKey: 'UP' }),
+            },
+        };
+
+        debuggerInstance = new Debugger(mockGameModules as unknown as GameModules, mockP5 as unknown as p5);
+    });
+
+    it('should setup DOM elements when enabled', () => {
+        // [ACT]
+        debuggerInstance.setup();
+
+        // [ASSERT]
+        expect(mockP5.createElement).toHaveBeenCalledWith('details');
+        expect(mockP5.createElement).toHaveBeenCalledWith('summary');
+        expect((mockGameModules.state as { getDebugData: Mock }).getDebugData).toHaveBeenCalled();
+        expect((mockGameModules.control as { getDebugData: Mock }).getDebugData).toHaveBeenCalled();
+    });
+
+    it('should not setup DOM elements if debugger is disabled', () => {
+        // [ARRANGE]
+        // @ts-expect-error - testing configuration override
+        configs.game.debugger.enabled = false;
+
+        // [ACT]
+        debuggerInstance.setup();
+
+        // [ASSERT]
+        expect(mockP5.createElement).not.toHaveBeenCalled();
+
+        // Restore for other tests
+        // @ts-expect-error - testing configuration override
+        configs.game.debugger.enabled = true;
+    });
+
+    it('should set game modules and preserve open states of details tabs', () => {
+        // [ARRANGE]
+
+        // Mock the presence of an existing open #debugger details
+        const existingDetails = {
+            elt: { hasAttribute: vi.fn().mockImplementation(attr => attr === 'open') },
+            remove: vi.fn(),
+        };
+
+        // Mock an open module details element
+        const openModuleDetails = {
+            id: vi.fn().mockReturnValue('debugger-state'),
+            elt: { hasAttribute: vi.fn().mockImplementation(attr => attr === 'open') },
+        };
+
+        mockP5.select.mockImplementation((selector: string) => {
+            if (selector === '#debugger') return existingDetails;
+            return { elt: { hasAttribute: () => false } };
+        });
+
+        mockP5.selectAll.mockImplementation((selector: string) => {
+            if (selector === '.debugger-module') return [openModuleDetails];
+            return [];
+        });
+
+        const newGameModules = {
+            state: { getDebugData: vi.fn().mockReturnValue({ on: false }) },
+            grid: { getDebugData: vi.fn().mockReturnValue({ width: 10 }) },
+        };
+
+        // Track how attributes are applied to elements being created
+        const createSpy = vi.spyOn(mockP5, 'createElement');
+
+        // [ACT]
+        debuggerInstance.setGameModules(newGameModules as unknown as GameModules);
+
+        // [ASSERT]
+        expect(existingDetails.remove).toHaveBeenCalled();
+
+        // Ensure new 'details' element was set to 'open' because wasOpen was true
+        // And 'debugger-state' module also got 'open' attribute
+
+        // Find created elements matching the details container
+        const detailsInvocations = createSpy.mock.results.filter(r => r.value.id.mock.calls.some((c: unknown[]) => c[0] === 'debugger'));
+        expect(detailsInvocations.length).toBeGreaterThan(0);
+        expect(detailsInvocations[0].value.attribute).toHaveBeenCalledWith('open', '');
+
+        // Find module elements matching 'debugger-state'
+        const stateModuleInvocations = createSpy.mock.results.filter(r => r.value.id.mock.calls.some((c: unknown[]) => c[0] === 'debugger-state'));
+        expect(stateModuleInvocations.length).toBeGreaterThan(0);
+        expect(stateModuleInvocations[0].value.attribute).toHaveBeenCalledWith('open', '');
+    });
+
+    it('should update debugger values', () => {
+        // [ARRANGE]
+        debuggerInstance.setup();
+
+        // Change mock implementation to simulate updated state
+        (mockGameModules.state as { getDebugData: Mock }).getDebugData.mockReturnValue({ on: false });
+
+        // [ACT]
+        debuggerInstance.update();
+
+        // [ASSERT]
+        // the mock elements returned by createElement have a `html` spy
+        // Let's verify that the html spy was called with 'false' (the updated value)
+        const allHtmlCalls = mockP5.createElement.mock.results.map(res => res.value.html.mock.calls).flat(1);
+
+        expect(allHtmlCalls).toContainEqual(['false']);
+    });
+});

package/src/view/Debugger.ts

@@ -0,0 +1,124 @@
+import p5 from 'p5';
+import { Debuggable, Initializable } from '../core/types/Interfaces';
+import { GameModules } from '../core/types/Types';
+import configs from '../config/configs';
+
+type DebuggerModule = {
+    module: Debuggable;
+    properties: DebuggerProperty[];
+};
+
+type DebuggerProperty = {
+    key: string;
+    element: p5.Element;
+};
+
+export default class NewDebugger implements Initializable {
+    private _p: p5;
+    private _gameModules: GameModules;
+
+    private _moduleElements: DebuggerModule[] = [];
+
+    constructor(gameModules: GameModules, p: p5) {
+        this._gameModules = gameModules;
+        this._p = p;
+    }
+
+    setup() {
+        if (!configs.game.debugger.enabled) return;
+
+        const existingDetails = this._p.select('#debugger');
+        const wasOpen = existingDetails ? existingDetails.elt.hasAttribute('open') : false;
+        const openModules = new Set<string>();
+
+        if (existingDetails) {
+            const modules = this._p.selectAll('.debugger-module');
+            modules.forEach(module => {
+                if (module.elt.hasAttribute('open')) {
+                    openModules.add(module.id());
+                }
+            });
+            existingDetails.remove();
+        }
+
+        this._moduleElements = [];
+
+        const details = this._p.createElement('details');
+        details.id('debugger');
+        if (wasOpen) details.attribute('open', '');
+        details.parent(this._p.select('body'));
+
+        const summary = this._p.createElement('summary');
+        summary.id('debugger-summary');
+        summary.html('Debug');
+        summary.parent(details);
+
+        Object.entries(this._gameModules).forEach(([name, module]) => {
+            if ('getDebugData' in module) {
+                const moduleProperty: DebuggerModule = {
+                    module: module as Debuggable,
+                    properties: [],
+                };
+
+                const moduleDetails = this._p.createElement('details');
+                moduleDetails.class('debugger-module');
+                moduleDetails.id(`debugger-${name}`);
+                if (openModules.has(`debugger-${name}`)) {
+                    moduleDetails.attribute('open', '');
+                }
+                moduleDetails.parent(details);
+
+                const moduleSummary = this._p.createElement('summary');
+                moduleSummary.id(`debugger-${name}-summary`);
+                moduleSummary.html(name);
+                moduleSummary.class('debugger-module-summary');
+                moduleSummary.parent(moduleDetails);
+
+                const moduleData = (module as unknown as Debuggable).getDebugData();
+
+                Object.entries(moduleData).forEach(([key, value]) => {
+                    const dataElement = this._p.createElement('div');
+                    dataElement.class('debugger-container');
+                    dataElement.id(`debugger-container-${key}-${value}`);
+                    dataElement.parent(moduleDetails);
+
+                    dataElement.mouseClicked(() => {
+                        dataElement.toggleClass('highlight');
+                    });
+
+                    const dataKeyElement = this._p.createElement('p');
+                    dataKeyElement.id(`debugger-${key}-${value}`);
+                    dataKeyElement.html(`${key}:`);
+                    dataKeyElement.parent(dataElement);
+
+                    const dataValueElement = this._p.createElement('span');
+                    dataValueElement.id(`debugger-${key}-${value}-value`);
+                    dataValueElement.html(`${value}`);
+                    dataValueElement.parent(dataElement);
+
+                    moduleProperty.properties.push({
+                        key,
+                        element: dataValueElement,
+                    });
+                });
+
+                this._moduleElements.push(moduleProperty);
+            }
+        });
+    }
+
+    setGameModules(gameModules: GameModules) {
+        this._gameModules = gameModules;
+        this.setup();
+    }
+
+    update() {
+        this._moduleElements.forEach(moduleProperty => {
+            const data = moduleProperty.module.getDebugData();
+
+            moduleProperty.properties.forEach(property => {
+                property.element.html(`${data[property.key]}`);
+            });
+        });
+    }
+}

package/src/view/GameView.test.ts

@@ -0,0 +1,95 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi, beforeEach, Mock } from 'vitest';
+import GameView from './GameView';
+import type p5 from 'p5';
+import { ControlKey } from '../core/types/enums';
+import { Control } from '../core/types/modules';
+
+const { createMockButton } = vi.hoisted(() => ({
+    createMockButton: () => ({
+        mousePressed: vi.fn().mockReturnThis(),
+        mouseReleased: vi.fn().mockReturnThis(),
+        mouseOut: vi.fn().mockReturnThis(),
+    }),
+}));
+
+// Mock sub-components/layouts
+vi.mock('./theme/applyColors', () => ({ default: vi.fn() }));
+vi.mock('./theme/dimensions', () => ({ default: vi.fn() }));
+vi.mock('./components/layout/ButtonLayout', () => ({
+    default: vi.fn().mockReturnValue({
+        largeButtonContainer: {},
+        smallButtonContainer: {},
+        directionHorizontalContainer: {},
+        directionVerticalContainer: {},
+    }),
+}));
+vi.mock('./components/layout/ContainerLayout', () => ({
+    default: vi.fn().mockReturnValue({ container: {}, height: 800, width: 400 }),
+}));
+vi.mock('./components/layout/FrameLayout', () => ({ default: vi.fn() }));
+vi.mock('./components/ui/BigButton', () => ({ default: vi.fn().mockImplementation(createMockButton) }));
+vi.mock('./components/ui/Button', () => ({ default: vi.fn().mockImplementation(createMockButton) }));
+vi.mock('./components/ui/Canvas', () => ({
+    default: vi.fn().mockReturnValue({ canvas: {}, canvasHeight: 500, canvasWidth: 400 }),
+}));
+vi.mock('./components/ui/SmallButton', () => ({ default: vi.fn().mockImplementation(createMockButton) }));
+
+describe('GameView', () => {
+    let gameView: GameView;
+    let mockP5: Record<string, unknown>;
+    let parent: HTMLElement;
+
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="splash"></div>';
+        parent = document.body;
+        mockP5 = {};
+        gameView = new GameView(mockP5 as unknown as p5, parent);
+    });
+
+    it('should build the game body', () => {
+        // [ACT]
+        const result = gameView.build();
+
+        // [ASSERT]
+        expect(result.canvasWidth).toBe(400);
+        expect(gameView.isBodyBuilt()).toBe(true);
+    });
+
+    it('should bind controls to buttons', () => {
+        // [ARRANGE]
+        gameView.build();
+        const mockControl = { notify: vi.fn() };
+
+        // [ACT]
+        gameView.bindControls(mockControl as unknown as Control);
+
+        // Accessing private buttons for check
+        // @ts-expect-error - testing private property
+        const actionBtn = gameView._actionBtn;
+        expect(actionBtn.mousePressed).toHaveBeenCalled();
+
+        // Trigger a click simulation
+        const pressHandler = (actionBtn.mousePressed as unknown as Mock).mock.calls[0][0];
+        pressHandler();
+
+        expect(mockControl.notify).toHaveBeenCalledWith(ControlKey.ACTION, expect.anything());
+    });
+
+    it('should unbind controls', () => {
+        // [ARRANGE]
+        gameView.build();
+        gameView.bindControls({ notify: vi.fn() } as unknown as Control);
+
+        // @ts-expect-error - testing private property
+        const actionBtn = gameView._actionBtn;
+        const initialCalls = (actionBtn.mousePressed as unknown as Mock).mock.calls.length;
+
+        // [ACT]
+        gameView.unbindControls();
+
+        // [ASSERT]
+        // Should have been called again to override with empty func
+        expect(actionBtn.mousePressed).toHaveBeenCalledTimes(initialCalls + 1);
+    });
+});