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 { moving_directions } from "./directions.js";
import { rotating_directions } from "./directions.js";
import { is_moving_direction } from "./directions.js";
import { is_rotating_direction } from "./directions.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", moving_directions.front
        );
        
        this.#step_back = this.#create_push(
            "back", "arrow_drop_down", moving_directions.back
        );

        this.#step_left = this.#create_push(
            "left", "arrow_left", moving_directions.left
        );

        this.#step_right = this.#create_push(
            "right", "arrow_right", moving_directions.right
        );

        this.#rotate_clockwise = this.#create_push(
            "clockwise", "rotate_right", 
            rotating_directions.clockwise
        );

        this.#rotate_countclockwise = this.#create_push(
            "countclockwise", "rotate_left", 
            rotating_directions.counterclockwise
        );

        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.moving = moving_directions.front;
                    break;
                
                case "s":
                    this.#worker.player.moving = moving_directions.back;
                    break;

                case "d":
                    this.#worker.player.moving = moving_directions.right;
                    break;

                case "a":
                    this.#worker.player.moving = moving_directions.left;
                    break;

                default:
                    break;
            }
        });
    
        document.addEventListener("keyup", (action) => {
            switch (action.key) {
                case "w":
                case "s":
                case "a":
                case "d":
                    this.#worker.player.moving = moving_directions.stop;
                    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.moving = moving_directions.stop;
            this.#worker.player.rotating = rotating_directions.stop;
        };

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

    #create_push(name, icon, move) {
        if (!is_moving_direction(move) && !is_rotating_direction(move)) {
            throw new TypeError("Move muse be an direction.");
        }

        return push(name, null, (target) => {
            target.innerText = "";
            target.appendChild(material_icon(icon));
            
            if (is_moving_direction(move)) {
                target.addEventListener("mousedown", () => {
                    this.#worker.player.moving = move;
                });
            } else if (is_rotating_direction(move)) {
                target.addEventListener("mousedown", () => {
                    this.#worker.player.rotating = move;
                });
            }
        });
    }
}

export { scene_ui };