brick-engine-js 1.0.1 → 1.0.2

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

@@ -1,152 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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();
-        });
-    });
-});