brick-engine-js 1.0.1 → 1.0.3

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

@@ -1,25 +0,0 @@
-import p5 from 'p5';
-import configs from '../../../config/configs';
-
-/**
- * Creates the decorative frame for the game.
- *
- * Adds a visual frame around the game area and includes the branding text "Brick Game".
- *
- * @param p - The p5 instance.
- * @param container - The parent container element.
- * @returns The created frame element.
- */
-export default function FrameLayout(p: p5, container: p5.Element): p5.Element {
-    const frame = p.createDiv();
-    frame.parent(container);
-    frame.id(configs.selectors.viewElementIds.frame);
-
-    const div = p.createDiv();
-    div.parent(frame);
-
-    const paragraph = p.createP('Brick Game');
-    paragraph.parent(div);
-
-    return frame;
-}

package/src/view/components/ui/BigButton.test.ts

@@ -1,28 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import type p5 from 'p5';
-import BigButton from './BigButton';
-
-describe('BigButton', () => {
-    it('should create a large button with requested label', () => {
-        // [ARRANGE]
-        const mockElement = {
-            parent: vi.fn(),
-            addClass: vi.fn(),
-        };
-        const mockP5 = {
-            createDiv: vi.fn().mockReturnValue(mockElement),
-            createButton: vi.fn().mockReturnValue(mockElement),
-        } as unknown as p5;
-        const mockContainer = {} as p5.Element;
-
-        // [ACT]
-        const result = BigButton(mockP5, mockContainer, 'Action');
-
-        // [ASSERT]
-        expect(mockP5.createDiv).toHaveBeenCalled();
-        expect(mockP5.createButton).toHaveBeenCalledWith('Action');
-        expect(mockElement.addClass).toHaveBeenCalledWith('lg-btn-container');
-        expect(mockElement.addClass).toHaveBeenCalledWith('lg-btn');
-        expect(result).toBe(mockElement);
-    });
-});

package/src/view/components/ui/BigButton.ts

@@ -1,31 +0,0 @@
-import p5 from 'p5';
-
-/**
- * Creates the large action button.
- *
- * This button is typically used for the primary game action (e.g., rotate, fire).
- * It creates a specific container and applies large button styles.
- *
- * @param p - The p5 instance.
- * @param container - The container element to attach the button to.
- * @param label - The text label for the button (currently used for aria-label or internal logic as visual label is commented out).
- * @returns The created button element.
- */
-export default function BigButton(p: p5, container: p5.Element, label: string) {
-    //Container
-    const buttonContainer = p.createDiv();
-    buttonContainer.parent(container);
-    buttonContainer.addClass('lg-btn-container');
-
-    // //Label
-    // const paragraph = p.createP(label);
-    // paragraph.parent(buttonContainer);
-    // paragraph.addClass('lg-btn-p');
-
-    //Button
-    const button = p.createButton(label);
-    button.parent(buttonContainer);
-    button.addClass('lg-btn');
-
-    return button;
-}

package/src/view/components/ui/Button.test.ts

@@ -1,30 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import type p5 from 'p5';
-import Button from './Button';
-
-describe('Button', () => {
-    it('should create a button with requested label and classes', () => {
-        // [ARRANGE]
-        const mockElement = {
-            parent: vi.fn(),
-            addClass: vi.fn(),
-        };
-        const mockP5 = {
-            createDiv: vi.fn().mockReturnValue(mockElement),
-            createButton: vi.fn().mockReturnValue(mockElement),
-        } as unknown as p5;
-        const mockContainer = {} as p5.Element;
-
-        // [ACT]
-        const result = Button(mockP5, mockContainer, 'UP');
-
-        // [ASSERT]
-        expect(mockP5.createDiv).toHaveBeenCalled();
-        expect(mockP5.createButton).toHaveBeenCalledWith('UP');
-        expect(mockElement.parent).toHaveBeenCalledWith(mockContainer); // Div parent
-        expect(mockElement.parent).toHaveBeenCalledWith(mockElement); // Button parent (self-referencing mock)
-        expect(mockElement.addClass).toHaveBeenCalledWith('btn-container');
-        expect(mockElement.addClass).toHaveBeenCalledWith('btn');
-        expect(result).toBe(mockElement);
-    });
-});

