class CompositionNode {
    constructor() {
        /**
         * @type {CompositionNode[]}
         */
        this.children = [];
        this.sum = 0n;
    }

    /**
     *
     * @param {CompositionNode} child
     */
    addChild(child) {
        this.children.push(child);
    }
}

/**
 * @param {number} n
 * @param {number[]} values
 * @returns {CompositionNode}
 */
function buildCompositionGraph(n, values) {
    const valueNodes = new Array(n + 1);
    for (let i = 0; i <= n; i++) {
        valueNodes[i] = new CompositionNode();
    }
    for (let i = 0; i < valueNodes.length; i++) {
        for (let j = 0; values[j] + i <= n && j < values.length; j++) {
            valueNodes[i].addChild(valueNodes[values[j] + i]);
        }
    }

    return valueNodes[0];
}

/**
 * @param {CompositionNode} graph
 */
function traverseGraph(graph) {
    if (graph.children.length === 0) {
        graph.sum = 1n;
        return;
    }

    let sum = 0n;
    for (let i = 0; i < graph.children.length; i++) {
        const child = graph.children[i];
        if (child.sum) {
            sum += child.sum;
        } else {
            traverseGraph(child);
            sum += child.sum;
        }
    }
    graph.sum = sum;
}

/**
 * @param {number} n
 * @param {number[]} values
 * @returns {BigInt}
 */
function countCompositions(n, values) {
    const graph = buildCompositionGraph(n, values);
    traverseGraph(graph);
    return graph.sum;
}

/**
 * @param {number} n
 * @param {number[]} values
 * @returns {BigInt[]}
 */
function countCompositionsUpTo(n, values) {
    const sums = new Array(n);
    for (let i = 0; i < n; i++) {
        sums[i] = countCompositions(i + 1, values);
    }
    return sums;
}

const hebrew = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    20,
    30,
    40,
    50,
    60,
    70,
    80,
    90,
    100,
    200,
    300,
    400
];
const english = [...new Array(26)].map((_, i) => i + 1);


const len = 150;
const cellSize = 6;
const radix = 2;
const compositionsUpTo = new Array(len);
const canvas = document.getElementById('cvs');
canvas.width = len * cellSize;
canvas.height = len * cellSize;
const ctx = canvas.getContext('2d');

function countLoop(begin, end) {
    let mod = end - begin;
    let i = 0;

    const shades = {};
    for (let i = 0; i < radix; i++) {
        const digit = i.toString(radix);
        const shadeByte = 255 - Math.ceil(255 * i / (radix - 1));
        shades[digit] = '#' + shadeByte.toString(16).padStart(2, '0').repeat(3);
    }

    const lastDigits = [...new Array(len)].map(() => new Array(len));

    window.requestAnimationFrame(function cb() {
        i = i % mod;
        compositionsUpTo[i] = compositionsUpTo[i] || countCompositionsUpTo(len, [...new Array(i + begin)].map((_, i) => i + 1)).map(val => val.toString(radix).padStart(len, '0'));
        const comps = compositionsUpTo[i];

        for (let i = 0; i < radix; i++) {
            const digit = i.toString(radix);
            ctx.beginPath();
            ctx.fillStyle = shades[digit];
            for (let row = 0; row < comps.length; row++) {
                const str = comps[row];
                for (let col = 0; col < str.length; col++) {
                    const currentDigit = comps[row][col];
                    if (currentDigit === digit && lastDigits[row][col] !== currentDigit) {
                        ctx.rect(col * cellSize, row * cellSize, cellSize, cellSize);
                    }
                }
            }
            ctx.fill();
        }

        i++;
        window.requestAnimationFrame(cb);
    });
}
countLoop(2, len + 2);