brick-engine-js 1.0.1

package/src/view/GameView.ts

@@ -0,0 +1,244 @@
+import p5 from 'p5';
+
+import configs from '../config/configs';
+
+import applyColors from './theme/applyColors';
+import dimensions from './theme/dimensions';
+
+import ButtonLayout from './components/layout/ButtonLayout';
+import ContainerLayout from './components/layout/ContainerLayout';
+import FrameLayout from './components/layout/FrameLayout';
+
+import BigButton from './components/ui/BigButton';
+import Button from './components/ui/Button';
+import Canvas from './components/ui/Canvas';
+import SmallButton from './components/ui/SmallButton';
+import { ControlKey } from '../core/types/enums';
+import { Control } from '../core/types/modules';
+import ControlInputHandler from '../core/helpers/ControlInputHandlerHelper';
+import Debugger from './Debugger';
+import { GameModules } from '../core/types/Types';
+import SessionModal from './SessionModal';
+
+// prettier-ignore
+/**
+ * Responsible for rendering the game body and handling control events.
+ *
+ * This class acts as the main view controller, orchestrating the layout,
+ * styles, and user interaction (clicks and holds) for the game.
+ *
+ * @class
+ */
+export default class GameView {
+    private _onOffBtn         : p5.Element;
+    private _startPauseBtn    : p5.Element;
+    private _soundBtn         : p5.Element;
+    private _resetBtn         : p5.Element;
+    private _exitBtn          : p5.Element;
+    private _enableColorBtn   : p5.Element;
+
+    private _upBtn            : p5.Element;
+    private _downBtn          : p5.Element;
+    private _rightBtn         : p5.Element;
+    private _leftBtn          : p5.Element;
+
+    private _actionBtn        : p5.Element;
+
+    private _parent           : HTMLElement;
+    private _p                : p5;
+    private _inputHandler     : ControlInputHandler;
+
+    private _cachedCanvas     : { canvas: p5.Element; canvasWidth: number; canvasHeight: number };
+
+    private _debugger         : Debugger;
+    private _sessionModal     : SessionModal;
+
+    /**
+     * Creates an instance of GameView.
+     *
+     * @param p - The p5 instance used for rendering and event handling.
+     * @param parent - The DOM element where the game view will be attached.
+     */
+    constructor(p: p5, parent: HTMLElement) {
+        this._parent = parent;
+        this._p = p;
+    }
+
+    /**
+     * Checks if the game body has been built.
+     * @returns True if the game body has been built, false otherwise.
+     */
+    isBodyBuilt() {
+        return this._cachedCanvas != null;
+    }
+
+    /**
+     * Builds the visual structure of the game.
+     *
+     * It initializes themes, layouts (frames, containers, buttons), and calculates responsive dimensions.
+     *
+     * @returns An object containing the canvas element and its explicit dimensions.
+     * - canvas: The p5 element for the canvas.
+     * - canvasWidth: The calculated width of the canvas.
+     * - canvasHeight: The calculated height of the canvas.
+     */
+    build() {
+
+        if(this._cachedCanvas) {
+            return this._cachedCanvas;
+        }
+
+        applyColors();
+
+        //Container
+        const { container, height, width } = ContainerLayout(this._p, this._parent);
+
+        //Frame
+        const frame = FrameLayout(this._p, container);
+
+        //Canvas
+        const { canvas, canvasHeight, canvasWidth } = Canvas(this._p, frame, width);
+
+        //Buttons
+        const {
+            largeButtonContainer,
+            smallButtonContainer,
+            directionHorizontalContainer,
+            directionVerticalContainer,
+        } = ButtonLayout(this._p, container);
+
+        //System buttons
+        this._onOffBtn        = SmallButton(this._p, smallButtonContainer    , 'On<br/>Off'        , true);
+        this._startPauseBtn   = SmallButton(this._p, smallButtonContainer    , 'Start<br/>Pause'   , false);
+        this._soundBtn        = SmallButton(this._p, smallButtonContainer    , 'Sound'             , true);
+        this._resetBtn        = SmallButton(this._p, smallButtonContainer    , 'Reset'             , false);
+        this._exitBtn         = SmallButton(this._p, smallButtonContainer    , 'Exit'              , true);
+        this._enableColorBtn  = SmallButton(this._p, smallButtonContainer    , 'Enable<br/>Colors' , false);
+
+        //Direction buttons
+        this._upBtn           = Button(this._p, directionVerticalContainer   , 'UP');
+        this._leftBtn         = Button(this._p, directionHorizontalContainer , 'LEFT');
+        this._downBtn         = Button(this._p, directionVerticalContainer   , 'DOWN');
+        this._rightBtn        = Button(this._p, directionHorizontalContainer , 'RIGHT');
+
+        //Action button
+        this._actionBtn       = BigButton(this._p, largeButtonContainer      , 'Action');
+
+        //Set dimensions
+        dimensions(width, height, canvasWidth, canvasHeight);
+
+        //Hide splash screen
+        this._hideSplash();
+
+        this._cachedCanvas = { canvas, canvasWidth, canvasHeight };
+        return this._cachedCanvas;
+    }
+
+    /**
+     * Sets up the session modal with the current game modules.
+     * @param gameModules - The game modules to be used in the session modal.
+     */
+    setupSessionModal() {
+        this._sessionModal = new SessionModal(this._p);
+        this._sessionModal.setup();
+    }
+
+    showSessionModal(onConfirm: () => void, onCancel: () => void) {
+        this._sessionModal.show(onConfirm, onCancel);
+    }
+
+    /**
+     * Sets up the debugger with the current game modules.
+     * @param gameModules - The game modules to be debugged.
+     */
+    setupDebugger(gameModules: GameModules) {
+        this._debugger = new Debugger(gameModules, this._p);
+        this._debugger.setup();
+    }
+
+    updateDebuggerGameModules(gameModules: GameModules) {
+        this._debugger.setGameModules(gameModules);
+    }
+
+    /**
+     * Updates the debugger with the current game state.
+     */
+    updateDebugger() {
+        this._debugger.update();
+    }
+
+    /**
+     * Binds game control events to the view buttons.
+     *
+     * Connects click and hold events from the UI buttons to the game logic controllers.
+     *
+     * @param control - The control module instance.
+     */
+    bindControls(control: Control) {
+        this._inputHandler = new ControlInputHandler(control);
+
+        //System buttons
+        this._bindButtonEvents(this._onOffBtn      , ControlKey.POWER);
+        this._bindButtonEvents(this._startPauseBtn , ControlKey.START_PAUSE);
+        this._bindButtonEvents(this._soundBtn      , ControlKey.SOUND);
+        this._bindButtonEvents(this._resetBtn      , ControlKey.RESET);
+        this._bindButtonEvents(this._exitBtn       , ControlKey.EXIT);
+        this._bindButtonEvents(this._enableColorBtn, ControlKey.COLOR);
+
+        //Direction buttons
+        this._bindButtonEvents(this._upBtn         , ControlKey.UP);
+        this._bindButtonEvents(this._downBtn       , ControlKey.DOWN);
+        this._bindButtonEvents(this._rightBtn      , ControlKey.RIGHT);
+        this._bindButtonEvents(this._leftBtn       , ControlKey.LEFT);
+
+        //Action button
+        this._bindButtonEvents(this._actionBtn     , ControlKey.ACTION);
+    }
+
+    /**
+     * Unbinds all events from the view buttons.
+     *
+     * Replaces all event listeners with empty functions to prevent interaction
+     * (e.g., when the game is paused or stopped).
+     */
+    unbindControls() {
+        this._onOffBtn      .mousePressed(() => {}).mouseReleased(() => {});
+        this._startPauseBtn .mousePressed(() => {}).mouseReleased(() => {});
+        this._soundBtn      .mousePressed(() => {}).mouseReleased(() => {});
+        this._resetBtn      .mousePressed(() => {}).mouseReleased(() => {});
+        this._exitBtn       .mousePressed(() => {}).mouseReleased(() => {});
+        this._enableColorBtn.mousePressed(() => {}).mouseReleased(() => {});
+
+        this._upBtn         .mousePressed(() => {}).mouseReleased(() => {});
+        this._downBtn       .mousePressed(() => {}).mouseReleased(() => {});
+        this._rightBtn      .mousePressed(() => {}).mouseReleased(() => {});
+        this._leftBtn       .mousePressed(() => {}).mouseReleased(() => {});
+
+        this._actionBtn     .mousePressed(() => {}).mouseReleased(() => {});
+    }
+
+    /**
+     * Helper method to bind press and release events using ControlInputHandler.
+     *
+     * @param btn - The p5 button element to bind.
+     * @param key - The control key to notify.
+     */
+    private _bindButtonEvents(btn: p5.Element, key: ControlKey) {
+        btn.mousePressed(() => this._inputHandler.handlePress(key));
+        btn.mouseReleased(() => this._inputHandler.handleRelease(key));
+        // Also handle mouseOut as release to prevent stuck keys if cursor leaves button
+        btn.mouseOut(() => this._inputHandler.handleRelease(key));
+    }
+
+    /**
+     * Helper method to hide the splash screen after a delay.
+     *
+     * @param delay - The delay in milliseconds (defaults to `configs.viewLayout.splashHideDelayMs`).
+     */
+    private _hideSplash(delay = configs.viewLayout.splashHideDelayMs) {
+        const splash: HTMLDivElement = document.querySelector(configs.selectors.splash);
+        setTimeout(() => {
+            splash.style.display = 'none';
+        }, delay);
+    }
+}