package/src/view/components/ui/Button.ts

@@ -1,30 +0,0 @@
-import p5 from 'p5';
-
-/**
- * Creates a standard directional button.
- *
- * These buttons are used for the D-pad controls (Up, Down, Left, Right).
- *
- * @param p - The p5 instance.
- * @param container - The container element to attach the button to.
- * @param label - The text label for the button.
- * @returns The created button element.
- */
-export default function Button(p: p5, container: p5.Element, label: string) {
-    //Container
-    const buttonContainer = p.createDiv();
-    buttonContainer.parent(container);
-    buttonContainer.addClass('btn-container');
-
-    //Button
-    const button = p.createButton(label);
-    button.parent(buttonContainer);
-    button.addClass('btn');
-
-    //Label
-    // const paragraph = p.createP(label);
-    // paragraph.parent(buttonContainer);
-    // paragraph.addClass('btn-p');
-
-    return button;
-}

package/src/view/components/ui/Canvas.test.ts

@@ -1,32 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import type p5 from 'p5';
-import Canvas from './Canvas';
-
-describe('Canvas', () => {
-    it('should create a canvas with calculated dimensions from configs', () => {
-        // [ARRANGE]
-        const mockElement = {
-            parent: vi.fn(),
-            id: vi.fn(),
-        };
-        const mockP5 = {
-            createCanvas: vi.fn().mockReturnValue(mockElement),
-        } as unknown as p5;
-        const mockContainer = {} as p5.Element;
-
-        // Ratios from actual configs: widthRatio: 0.7, aspectRatio: 1.114
-        const width = 500;
-        const expectedWidth = 500 * 0.7; // 350
-        const expectedHeight = expectedWidth * 1.114; // 389.9
-
-        // [ACT]
-        const result = Canvas(mockP5, mockContainer, width);
-
-        // [ASSERT]
-        expect(mockP5.createCanvas).toHaveBeenCalledWith(expectedWidth, expectedHeight);
-        expect(mockElement.parent).toHaveBeenCalledWith(mockContainer);
-        expect(mockElement.id).toHaveBeenCalledWith('brick-game-canvas');
-        expect(result.canvasWidth).toBe(expectedWidth);
-        expect(result.canvasHeight).toBe(expectedHeight);
-    });
-});

package/src/view/components/ui/Canvas.ts

@@ -1,34 +0,0 @@
-import p5 from 'p5';
-
-import configs from '../../../config/configs';
-
-/**
- * Response object containing canvas dimensions and element reference.
- */
-interface CanvasResponse {
-    canvasWidth: number;
-    canvasHeight: number;
-    canvas: p5.Element;
-}
-
-/**
- * Creates the main p5 canvas for rendering the game.
- *
- * It calculates the canvas size based on the provided container width, maintaining a specific aspect ratio
- * defined by `configs.viewLayout.canvas.aspectRatio`.
- *
- * @param {p5} p - The p5 instance.
- * @param {p5.Element} container - The frame container to attach the canvas to.
- * @param {number} width - The width of the outer container, used to calculate canvas dimensions with `configs.viewLayout.canvas.widthRatio`.
- * @returns {CanvasResponse} Object containing the canvas element and its calculated dimensions.
- */
-export default function Canvas(p: p5, container: p5.Element, width: number): CanvasResponse {
-    const canvasWidth = width * configs.viewLayout.canvas.widthRatio;
-    const canvasHeight = canvasWidth * configs.viewLayout.canvas.aspectRatio;
-
-    const canvas = p.createCanvas(canvasWidth, canvasHeight);
-    canvas.parent(container);
-    canvas.id(configs.selectors.viewElementIds.canvas);
-
-    return { canvasWidth, canvasHeight, canvas };
-}

package/src/view/components/ui/SmallButton.test.ts

