la-visitor/assets/scene-ui.js

import { scene } from "./scene.js";
import { push } from "./push.js";
import { material_icon } from "./icons.js";
import { container } from "./container.js";

class scene_ui {
    #box;
    #worker;
    #step_left;
    #step_right;
    #step_front;
    #step_back;
    #rotate_clockwise;
    #rotate_countclockwise;

    constructor(worker) {
        if (!(worker instanceof scene)) {
            throw new TypeError("Worker must be instance of scene.");
        }

        this.#worker = worker;

        this.#step_front = this.#create_push(
            "front", "arrow_drop_up", position => { position.move_front(); }
        );
        
        this.#step_back = this.#create_push(
            "back", "arrow_drop_down", position => { position.move_back(); }
        );

        this.#step_left = this.#create_push(
            "left", "arrow_left", position => { position.move_left(); }
        );

        this.#step_right = this.#create_push(
            "right", "arrow_right", position => { position.move_right(); }
        );

        this.#rotate_clockwise = this.#create_push(
            "clockwise", "rotate_right", 
            position => { position.rotate_clockwise(); }
        );

        this.#rotate_countclockwise = this.#create_push(
            "countclockwise", "rotate_left", 
            position => { position.rotate_countclockwise(); }
        );

        this.#box = container("controls", (root) => {
            root.appendChild(container("top", (top) => {
                top.appendChild(this.#rotate_countclockwise);
                top.appendChild(this.#step_front);
                top.appendChild(this.#rotate_clockwise);
            }));

            root.appendChild(container("bottom", (bottom) => {
                bottom.appendChild(this.#step_left);
                bottom.appendChild(this.#step_back);
                bottom.appendChild(this.#step_right);
            }));
        });
    }

    get box() {
        return this.#box;
    }

    #create_push(name, icon, move) {
        return push(name, () => {
            move(this.#worker.position);
        }, (target) => {
            target.innerText = "";
            target.appendChild(material_icon(icon));
        });
    }
}

export { scene_ui };