brick-engine-js 1.0.1

package/src/core/module/renderer/DisplayRenderer.ts

@@ -0,0 +1,152 @@
+import p5 from 'p5';
+
+import configs from '../../../config/configs';
+import { Color } from '../../types/enums';
+import { Cell, GameModules, RendererMetrics } from '../../types/Types';
+import { Renderer, State } from '../../types/modules';
+import RelativeValuesHelper from '../../helpers/RelativeValuesHelper';
+
+/**
+ * Responsible for rendering the main game field (the grid where the game is played).
+ * Handles cell rendering, background drawing, and optimizes static elements using an off-screen buffer.
+ */
+export default class DisplayRenderer implements Renderer {
+    private _p: p5;
+
+    private _rendererMetrics: RendererMetrics;
+
+    // Pre-calculated cell geometry
+    private _cellPreCalculatedGeometry: {
+        innerOffset: number;
+        innerSize: number;
+        paddingOffset: number;
+        paddingSize: number;
+        strokeWeight: number;
+    };
+
+    // Static graphics buffer for optimized rendering
+    private _staticGraphics: p5.Graphics;
+
+    /**
+     * Creates an instance of the DisplayRenderer.
+     *
+     * @param {p5} p - The p5 instance.
+     */
+    constructor(p: p5) {
+        this._p = p;
+    }
+
+    /**
+     * Initializes the renderer with the calculated metrics.
+     * Pre-calculates cell geometry for faster rendering.
+     *
+     * @param {RendererMetrics} rendererMetrics - The shared renderer metrics.
+     */
+    setup(rendererMetrics: RendererMetrics) {
+        this._rendererMetrics = rendererMetrics;
+        const { margin: cellMargin, padding: cellPadding, strokeWeight: cellStrokeWeight } = configs.screenLayout.cell;
+
+        // Use pre-calculated cell size
+        const cellSize = this._rendererMetrics.cell.size;
+
+        // 3. Pre-calculate localized cell geometry (relative to cell 0,0)
+        this._cellPreCalculatedGeometry = {
+            innerOffset: cellMargin * cellSize,
+            innerSize: cellSize - cellMargin * cellSize * 2,
+            paddingOffset: cellPadding * cellSize,
+            paddingSize: cellSize - cellPadding * cellSize * 2,
+            strokeWeight: cellStrokeWeight * cellSize,
+        };
+
+        // Initialize static graphics buffer and render static elements
+        this._renderStaticElements();
+    }
+
+    /**
+     * Renders the game grid.
+     * Draws the static background first, then iterates over the grid to draw cells.
+     *
+     * @param {Cell[][]} grid - The current grid state.
+     */
+    render(grid: Cell[][], modules: GameModules) {
+        this._p.push();
+
+        this._p.image(this._staticGraphics, 0, 0);
+        this.renderGrid(grid, modules.state);
+
+        this._p.pop();
+    }
+
+    /**
+     * Renders static elements (background and borders) to an off-screen buffer.
+     * This improves performance by avoiding re-drawing static shapes every frame.
+     */
+    private _renderStaticElements() {
+        const { borderWeight } = configs.screenLayout.display;
+
+        this._staticGraphics = this._p.createGraphics(this._p.width, this._p.height);
+
+        this._staticGraphics.background(configs.colors.background);
+
+        this._staticGraphics.strokeWeight(RelativeValuesHelper.getRelativeWidth(this._p, borderWeight));
+        this._staticGraphics.noFill();
+        this._staticGraphics.stroke(configs.colors.active);
+        this._staticGraphics.rect(
+            this._rendererMetrics.display.origin.x,
+            this._rendererMetrics.display.origin.y,
+            this._rendererMetrics.display.width,
+            this._rendererMetrics.display.height,
+        );
+    }
+
+    /**
+     * Renders a single brick at grid coordinates.
+     * Uses translation matrices to keep drawing logic clean.
+     *
+     * @param {Cell} cell - The cell data to render.
+     */
+    protected renderCell({ coordinate, color, value }: Cell, state: State) {
+        const { x, y } = coordinate;
+        const { innerOffset, innerSize, paddingOffset, paddingSize, strokeWeight } = this._cellPreCalculatedGeometry;
+
+        if (value === 0 || (!state.isPlaying() && !state.isPaused())) {
+            color = Color.INACTIVE;
+        } else {
+            color = state.isColorEnabled() ? color : Color.DEFAULT;
+        }
+
+        this._p.push();
+
+        // Move to the specific cell position
+        this._p.translate(
+            this._rendererMetrics.display.origin.x + x * this._rendererMetrics.cell.size,
+            this._rendererMetrics.display.origin.y + y * this._rendererMetrics.cell.size,
+        );
+
+        this._p.strokeWeight(strokeWeight);
+        this._p.stroke(color);
+
+        // Outer Box
+        this._p.noFill();
+        this._p.rect(innerOffset, innerOffset, innerSize, innerSize);
+
+        // Inner Fill
+        this._p.fill(color);
+        this._p.rect(paddingOffset, paddingOffset, paddingSize, paddingSize);
+
+        this._p.pop();
+    }
+
+    /**
+     * Iterates through the grid and renders each cell.
+     *
+     * @param {Cell[][]} grid - The grid to render.
+     */
+    protected renderGrid(grid: Cell[][], state: State) {
+        grid.forEach(row => {
+            row.forEach(cell => {
+                this.renderCell(cell, state);
+            });
+        });
+    }
+}