@@ -1,48 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import type p5 from 'p5';
-import SmallButton from './SmallButton';
-
-describe('SmallButton', () => {
-    it('should create a small button with paragraph label', () => {
-        // [ARRANGE]
-        const mockElement = {
-            parent: vi.fn(),
-            addClass: vi.fn(),
-        };
-        const mockP5 = {
-            createDiv: vi.fn().mockReturnValue(mockElement),
-            createButton: vi.fn().mockReturnValue(mockElement),
-            createP: vi.fn().mockReturnValue(mockElement),
-        } as unknown as p5;
-        const mockContainer = {} as p5.Element;
-
-        // [ACT]
-        const result = SmallButton(mockP5, mockContainer, 'Reset', true);
-
-        // [ASSERT]
-        expect(mockP5.createDiv).toHaveBeenCalled();
-        expect(mockP5.createButton).toHaveBeenCalledWith('');
-        expect(mockP5.createP).toHaveBeenCalledWith('Reset');
-        expect(mockElement.addClass).toHaveBeenCalledWith('sm-btn-container');
-        expect(mockElement.addClass).toHaveBeenCalledWith('sm-btn-container-top');
-        expect(mockElement.addClass).toHaveBeenCalledWith('sm-btn');
-        expect(mockElement.addClass).toHaveBeenCalledWith('sm-btn-p');
-        expect(result).toBe(mockElement);
-    });
-
-    it('should use bottom class when top is false', () => {
-        // [ARRANGE]
-        const mockElement = { parent: vi.fn(), addClass: vi.fn() };
-        const mockP5 = {
-            createDiv: vi.fn().mockReturnValue(mockElement),
-            createButton: vi.fn().mockReturnValue(mockElement),
-            createP: vi.fn().mockReturnValue(mockElement),
-        } as unknown as p5;
-
-        // [ACT]
-        SmallButton(mockP5, {} as p5.Element, 'Test', false);
-
-        // [ASSERT]
-        expect(mockElement.addClass).toHaveBeenCalledWith('sm-btn-container-bottom');
-    });
-});

package/src/view/components/ui/SmallButton.ts

@@ -1,32 +0,0 @@
-import p5 from 'p5';
-
-/**
- * Creates a small system button (e.g., Reset, Sound).
- *
- * These buttons have a distinct style and include a visible paragraph label next to them.
- *
- * @param {p5} p - The p5 instance.
- * @param {p5.Element} container - The container element to attach the button to.
- * @param {string} label - The visible text label displayed near the button.
- * @param {boolean} top - Determines position/styling nuance (e.g. if it belongs to the top row of small buttons).
- * @returns {p5.Element} The created button element.
- */
-export default function SmallButton(p: p5, container: p5.Element, label: string, top: boolean) {
-    //Container
-    const buttonContainer = p.createDiv();
-    buttonContainer.parent(container);
-    buttonContainer.addClass('sm-btn-container');
-    buttonContainer.addClass(top ? 'sm-btn-container-top' : 'sm-btn-container-bottom');
-
-    //Button
-    const button = p.createButton('');
-    button.parent(buttonContainer);
-    button.addClass('sm-btn');
-
-    //Label
-    const paragraph = p.createP(label);
-    paragraph.parent(buttonContainer);
-    paragraph.addClass('sm-btn-p');
-
-    return button;
-}

package/src/view/theme/applyColors.test.ts

@@ -1,47 +0,0 @@
-/** @vitest-environment jsdom */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import applyColors from './applyColors';
-
-describe('applyColors', () => {
-    let root: HTMLElement;
-
-    beforeEach(() => {
-        // Setup JSDOM :root element styles
-        root = document.documentElement;
-        root.style.cssText = '';
-
-        // Default location mock
-        vi.stubGlobal('location', {
-            href: 'http://localhost/',
-        });
-    });
-
-    it('should apply default colors when no query params are present', () => {
-        // [ACT]
-        applyColors();
-
-        // [ASSERT]
-        // Default bodyMain is rgb(0, 68, 187)
-        expect(root.style.getPropertyValue('--main-color')).toBe('rgb(0, 68, 187)');
-        expect(root.style.getPropertyValue('--button-color')).toBe('rgb(247, 222, 57)');
-    });
-
-    it('should apply colors from query parameters', () => {
-        // [ARRANGE]
-        // body-color and button-color are the keys in configs
-        vi.stubGlobal('location', {
-            href: 'http://localhost/?body-color=%23ff0000&button-color=%2300ff00',
-        });
-
-        // [ACT]
-        applyColors();
-
-        // [ASSERT]
-        // JSDOM might return rgb(255, 0, 0) for #ff0000
-        const mainColor = root.style.getPropertyValue('--main-color');
-        expect(mainColor === '#ff0000' || mainColor === 'rgb(255, 0, 0)').toBe(true);
-
-        const buttonColor = root.style.getPropertyValue('--button-color');
-        expect(buttonColor === '#00ff00' || buttonColor === 'rgb(0, 255, 0)').toBe(true);
-    });
-});

