@woosh/meep-engine/src/engine/graphics/render/forward_plus/debug/createLayerSwitcher.js

Pure JavaScript game engine. Fully featured and production ready.

import EmptyView from "../../../../../view/elements/EmptyView.js";
import ButtonView from "../../../../../view/elements/button/ButtonView.js";

export function createLayerSwitcher(camera) {
    const ev = new EmptyView({});

    for (let i = 1; i < 5; i++) {
        const channel = i;

        function update() {
            const enabled = (camera.layers.mask & (1 << channel)) !== 0;

            const color = enabled ? 'green' : 'red';

            b.css({
                background: color
            });
        }

        const b = new ButtonView({
            action() {
                camera.layers.toggle(channel);
                update();
            },
            name: i
        });

        b.css({
            position: 'absolute',
            bottom: 0,
            left: `${(channel - 1) * 20}px`,
            color: 'white',
            zIndex: 2
        });

        ev.addChild(b);

        update();
    }

    ev.link();

    return {
        domElement: ev.el
    };
}