package/src/view/SessionModal.test.ts

@@ -0,0 +1,141 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type p5 from 'p5';
+import SessionModal from './SessionModal';
+
+describe('SessionModal', () => {
+    let modal: SessionModal;
+    let mockP5: Record<string, unknown>;
+    let mockContainer: Record<string, unknown>;
+    let mockConfirmButton: Record<string, unknown>;
+    let mockCancelButton: Record<string, unknown>;
+
+    beforeEach(() => {
+        // [ARRANGE]
+        mockContainer = {
+            parent: vi.fn(),
+            id: vi.fn(),
+            class: vi.fn(),
+            removeClass: vi.fn(),
+            addClass: vi.fn(),
+        };
+
+        mockConfirmButton = {
+            parent: vi.fn(),
+            class: vi.fn(),
+            mousePressed: vi.fn(),
+        };
+
+        mockCancelButton = {
+            parent: vi.fn(),
+            class: vi.fn(),
+            mousePressed: vi.fn(),
+        };
+
+        const mockGenericElement = {
+            parent: vi.fn(),
+            id: vi.fn(),
+            html: vi.fn(),
+        };
+
+        mockP5 = {
+            select: vi.fn().mockImplementation(() => {
+                return {};
+            }), // Mock body select
+            createDiv: vi.fn().mockImplementation(() => {
+                // If it's the first time, return the container mock
+                // Otherwise return a generic element mock
+                if ((mockP5.createDiv as import('vitest').Mock).mock.calls.length === 1) return mockContainer;
+                return mockGenericElement;
+            }),
+            createP: vi.fn().mockReturnValue(mockGenericElement),
+            createButton: vi.fn().mockImplementation((label: string) => {
+                if (label === 'Cancel') return mockCancelButton;
+                if (label === 'Confirm') return mockConfirmButton;
+                return mockGenericElement;
+            }),
+        };
+
+        modal = new SessionModal(mockP5 as unknown as p5);
+    });
+
+    describe('setup', () => {
+        it('should create the modal DOM elements and apply classes', () => {
+            // [ACT]
+            modal.setup();
+
+            // [ASSERT]
+            expect(mockP5.createDiv).toHaveBeenCalled();
+            expect(mockP5.createButton).toHaveBeenCalledWith('Cancel');
+            expect(mockP5.createButton).toHaveBeenCalledWith('Confirm');
+            expect(mockContainer.addClass).not.toHaveBeenCalled(); // Hidden class added in mock directly via class()
+            expect(mockContainer.class).toHaveBeenCalledWith('hidden');
+        });
+    });
+
+    describe('show', () => {
+        it('should bind the click events to the buttons and remove the hidden class', () => {
+            // [ARRANGE]
+            modal.setup();
+            const onConfirm = vi.fn();
+            const onCancel = vi.fn();
+
+            // [ACT]
+            modal.show(onConfirm, onCancel);
+
+            // [ASSERT]
+            expect(mockConfirmButton.mousePressed).toHaveBeenCalled();
+            expect(mockCancelButton.mousePressed).toHaveBeenCalled();
+            expect(mockContainer.removeClass).toHaveBeenCalledWith('hidden');
+        });
+
+        it('should trigger onConfirm and hide the modal when confirm button is clicked', () => {
+            // [ARRANGE]
+            modal.setup();
+            const onConfirm = vi.fn();
+            const onCancel = vi.fn();
+
+            // Extract the callback passed to mousePressed
+            let confirmCallback: () => void;
+            // @ts-expect-error Checking mock calls safely
+            mockConfirmButton.mousePressed.mockImplementation((cb: () => void) => {
+                if (cb) confirmCallback = cb;
+            });
+
+            modal.show(onConfirm, onCancel);
+
+            // [ACT]
+            confirmCallback!();
+
+            // [ASSERT]
+            expect(onConfirm).toHaveBeenCalled();
+            expect(mockContainer.addClass).toHaveBeenCalledWith('hidden');
+        });
+
+        it('should trigger onCancel and hide the modal when cancel button is clicked', () => {
+            // [ARRANGE]
+            modal.setup();
+            const onConfirm = vi.fn();
+            const onCancel = vi.fn();
+
+            // Extract the callback passed to mousePressed
+            let cancelCallback: () => void;
+            // @ts-expect-error Checking mock calls safely
+            mockCancelButton.mousePressed.mockImplementation((cb: () => void) => {
+                if (cb) cancelCallback = cb;
+            });
+
+            modal.show(onConfirm, onCancel);
+
+            // [ACT]
+            cancelCallback!();
+
+            // [ASSERT]
+            expect(onCancel).toHaveBeenCalled();
+            expect(mockContainer.addClass).toHaveBeenCalledWith('hidden');
+        });
+    });
+});