package/src/core/module/renderer/GameRenderer.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type p5 from 'p5';
+import GameRenderer from './GameRenderer';
+import { Renderer } from '../../types/modules';
+import { Cell, GameModules } from '../../types/Types';
+
+describe('GameRenderer', () => {
+    let gameRenderer: GameRenderer;
+    let mockP5: Record<string, unknown>;
+
+    beforeEach(() => {
+        mockP5 = {
+            width: 1000,
+            height: 1000,
+            push: vi.fn(),
+            pop: vi.fn(),
+            image: vi.fn(),
+            translate: vi.fn(),
+            strokeWeight: vi.fn(),
+            stroke: vi.fn(),
+            noFill: vi.fn(),
+            rect: vi.fn(),
+            fill: vi.fn(),
+            createGraphics: vi.fn().mockReturnValue({
+                background: vi.fn(),
+                strokeWeight: vi.fn(),
+                noFill: vi.fn(),
+                stroke: vi.fn(),
+                rect: vi.fn(),
+            }),
+        };
+
+        gameRenderer = new GameRenderer(mockP5 as unknown as p5);
+    });
+
+    describe('setup', () => {
+        it('should calculate metrics and initialize sub-renderers', () => {
+            // [ACT]
+            gameRenderer.setup();
+
+            // [ASSERT]
+            const metrics = gameRenderer.rendererMetrics;
+            expect(metrics).toBeDefined();
+            expect(metrics.display.width).toBeGreaterThan(0);
+            expect(metrics.cell.size).toBeGreaterThan(0);
+        });
+    });
+
+    describe('render', () => {
+        it('should delegate render to all sub-renderers', () => {
+            // [ARRANGE]
+            gameRenderer.setup();
+
+            const mockRenderer = {
+                setup: vi.fn(),
+                render: vi.fn(),
+            };
+            gameRenderer.addRenderer(mockRenderer as unknown as Renderer);
+
+            const grid: Cell[][] = [];
+            const modules = {
+                text: {
+                    setTextSize: vi.fn(),
+                    setInactiveText: vi.fn(),
+                    setTextAlign: vi.fn(),
+                    textOnHud: vi.fn(),
+                    setActiveText: vi.fn(),
+                    setRendererMetrics: vi.fn(),
+                },
+                state: {
+                    isOn: vi.fn().mockReturnValue(true),
+                    isPaused: vi.fn().mockReturnValue(false),
+                    isMuted: vi.fn().mockReturnValue(false),
+                    isOff: vi.fn().mockReturnValue(false),
+                    isPlaying: vi.fn().mockReturnValue(true),
+                    isColorEnabled: vi.fn().mockReturnValue(true),
+                },
+                score: { score: 0, level: 1, maxLevel: 10, highScore: 0 },
+                hudGrid: { forEach: vi.fn() },
+            } as unknown as GameModules;
+
+            // [ACT]
+            gameRenderer.render(grid, modules);
+
+            // [ASSERT]
+            expect(mockRenderer.render).toHaveBeenCalled();
+        });
+    });
+
+    describe('Debug', () => {
+        it('should return correct debug data after setup', () => {
+            // [ARRANGE]
+            gameRenderer.setup();
+
+            // [ACT]
+            const debug = gameRenderer.getDebugData();
+
+            // [ASSERT]
+            expect(debug.display_width).toBeDefined();
+            expect(debug.cell_size).toBeDefined();
+        });
+    });
+});

package/src/core/module/renderer/GameRenderer.ts