package/src/view/theme/applyColors.ts

@@ -1,38 +0,0 @@
-import { colord } from 'colord';
-
-import configs from '../../config/configs';
-
-// prettier-ignore
-/**
- * Applies color themes to the application by setting CSS variables.
- *
- * It checks for `configs.inputQueryParams.mainColor` and `configs.inputQueryParams.buttonColor` query parameters in the URL.
- * If present, these values are used; otherwise, default `configs.colors` are applied.
- * It also calculates and sets shadow and reflection variations for these colors.
- *
- * @returns {void}
- */
-export default function applyColors() {
-    const root: HTMLElement = document.querySelector(':root');
-
-    const paramsString = window.location.href.substring(
-        window.location.href.indexOf('?') + 1,
-    );
-    const searchParams = new URLSearchParams(paramsString);
-
-    const mainColor = searchParams.has(configs.inputQueryParams.mainColor)
-        ? searchParams.get(configs.inputQueryParams.mainColor)
-        : configs.colors.bodyMain;
-
-    const buttonColor = searchParams.has(configs.inputQueryParams.buttonColor)
-        ? searchParams.get(configs.inputQueryParams.buttonColor)
-        : configs.colors.bodyButton;
-
-    root.style.setProperty('--main-color'            , mainColor);
-    root.style.setProperty('--button-color'          , buttonColor);
-
-    root.style.setProperty('--color-shadow'          , colord(mainColor)  .darken(0.15).toHex());
-    root.style.setProperty('--color-shadow-reflexion', colord(mainColor)  .lighten(0.15).toHex());
-    root.style.setProperty('--button-color-reflexion', colord(buttonColor).lighten(0.15).toHex());
-    root.style.setProperty('--button-color-shadow'   , colord(buttonColor).darken(0.15).toHex());
-}

package/src/view/theme/dimensions.test.ts

@@ -1,34 +0,0 @@
-/** @vitest-environment jsdom */
-import { describe, it, expect, beforeEach } from 'vitest';
-import dimensions from './dimensions';
-
-describe('dimensions', () => {
-    let root: HTMLElement;
-
-    beforeEach(() => {
-        root = document.documentElement;
-        // Clear properties
-        root.style.cssText = '';
-    });
-
-    it('should set CSS variables based on input dimensions', () => {
-        // [ARRANGE]
-        const width = 400;
-        const height = 800;
-        const canvasWidth = 300;
-        const canvasHeight = 600;
-
-        // [ACT]
-        dimensions(width, height, canvasWidth, canvasHeight);
-
-        // [ASSERT]
-        expect(root.style.getPropertyValue('--width')).toBe('400px');
-        expect(root.style.getPropertyValue('--height')).toBe('800px');
-        expect(root.style.getPropertyValue('--canvas-width')).toBe('300px');
-        expect(root.style.getPropertyValue('--canvas-height')).toBe('600px');
-
-        // Multiplier from configs: 1.9
-        // borderRadiusRatio: 0.05 -> 400 * 0.05 = 20px
-        expect(root.style.getPropertyValue('--border-radius')).toBe('20px');
-    });
-});

package/src/view/theme/dimensions.ts