package/src/view/SessionModal.ts

@@ -0,0 +1,73 @@
+import { Initializable } from '../core/types/Interfaces';
+import p5 from 'p5';
+
+export default class SessionModal implements Initializable {
+    private _p: p5;
+
+    private _container: p5.Element;
+    private _confirmButton: p5.Element;
+    private _cancelButton: p5.Element;
+
+    constructor(p: p5) {
+        this._p = p;
+    }
+
+    setup() {
+        this._container = this._p.createDiv();
+        this._container.parent(this._p.select('body'));
+        this._container.id('modal-background');
+        this._container.class('hidden');
+
+        const modal = this._p.createDiv();
+        modal.parent(this._container);
+        modal.id('session-modal');
+
+        const frame = this._p.createDiv();
+        frame.parent(modal);
+        frame.id('session-modal-frame');
+
+        const title = this._p.createP();
+        title.parent(frame);
+        title.html('Brick Engine Session');
+
+        const screen = this._p.createDiv();
+        screen.parent(frame);
+        screen.id('session-modal-screen');
+
+        const screenText = this._p.createP();
+        screenText.parent(screen);
+        screenText.html('<span>Looks like you have an active session.</span><br><br>Do you want to continue?');
+
+        const buttonsContainer = this._p.createDiv();
+        buttonsContainer.parent(modal);
+        buttonsContainer.id('session-modal-buttons');
+
+        this._cancelButton = this._p.createButton('Cancel');
+        this._cancelButton.parent(buttonsContainer);
+        this._cancelButton.class('session-modal-button');
+
+        this._confirmButton = this._p.createButton('Confirm');
+        this._confirmButton.parent(buttonsContainer);
+        this._confirmButton.class('session-modal-button');
+    }
+
+    show(onConfirm: () => void, onCancel: () => void) {
+        this._confirmButton.mousePressed(() => {
+            onConfirm();
+            this._hide();
+        });
+        this._cancelButton.mousePressed(() => {
+            onCancel();
+            this._hide();
+        });
+
+        this._container.removeClass('hidden');
+    }
+
+    private _hide() {
+        this._confirmButton.mousePressed(null);
+        this._cancelButton.mousePressed(null);
+
+        this._container.addClass('hidden');
+    }
+}