@@ -0,0 +1,144 @@
+import p5 from 'p5';
+import { Cell, GameModules, RendererMetrics } from '../../types/Types';
+import { Debuggable } from '../../types/Interfaces';
+import { Renderer } from '../../types/modules';
+import DisplayRenderer from './DisplayRenderer';
+import { RendererComposite } from '../../types/modules';
+import HudRenderer from './HudRenderer';
+import configs from '../../../config/configs';
+import RelativeValuesHelper from '../../helpers/RelativeValuesHelper';
+import CoordinateHelper from '../../helpers/CoordinateHelper';
+
+/**
+ * Composite renderer that manages multiple sub-renderers.
+ * Orchestrates the rendering of the main display and the HUD.
+ * Handles the calculation of shared rendering metrics (sizes, positions) to ensure consistency.
+ */
+export default class GameRenderer implements RendererComposite, Debuggable {
+    private _p: p5;
+
+    private _renderers: Renderer[];
+
+    private _displayRenderer: DisplayRenderer;
+    private _hudRenderer: HudRenderer;
+
+    // Cache for renderer metrics
+    private _rendererMetrics: RendererMetrics;
+
+    /**
+     * Creates an instance of GameRenderer.
+     *
+     * @param {p5} p - The p5 instance.
+     */
+    constructor(p: p5) {
+        this._p = p;
+    }
+
+    /**
+     * Adds a sub-renderer to the composition.
+     *
+     * @param {Renderer} renderer - The renderer to add.
+     */
+    addRenderer(renderer: Renderer) {
+        this._renderers.push(renderer);
+    }
+
+    /**
+     * Initializes all sub-renderers and calculates layout metrics.
+     * This method must be called before rendering begins.
+     */
+    setup() {
+        this._displayRenderer = new DisplayRenderer(this._p);
+        this._hudRenderer = new HudRenderer(this._p);
+
+        this._renderers = [];
+        this.addRenderer(this._displayRenderer);
+        this.addRenderer(this._hudRenderer);
+
+        // Pre-calculate all metrics here to avoid dependency issues between renderers
+        this._calculateMetrics();
+
+        this._renderers.forEach(renderer => renderer.setup(this.rendererMetrics));
+    }
+
+    /**
+     * Calculates the layout dimensions for the display and HUD.
+     * Based on screen configuration and relative values.
+     */
+    private _calculateMetrics() {
+        const { width, height, margin: displayMargin } = configs.screenLayout.display;
+        const { columns: gridColumns } = configs.screenLayout.grid;
+
+        // 1. Calculate main display dimensions
+        const displayWidth = RelativeValuesHelper.getRelativeWidth(this._p, width);
+        const displayHeight = RelativeValuesHelper.getRelativeHeight(this._p, height);
+        const displayOrigin = CoordinateHelper.getRelativeCoordinate(this._p, {
+            x: displayMargin,
+            y: displayMargin,
+        });
+
+        // 2. Calculate cell size
+        const cellSize = displayWidth / gridColumns;
+
+        // 3. Calculate HUD dimensions
+        // Note: We use 0 and 1 to get start and end positions, then calculate width/height
+        const hudOrigin = {
+            x: CoordinateHelper.getHudPosX(this._p, 0, displayWidth),
+            y: CoordinateHelper.getHudPosY(this._p, 0, displayHeight),
+        };
+
+        const hudWidth = CoordinateHelper.getHudPosX(this._p, 1, displayWidth) - hudOrigin.x;
+        const hudHeight = CoordinateHelper.getHudPosY(this._p, 1, displayHeight) - hudOrigin.y;
+
+        this._rendererMetrics = {
+            display: {
+                width: displayWidth,
+                height: displayHeight,
+                origin: displayOrigin,
+            },
+            hud: {
+                width: hudWidth,
+                height: hudHeight,
+                origin: hudOrigin,
+            },
+            cell: {
+                size: cellSize,
+            },
+        };
+    }
+
+    /**
+     * Delegating render method.
+     * Calls render on all registered sub-renderers.
+     *
+     * @param {Cell[][]} grid - The main game grid.
+     * @param {GameModules} modules - The game modules collection.
+     */
+    render(grid: Cell[][], modules: GameModules) {
+        this._renderers.forEach(renderer => renderer.render(grid, modules));
+    }
+
+    /**
+     * Retrieves the calculated renderer metrics.
+     *
+     * @returns {RendererMetrics} The metrics object.
+     */
+    get rendererMetrics(): RendererMetrics {
+        return this._rendererMetrics;
+    }
+
+    /**
+     * Retrieves debug information about the renderer's calculated metrics.
+     *
+     * @returns {Record<string, string | number | boolean>} The debug data.
+     */
+    getDebugData(): Record<string, string | number | boolean> {
+        return {
+            display_width: this._rendererMetrics.display.width.toFixed(2),
+            display_height: this._rendererMetrics.display.height.toFixed(2),
+            hud_width: this._rendererMetrics.hud.width.toFixed(2),
+            hud_height: this._rendererMetrics.hud.height.toFixed(2),
+            cell_size: this._rendererMetrics.cell.size.toFixed(2),
+        };
+    }
+}

