accounts-frontend/packages/app/components/ui/bsod/BoxesField.ts

import Point from './Point';
import Box from './Box';

interface Params {
    countBoxes: number;
    boxMinSize: number;
    boxMaxSize: number;
    backgroundColor: string;
    lightColor: string;
    shadowColor: string;
    boxColors: ReadonlyArray<string>;
}

/**
 * Based on http://codepen.io/mladen___/pen/gbvqBo
 */
export default class BoxesField {
    private readonly elem: HTMLCanvasElement;
    private readonly ctx: CanvasRenderingContext2D;
    private readonly params: Params;

    private light: Point;
    private boxes: Array<Box>;

    /**
     * @param {HTMLCanvasElement} elem - canvas DOM node
     * @param {object} params
     */
    constructor(
        elem: HTMLCanvasElement,
        params: Params = {
            countBoxes: 14,
            boxMinSize: 20,
            boxMaxSize: 75,
            backgroundColor: '#233d49',
            lightColor: '#28555b',
            shadowColor: '#274451',
            boxColors: ['#207e5c', '#5b9aa9', '#e66c69', '#6b5b8c', '#8b5d79', '#dd8650'],
        },
    ) {
        this.elem = elem;
        const ctx = elem.getContext('2d');

        if (!ctx) {
            throw new Error('Cannot get canvas 2d context');
        }

        this.ctx = ctx;
        this.params = params;

        this.light = {
            x: 160,
            y: 200,
        };

        this.resize();
        this.drawLoop();
        this.bindWindowListeners();

        this.boxes = [];

        while (this.boxes.length < this.params.countBoxes) {
            this.boxes.push(
                new Box(
                    Math.floor(
                        Math.random() * (this.params.boxMaxSize - this.params.boxMinSize) + this.params.boxMinSize,
                    ),
                    {
                        x: Math.floor(Math.random() * elem.width + 1),
                        y: Math.floor(Math.random() * elem.height + 1),
                    },
                    Math.random() * Math.PI,
                    this.getRandomColor(),
                    this.params.shadowColor,
                ),
            );
        }
    }

    resize(): void {
        const { width, height } = this.elem.getBoundingClientRect();
        this.elem.width = width;
        this.elem.height = height;
    }

    drawLight(light: Point): void {
        const greaterSize = window.screen.width > window.screen.height ? window.screen.width : window.screen.height;
        // еее, теорема пифагора и описывание окружности вокруг квадрата, не зря в универ ходил!!!
        const lightRadius = greaterSize * Math.sqrt(2);

        this.ctx.beginPath();
        this.ctx.arc(light.x, light.y, lightRadius, 0, 2 * Math.PI);
        const gradient = this.ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, lightRadius);
        gradient.addColorStop(0, this.params.lightColor);
        gradient.addColorStop(1, this.params.backgroundColor);
        this.ctx.fillStyle = gradient;
        this.ctx.fill();
    }

    drawLoop(): void {
        this.ctx.clearRect(0, 0, this.elem.width, this.elem.height);
        this.drawLight(this.light);

        for (const i in this.boxes) {
            if (!this.boxes.hasOwnProperty(i)) {
                continue;
            }

            const box = this.boxes[i];
            box.rotate();
            box.drawShadow(this.ctx, this.light);
        }

        for (const i in this.boxes) {
            if (!this.boxes.hasOwnProperty(i)) {
                continue;
            }

            const box = this.boxes[i];
            box.draw(this.ctx);

            // When box leaves window boundaries
            let shouldUpdateBox = false;

            if (box.position.y - box.halfSize > this.elem.height) {
                box.position.y -= this.elem.height + 100;
                shouldUpdateBox = true;
            }

            if (box.position.x - box.halfSize > this.elem.width) {
                box.position.x -= this.elem.width + 100;
                shouldUpdateBox = true;
            }

            if (shouldUpdateBox) {
                this.updateBox(box);
            }
        }

        requestAnimationFrame(this.drawLoop.bind(this));
    }

    bindWindowListeners() {
        window.addEventListener('resize', this.resize.bind(this));
        window.addEventListener('mousemove', (event) => {
            this.light.x = event.clientX;
            this.light.y = event.clientY;
        });
    }

    updateBox(box: Box): void {
        box.color = this.getRandomColor();
    }

    getRandomColor(): string {
        return this.params.boxColors[Math.floor(Math.random() * this.params.boxColors.length)];
    }
}