@@ -1,53 +0,0 @@
-import configs from '../../config/configs';
-
-// prettier-ignore
-/**
- * Calculates and sets various CSS variables for responsive sizing of the game UI.
- *
- * This function defines sizes for the main container, canvas, borders, buttons (including mobile variations),
- * and fonts based on the provided dimensions.
- *
- * @param width - The width of the game container.
- * @param height - The height of the game container.
- * @param canvasWidth - The width of the game canvas.
- * @param canvasHeight - The height of the game canvas.
- * @returns
- */
-export default function dimensions(
-    width: number,
-    height: number,
-    canvasWidth: number,
-    canvasHeight: number,
-) {
-    const root: HTMLElement = document.querySelector(':root');
-
-    root.style.setProperty('--dispersion'                        , configs.viewLayout.shadowDispersion);
-
-    root.style.setProperty('--width'                             , `${width}px`);
-    root.style.setProperty('--height'                            , `${height}px`);
-
-    root.style.setProperty('--canvas-width'                      , `${canvasWidth}px`);
-    root.style.setProperty('--canvas-height'                     , `${canvasHeight}px`);
-
-    root.style.setProperty('--border-radius'                     , `${width * configs.viewLayout.dimensions.borderRadiusRatio}px`);
-    root.style.setProperty('--border'                            , `${width * configs.viewLayout.dimensions.borderWidthRatio}px solid black`);
-
-    root.style.setProperty('--sm-button-size'                    , `${width * configs.viewLayout.dimensions.button.smSizeRatio}px`);
-    root.style.setProperty('--button-size'                       , `${width * configs.viewLayout.dimensions.button.mdSizeRatio}px`);
-    root.style.setProperty('--lg-button-size'                    , `${width * configs.viewLayout.dimensions.button.lgSizeRatio}px`);
-
-    root.style.setProperty('--sm-button-size-mobile'             , `${width * configs.viewLayout.dimensions.button.mobile.smSizeRatio}px`);
-    root.style.setProperty('--button-size-mobile'                , `${width * configs.viewLayout.dimensions.button.mobile.mdSizeRatio}px`);
-    root.style.setProperty('--lg-button-size-mobile'             , `${width * configs.viewLayout.dimensions.button.mobile.lgSizeRatio}px`);
-
-    root.style.setProperty('--sm-button-size-mobile-font-size'   , `${width * configs.viewLayout.dimensions.button.mobile.smFontRatio}px`);
-    root.style.setProperty('--sm-button-size-mobile-line-height' , `${width * configs.viewLayout.dimensions.button.mobile.smFontRatio}px`);
-
-    root.style.setProperty('--button-size-mobile-font-size'      , `${width * configs.viewLayout.dimensions.button.mobile.fontRatio}px`);
-    root.style.setProperty('--lg-button-size-mobile-font-size'   , `${width * configs.viewLayout.dimensions.button.mobile.lgFontRatio}px`);
-
-    root.style.setProperty('--button-size-mobile-spacing'        , `${width * configs.viewLayout.dimensions.button.mobile.spacingRatio}px`);
-
-    root.style.setProperty('--button-border'                     , `${width * configs.viewLayout.dimensions.button.borderRatio}px solid black`);
-    root.style.setProperty('--button-animation-duration'         , configs.viewLayout.dimensions.button.animationDuration);
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "compilerOptions": {
-        "outDir": "./dist/",
-        "noImplicitAny": true,
-        "module": "ESNext",
-        "target": "es5",
-        "jsx": "react",
-        "allowJs": true,
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "skipLibCheck": true,
-        "types": ["node", "webpack-env", "p5"],
-        "declaration": true
-    },
-    "include": ["src/**/*"]
-}

package/vitest.config.ts

@@ -1,14 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import path from 'path';
-
-export default defineConfig({
-    resolve: {
-        alias: {
-            '@client-game': path.resolve(__dirname, './src/core/Game.ts'),
-        },
-    },
-    test: {
-        globals: true,
-        environment: 'node',
-    },
-});

package/webpack.config.js