package/src/core/module/renderer/HudRenderer.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type p5 from 'p5';
+import HudRenderer from './HudRenderer';
+import { Color } from '../../types/enums';
+import { GameModules, RendererMetrics } from '../../types/Types';
+
+describe('HudRenderer', () => {
+    let renderer: HudRenderer;
+    let mockP5: Record<string, unknown>;
+
+    beforeEach(() => {
+        mockP5 = {
+            push: vi.fn(),
+            pop: vi.fn(),
+            translate: vi.fn(),
+            strokeWeight: vi.fn(),
+            stroke: vi.fn(),
+            noFill: vi.fn(),
+            rect: vi.fn(),
+            fill: vi.fn(),
+            width: 1000,
+            height: 1000,
+        };
+
+        renderer = new HudRenderer(mockP5 as unknown as p5);
+
+        const metrics: RendererMetrics = {
+            display: { width: 600, height: 900, origin: { x: 50, y: 50 } },
+            hud: { width: 400, height: 900, origin: { x: 650, y: 50 } },
+            cell: { size: 50 },
+        };
+
+        renderer.setup(metrics);
+    });
+
+    describe('render', () => {
+        it('should render score and level information', () => {
+            // [ARRANGE]
+            const mockModules = {
+                text: {
+                    setTextSize: vi.fn(),
+                    setInactiveText: vi.fn(),
+                    setActiveText: vi.fn(),
+                    setTextAlign: vi.fn(),
+                    textOnHud: vi.fn(),
+                },
+                state: {
+                    isOn: vi.fn().mockReturnValue(true),
+                    isPaused: vi.fn().mockReturnValue(false),
+                    isMuted: vi.fn().mockReturnValue(false),
+                    isOff: vi.fn().mockReturnValue(false),
+                    isPlaying: vi.fn().mockReturnValue(true),
+                    isColorEnabled: vi.fn().mockReturnValue(true),
+                },
+                score: {
+                    score: 500,
+                    level: 1,
+                    maxLevel: 10,
+                    highScore: 1000,
+                },
+                hudGrid: {
+                    forEach: vi.fn(callback => {
+                        callback({ coordinate: { x: 0, y: 0 }, value: 1, color: Color.RED });
+                    }),
+                },
+            } as unknown as GameModules;
+
+            // [ACT]
+            renderer.render([], mockModules);
+
+            // [ASSERT]
+            expect(mockModules.text.textOnHud).toHaveBeenCalledWith('500', expect.anything());
+            expect(mockModules.text.textOnHud).toHaveBeenCalledWith('1000', expect.anything());
+            expect(mockModules.text.textOnHud).toHaveBeenCalledWith('01 - 10', expect.anything());
+            expect(mockP5.translate).toHaveBeenCalled(); // Should have drawn the cell
+            expect(mockP5.rect).toHaveBeenCalled(); // Should have drawn the border
+        });
+
+        it('should show paused status when game is paused', () => {
+            // [ARRANGE]
+            const mockModules = {
+                text: {
+                    setTextSize: vi.fn(),
+                    setInactiveText: vi.fn(),
+                    setActiveText: vi.fn(),
+                    setTextAlign: vi.fn(),
+                    textOnHud: vi.fn(),
+                },
+                state: {
+                    isOn: vi.fn().mockReturnValue(true),
+                    isPaused: vi.fn().mockReturnValue(true),
+                    isMuted: vi.fn().mockReturnValue(false),
+                    isOff: vi.fn().mockReturnValue(false),
+                    isPlaying: vi.fn().mockReturnValue(true),
+                },
+                score: { score: 0, level: 1, maxLevel: 10, highScore: 1000 },
+                hudGrid: { forEach: vi.fn() },
+            } as unknown as GameModules;
+
+            // [ACT]
+            renderer.render([], mockModules);
+
+            // [ASSERT]
+            // setActiveText should be called for 'Paused'
+            expect(mockModules.text.setActiveText).toHaveBeenCalled();
+        });
+    });
+});