package/src/view/components/layout/ButtonLayout.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from 'vitest';
+import type p5 from 'p5';
+import ButtonLayout from './ButtonLayout';
+
+describe('ButtonLayout', () => {
+    it('should create a hierarchy of containers with correct IDs', () => {
+        // [ARRANGE]
+        const mockElement = {
+            parent: vi.fn(),
+            id: vi.fn(),
+        };
+        const mockP5 = {
+            createDiv: vi.fn().mockReturnValue(mockElement),
+        } as unknown as p5;
+        const mockContainer = {} as p5.Element;
+
+        // [ACT]
+        const result = ButtonLayout(mockP5, mockContainer);
+
+        // [ASSERT]
+        expect(mockP5.createDiv).toHaveBeenCalledTimes(7); // buttonContainer, small, inner, medium, vertical, horizontal, large
+        expect(mockElement.id).toHaveBeenCalledWith('button-container');
+        expect(mockElement.id).toHaveBeenCalledWith('small-button-container');
+        expect(mockElement.id).toHaveBeenCalledWith('large-button-container');
+        expect(result.smallButtonContainer).toBe(mockElement);
+        expect(result.largeButtonContainer).toBe(mockElement);
+    });
+});

package/src/view/components/layout/ButtonLayout.ts

@@ -0,0 +1,63 @@
+import p5 from 'p5';
+import configs from '../../../config/configs';
+
+interface ButtonLayoutResponse {
+    smallButtonContainer: p5.Element;
+    mediumButtonContainer: p5.Element;
+    largeButtonContainer: p5.Element;
+    directionVerticalContainer: p5.Element;
+    directionHorizontalContainer: p5.Element;
+}
+
+/**
+ * Creates and organizes the layout containers for game control buttons.
+ *
+ * It constructs a hierarchy of div elements to separate small system buttons,
+ * inner group buttons, and directional pads.
+ *
+ * @param {p5} p - The p5 instance.
+ * @param {p5.Element} container - The parent container element.
+ * @returns {ButtonLayoutResponse} Object containing the button containers.
+ *  - smallButtonContainer: For system buttons (Reset, Sound, etc.), uses `configs.selectors.viewElementIds.smallButtonContainer`.
+ *  - mediumButtonContainer: For direction controls, uses `configs.selectors.viewElementIds.mediumButtonContainer`.
+ *  - largeButtonContainer: For the main action button, uses `configs.selectors.viewElementIds.largeButtonContainer`.
+ *  - directionVerticalContainer: For Up/Down buttons.
+ *  - directionHorizontalContainer: For Left/Right buttons.
+ */
+export default function ButtonLayout(p: p5, container: p5.Element): ButtonLayoutResponse {
+    const buttonContainer = p.createDiv();
+    buttonContainer.parent(container);
+    buttonContainer.id(configs.selectors.viewElementIds.buttonContainer);
+
+    const smallButtonContainer = p.createDiv();
+    smallButtonContainer.parent(buttonContainer);
+    smallButtonContainer.id(configs.selectors.viewElementIds.smallButtonContainer);
+
+    const innerButtonContainer = p.createDiv();
+    innerButtonContainer.parent(buttonContainer);
+    innerButtonContainer.id(configs.selectors.viewElementIds.innerButtonContainer);
+
+    const mediumButtonContainer = p.createDiv();
+    mediumButtonContainer.parent(innerButtonContainer);
+    mediumButtonContainer.id(configs.selectors.viewElementIds.mediumButtonContainer);
+
+    const directionVerticalContainer = p.createDiv();
+    directionVerticalContainer.parent(mediumButtonContainer);
+    directionVerticalContainer.id(configs.selectors.viewElementIds.directionVerticalContainer);
+
+    const directionHorizontalContainer = p.createDiv();
+    directionHorizontalContainer.parent(mediumButtonContainer);
+    directionHorizontalContainer.id(configs.selectors.viewElementIds.directionHorizontalContainer);
+
+    const largeButtonContainer = p.createDiv();
+    largeButtonContainer.parent(innerButtonContainer);
+    largeButtonContainer.id(configs.selectors.viewElementIds.largeButtonContainer);
+
+    return {
+        smallButtonContainer,
+        mediumButtonContainer,
+        largeButtonContainer,
+        directionVerticalContainer,
+        directionHorizontalContainer,
+    };
+}