@@ -1,133 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const path = require('path');
-const webpack = require('webpack');
-const dotenv = require('dotenv');
-const fs = require('fs');
-
-module.exports = (env = {}, argv) => {
-    const isProduction = argv.mode === 'production';
-    const appMode = env.mode || 'server'; // 'server' or 'client'
-    const clientGamePath = env.game ? path.resolve(process.cwd(), env.game) : path.resolve(__dirname, 'src/menu/GameMenu.ts');
-
-    // Load .env files, .env.local takes precedence.
-    const envFileLocal = path.resolve(__dirname, '.env.local');
-    const envFile = path.resolve(__dirname, '.env');
-
-    let envConfig = {};
-    if (fs.existsSync(envFile)) {
-        Object.assign(envConfig, dotenv.config({ path: envFile }).parsed);
-    }
-    if (fs.existsSync(envFileLocal)) {
-        Object.assign(envConfig, dotenv.config({ path: envFileLocal }).parsed);
-    }
-
-    // Fallback logic for webpack
-    const SUPABASE_URL = process.env.SUPABASE_URL || envConfig.SUPABASE_URL || 'http://127.0.0.1:54321';
-    const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY || envConfig.SUPABASE_ANON_KEY || '';
-
-    return {
-        mode: isProduction ? 'production' : 'development',
-        entry: {
-            'brick-engine': './src/index.ts',
-            app: './src/main.ts',
-        },
-        devtool: isProduction ? 'source-map' : 'eval-source-map',
-        output: {
-            filename: '[name].js',
-            path: path.resolve(__dirname, 'dist'),
-            clean: true, // Clean the output directory before emit.
-            publicPath: 'auto',
-            library: {
-                name: 'BrickEngine',
-                type: 'umd',
-            },
-        },
-        externals: {
-            p5: 'p5',
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.ts$/,
-                    use: 'ts-loader',
-                    exclude: /node_modules/,
-                },
-                {
-                    test: /\.css$/i,
-                    use: [
-                        {
-                            loader: MiniCssExtractPlugin.loader,
-                            options: {
-                                publicPath: '../', // CSS is in css/ folder, needs to go up to find images/fonts
-                            },
-                        },
-                        'css-loader',
-                    ],
-                },
-                {
-                    test: /\.(woff|woff2|eot|ttf|otf)$/i, // Fonts (Required for CSS url() resolution)
-                    type: 'asset/resource',
-                    generator: {
-                        filename: 'fonts/[name][ext]',
-                    },
-                },
-            ],
-        },
-        resolve: {
-            extensions: ['.tsx', '.ts', '.js', '.css', '.wav', '.png', '.ico', '.gif', '.json', '.svg', '.webmanifest'],
-            alias: {
-                '@client-game': clientGamePath,
-            },
-        },
-        devServer: {
-            static: [
-                {
-                    directory: path.resolve(__dirname, 'dist'),
-                },
-            ],
-            port: 9000,
-            open: true,
-            hot: true,
-            historyApiFallback: true,
-        },
-        plugins: [
-            new webpack.DefinePlugin({
-                'process.env.APP_MODE': JSON.stringify(appMode),
-                'process.env.SUPABASE_URL': JSON.stringify(SUPABASE_URL),
-                'process.env.SUPABASE_ANON_KEY': JSON.stringify(SUPABASE_ANON_KEY),
-            }),
-            new HtmlWebpackPlugin({
-                template: './public/index.html',
-                filename: 'index.html', // Output file name
-                favicon: './public/favicon.ico',
-                inject: 'body',
-                chunks: ['app'], // Only inject the app bundle, not the library
-                minify: isProduction
-                    ? {
-                          removeComments: true,
-                          collapseWhitespace: true,
-                          removeAttributeQuotes: true,
-                      }
-                    : false,
-            }),
-            new MiniCssExtractPlugin({
-                filename: isProduction ? 'css/[name].[contenthash].css' : 'css/[name].bundle.css',
-            }),
-            new CopyWebpackPlugin({
-                patterns: [
-                    { from: 'node_modules/p5/lib/p5.min.js', to: 'vendor/p5.min.js' },
-                    { from: 'public/images', to: 'images' },
-                    { from: 'public/sounds', to: 'sounds' },
-                    { from: 'public/docs', to: 'docs' },
-                    { from: 'public/favicon.ico', to: './' },
-                    { from: 'public/CNAME', to: './' },
-                ],
-            }),
-        ],
-        optimization: {
-            minimize: isProduction,
-        },
-    };
-};