jungle-server/js/makeColorsPicker.js

import { makeDiv,
         makeInput,
         setInput } from '/domUtilities.js';

import { makeFundamentalWheel } from '/wheelComponents/makeFundamentalWheel.js';

function makeColorsPicker() {

    let colors = ['#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000',
                  '#000000'];


    
    const div = makeDiv();

    const wheel = makeFundamentalWheel(section => {
        setInput(colorInput, colors[section]);
    });
    wheel.setFilter(colors);

    const colorInput = makeInput('color: ', colors[wheel.getFundamental()], value => {

        colors[wheel.getFundamental()] = value;
        wheel.setFilter(colors);

    });

    const setAllButton = makeInput('set all', undefined, () => {

        const color = colorInput.getElementsByTagName('input')[0].value;
        set(colors.map(() => color));

    });

    div.append(wheel.canvas,
               colorInput,
               setAllButton);

    const set = newColors => {

        colors = newColors.slice();
        wheel.setFilter(colors);
        setInput(colorInput, colors[wheel.getFundamental()]);

    };


    const get = () => {

        return colors.slice();

    };


    return {div, set, get};


}

export { makeColorsPicker }