{"size": 3095, "ext": "js", "max_stars_repo_path": "js/app.js", "max_stars_repo_name": "nicolasjhampton/cellular_automata", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "js/app.js", "max_issues_repo_name": "nicolasjhampton/cellular_automata", "max_issues_repo_issues_event_min_datetime": "2020-07-16T02:38:29.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-02T02:32:59.000Z", "max_forks_repo_path": "js/app.js", "max_forks_repo_name": "nicolasjhampton/cellular_automata", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 28.9252336449, "max_line_length": 97, "alphanum_fraction": 0.6672051696}
import { DOMHandlerFactory } from "./domhandlers.js";
import { Animator } from "./animator.js";
const canvasWorker = new Worker('js/advcanvasworker.js');
const automatonWorker = new Worker('js/automatonworker.js');

/**
 * CONSTANTS
 */
const RULE126 = new Uint16Array([0, 1, 1, 1, 1, 1, 1, 0]);
const WIDTH = Uint16Array.of(1000);
const HEIGHT = Uint16Array.of(600);
const COLUMNS = Uint16Array.of(1000);
const COLUMNS_COPY = COLUMNS.slice();
const FIRST_YEAR = generateRandomYear();


/**
 * CONSTANTS copies
 */
const RULE126_COPY = RULE126.slice();
const WIDTH_COPY = WIDTH.slice();
const HEIGHT_COPY = HEIGHT.slice();
const FIRST_YEAR_COPY = FIRST_YEAR.slice();


/**
 * Helper functions
 */
function generateRandomYear() {
    return Uint16Array.from({length: COLUMNS_COPY}, () => Math.floor(Math.random() * 2)).slice();
}


/**
 * initialize and attach the canvas
 */
const canvasOnScreen = document.createElement('canvas');
canvasOnScreen.setAttribute('width', WIDTH);
canvasOnScreen.setAttribute('height', HEIGHT);
document.getElementById('screen').appendChild(canvasOnScreen);
const context = canvasOnScreen.getContext('2d', { alpha: true });


/**
 * initialize ctrls working off the main thread
 */
canvasWorker.postMessage({ eventName: 'init', WIDTH, HEIGHT, COLUMNS, FIRST_YEAR}, 
                         [ WIDTH.buffer, HEIGHT.buffer, COLUMNS.buffer, FIRST_YEAR.buffer ]);
automatonWorker.postMessage({ eventName: 'init', FIRST_YEAR_COPY, RULE126}, 
                            [ FIRST_YEAR_COPY.buffer, RULE126.buffer ]);


/**
 * manage animations
 */
const ani = Animator(function () {

    automatonWorker.postMessage({ eventName: 'getNewYear' });

    automatonWorker.onmessage = (e) => {
        const { eventName } = e.data;

        if (eventName === "newYear") {
            const { newYear } = e.data;

            canvasWorker.postMessage({ eventName: 'genYearImage', newYear }, [newYear.buffer]);
        }
    }
    canvasWorker.onmessage = (e) => {
        const { eventName } = e.data;

        if (eventName === "drawYear") {
            const { image } = e.data;

            context.putImageData(new ImageData(
                new Uint8ClampedArray(image), WIDTH_COPY, HEIGHT_COPY
            ), 0, 0);
        }
    }
});


/**
 * Activate Event Handlers
 */
const domHandlers = DOMHandlerFactory({
    numberInputSelector: "#numberInput",
    numberSubmitSelector: "#numberSubmit",
    animateToggleSelector: '#animate',
    seedYearSelector: '#seedYear',
    ctrlBoxSelector: '#automata_controls',
    buttonClass: 'pixel-switch',
    onClass: 'on'
});
domHandlers.initRuleBtns(RULE126_COPY, (newRule) => {
    automatonWorker.postMessage({ eventName: 'replaceRule', newRule }, [newRule.buffer]);
});
domHandlers.seedYearBtn((e) => {
    const seedYear = generateRandomYear();
    automatonWorker.postMessage({ eventName: 'reseed', seedYear }, [seedYear.buffer]);
});
domHandlers.ruleByNumberInput((newRule) => {
    automatonWorker.postMessage({ eventName: 'replaceRule', newRule }, [newRule.buffer]);
});

domHandlers.playPauseToggle(ani.toggleAnimation);
