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";
import { position } from "./position.js";

class scene_ui {
    #box;
    #worker;
    #last_mouse_position;
    #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.#last_mouse_position = undefined;
        this.#worker = worker;

        this.#step_front = this.#create_push(
            "front", "arrow_drop_up", 
            (player) => { player.movement.add_front(); }
        );
        
        this.#step_back = this.#create_push(
            "back", "arrow_drop_down",
            (player) => { player.movement.add_back(); }
        );

        this.#step_left = this.#create_push(
            "left", "arrow_left",
            (player) => { player.movement.add_left(); }
        );

        this.#step_right = this.#create_push(
            "right", "arrow_right", 
            (player) => { player.movement.add_right(); }
        );

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

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

        this.#setup_stopers();
        this.#setup_keybind();
        this.#setup_mousebind();

        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;
    }

    #setup_keybind() {
        document.addEventListener("keydown", (action) => {
            switch (action.key) {
                case "w":
                    this.#worker.player.movement.add_front();
                    break;
                
                case "s":
                    this.#worker.player.movement.add_back();
                    break;

                case "d":
                    this.#worker.player.movement.add_right();
                    break;

                case "a":
                    this.#worker.player.movement.add_left();
                    break;

                default:
                    break;
            }
        });
    
        document.addEventListener("keyup", (action) => {
            switch (action.key) {
                case "w":
                case "s":
                    this.#worker.player.movement.stop_front_back();
                    break;

                case "a":
                case "d":
                    this.#worker.player.movement.stop_left_right();
                    break;

                default:
                    break;
            }
        });
    }

    #setup_mousebind() {
        document.addEventListener("mouseout", (action) => {
            this.#last_mouse_position = undefined;
        });

        document.addEventListener("mousemove", (action) => {
            const from_mouse = () => {
                return new position(action.clientX, action.clientY);
            };

            if (this.#last_mouse_position === undefined) {
                this.#last_mouse_position = from_mouse();
                return;
            }

            const current = from_mouse();
            const difference = current.compare(this.#last_mouse_position);
            const size = new position(window.innerWidth, window.innerHeight);

            this.#last_mouse_position = current;
            this.#worker.player.rotate_cursor(difference, size);
        });
    }

    #setup_stopers() {
        const stoper = () => {
            this.#worker.player.movement.stop();
            this.#worker.player.rotation.stop();
        };

        document.addEventListener("mouseup", stoper);
        document.addEventListener("mouseover", stoper);
    }

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

export { scene_ui };