brick-engine-js 1.0.1

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+/** @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

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

@@ -0,0 +1,34 @@
+/** @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

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

@@ -0,0 +1,16 @@
+{
+    "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

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

@@ -0,0 +1,133 @@
+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,
+        },
+    };
+};