package/src/view/components/layout/ContainerLayout.test.ts

@@ -0,0 +1,48 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi } from 'vitest';
+import type p5 from 'p5';
+import ContainerLayout from './ContainerLayout';
+
+describe('ContainerLayout', () => {
+    it('should calculate dimensions for mobile breakpoint', () => {
+        // [ARRANGE]
+        const mockElement = { parent: vi.fn(), id: vi.fn() };
+        const mockP5 = { createDiv: vi.fn().mockReturnValue(mockElement) } as unknown as p5;
+        const mockParent = {
+            clientWidth: 500, // Mobile < 600
+            clientHeight: 900,
+        } as unknown as HTMLElement;
+
+        // [ACT]
+        const result = ContainerLayout(mockP5, mockParent);
+
+        // [ASSERT]
+        expect(result.width).toBe(500);
+        expect(result.height).toBe(900);
+        expect(mockElement.id).toHaveBeenCalledWith('container');
+    });
+
+    it('should calculate dimensions for desktop with vertical limit', () => {
+        // [ARRANGE]
+        const mockElement = { parent: vi.fn(), id: vi.fn() };
+        const mockP5 = { createDiv: vi.fn().mockReturnValue(mockElement) } as unknown as p5;
+
+        // desktop
+        const mockParent = {
+            clientWidth: 1200,
+            clientHeight: 1000,
+        } as unknown as HTMLElement;
+
+        // Multiplier is 1.9 in configs
+        // maxHeightWidth = 1000 / (1.9 * 1.05) ≈ 501.25
+        // width = min(1200, 501.25) ≈ 501.25
+        // height = 501.25 * 1.9 ≈ 952.38
+
+        // [ACT]
+        const result = ContainerLayout(mockP5, mockParent);
+
+        // [ASSERT]
+        expect(result.width).toBeLessThan(600); // Because vertical limit is tight
+        expect(result.height).toBeCloseTo(result.width * 1.9);
+    });
+});

package/src/view/components/layout/ContainerLayout.ts

@@ -0,0 +1,50 @@
+import p5 from 'p5';
+import configs from '../../../config/configs';
+
+/**
+ * Response object containing container dimensions and element reference.
+ */
+interface ContainerResponse {
+    width: number;
+    height: number;
+    container: p5.Element;
+}
+
+/**
+ * Creates the main game container and calculates its optimal dimensions.
+ *
+ * It ensures the game container fits within the parent element (usually the window or a specific div)
+ * while maintaining a fixed aspect ratio defined by `configs.viewLayout.bodyHeightWidthMultiplier`.
+ * On smaller screens (<= configs.viewLayout.mobileBreakpoint width), it attempts to fill the parent width.
+ * On larger screens, it calculates the maximum dimensions that fit without overflowing vertically.
+ *
+ * @param {p5} p - The p5 instance.
+ * @param {HTMLElement} parent - The DOM element where the container will be appended.
+ * @returns {ContainerResponse} Object containing the container element and its calculated width/height.
+ */
+export default function ContainerLayout(p: p5, parent: HTMLElement): ContainerResponse {
+    const container = p.createDiv();
+    container.parent(configs.selectors.parent);
+    container.id(configs.selectors.viewElementIds.container);
+
+    let width: number;
+    let height: number;
+
+    if (parent.clientWidth <= configs.viewLayout.mobileBreakpoint) {
+        width = parent.clientWidth;
+        height = parent.clientHeight;
+
+        return { container, width, height };
+    }
+
+    // Calcula a largura máxima baseada na altura disponível
+    const maxHeightWidth = parent.clientHeight / (configs.viewLayout.bodyHeightWidthMultiplier * 1.05);
+
+    // A largura final é o menor valor entre a largura disponível e a largura limitada pela altura
+    width = Math.min(parent.clientWidth, maxHeightWidth);
+
+    // A altura é calculada com base na proporção original
+    height = width * configs.viewLayout.bodyHeightWidthMultiplier;
+
+    return { container, width, height };
+}

package/src/view/components/layout/FrameLayout.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect, vi } from 'vitest';
+import type p5 from 'p5';
+import FrameLayout from './FrameLayout';
+
+describe('FrameLayout', () => {
+    it('should create a frame with branding text', () => {
+        // [ARRANGE]
+        const mockElement = { parent: vi.fn(), id: vi.fn() };
+        const mockP5 = {
+            createDiv: vi.fn().mockReturnValue(mockElement),
+            createP: vi.fn().mockReturnValue(mockElement),
+        } as unknown as p5;
+        const mockContainer = {} as p5.Element;
+
+        // [ACT]
+        const result = FrameLayout(mockP5, mockContainer);
+
+        // [ASSERT]
+        expect(mockP5.createDiv).toHaveBeenCalledTimes(2);
+        expect(mockP5.createP).toHaveBeenCalledWith('Brick Game');
+        expect(mockElement.id).toHaveBeenCalledWith('frame');
+        expect(result).toBe(mockElement);
+    });
+});