Move files to other directory.

assets/actor.js

@@ -1,73 +0,0 @@
-import { coordinates } from "./coordinates.js";
-import { position } from "./position.js";
-import { moving } from "./moving.js";
-
-class actor extends coordinates {
-    #movement;
-    #rotation;
-    #speed;
-
-    constructor() {
-        super();
-
-        this.#speed = 0.25;    
-        this.#movement = new moving();
-        this.#rotation = new moving();
-    }
-
-    set speed(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Speed must be an number.");
-        }
-
-        this.#speed = target;
-    }
-
-    get speed() {
-        return this.#speed;
-    }
-
-    rotate_cursor(cursor, size, scale = 2) {
-        if (!(cursor instanceof position)) {
-            throw new TypeError("Cursor compare must be an position object.");
-        }
-
-        if (!(size instanceof position)) {
-            throw new TypeError("Size must be an position object.");
-        }
-
-        if (typeof(scale) !== "number") {
-            throw new TypeError("Scale must be an number.");
-        }
-
-        const rotate = cursor.x / size.x * 360 * scale;
-        const bottom_rotate = cursor.y / size.y * 180 * scale;
-        
-        this.rotate_bottom(bottom_rotate);
-        this.rotate_clockwise(rotate);
-    }
-
-    get movement() {
-        return this.#movement;
-    }
-
-    get rotation() {
-        return this.#rotation;
-    }
-
-    update() {
-        this.#update_position();
-        this.#update_rotation();
-    }
-
-    #update_rotation() {
-        this.rotate_clockwise(this.#speed * 10 * this.rotation.z);
-    }
-
-    #update_position() {
-        this.move_front(this.#speed * this.movement.y);
-        this.move_right(this.#speed * this.movement.x);
-    }
-}
-
-export { actor };

assets/color-mode.js

@@ -1,107 +0,0 @@
-const color_modes = Object.freeze({
-    DARK: "dark",
-    LIGHT: "light",
-})
-
-class color_mode {
-    #app;
-    #current;
-    #dark_class;
-    #light_class;
-
-    constructor(
-        app = null, 
-        dark_class = "darkmode", 
-        light_class = "lightmode", 
-        defaults = color_modes.DARK
-    ) {
-        if (!(app instanceof HTMLElement)) {
-            throw new TypeError("App to color control must be HTMLElement.");
-        }
-
-        if (typeof(dark_class) !== "string") {
-            throw new TypeError("Name of darkmode class must be string.");
-        }
-        
-        if (typeof(light_class) !== "string") {
-            throw new TypeError("Name of lightmode class must be String.");
-        }
-
-        if (dark_class === light_class) {
-            throw new Error("Dark modeclass and lightmode class is same.");
-        }
-
-        if (defaults !== color_modes.DARK && defaults !== color_modes.LIGHT) {
-            throw new TypeError("Default color mode must be color modes.");
-        }
-
-        this.#current = this.#load_mode(defaults);
-        this.#app = app;
-        this.#dark_class = dark_class;
-        this.#light_class = light_class;
-        this.update();
-    }
-
-    #save_mode() {
-        localStorage.setItem("color-mode", this.mode);
-    }
-
-    #load_mode(defaults = color_modes.DARK) {
-        const loaded = localStorage.getItem("color-mode");
-
-        if (loaded !== color_modes.DARK && loaded !== color_modes.LIGHT) {
-            return defaults;
-        }   
-
-        return loaded;
-    }
-
-    get mode() {
-        return this.#current;
-    }
-
-    set mode(target) {
-        if (target !== color_modes.DARK && target !== color_modes.LIGHT) {
-            throw new TypeError("New color mode must be in color modes.");
-        }
-
-        this.#current = target;
-        update();
-    }
-
-    reverse() {
-        if (this.#current === color_modes.DARK) {
-            this.#current = color_modes.LIGHT
-        } else {
-            this.#current = color_modes.DARK;
-        }
-
-        this.update();
-    }
-
-    update() {
-        const app = this.#app;
-        const darkmode = this.#dark_class;
-        const lightmode = this.#light_class;
-        const current = this.#current;
-
-        this.#save_mode();
-
-        if (app.classList.contains(darkmode)) {
-            app.classList.remove(darkmode);
-        }
-
-        if (app.classList.contains(lightmode)) {
-            app.classList.remove(lightmode);
-        }
-
-        if (current === color_modes.DARK) {
-            app.classList.add(darkmode);
-            return;
-        }
-
-        app.classList.add(lightmode);
-    }
-}
-
-export { color_mode, color_modes };

assets/container.js

@@ -1,22 +0,0 @@
-const container = (name, customisation = null) => {
-    if (typeof(name) !== "string") {
-        throw new TypeError("Name of the container must be string.");
-    }
-
-    if (customisation !== null && typeof(customisation) !== "function") {
-        throw new TypeError("Customisation must be null or function.");
-    }
-
-    const target = document.createElement("div");
-
-    target.classList.add("container");
-    target.id = "container-" + name;
-
-    if (customisation) {
-        customisation(target);
-    }
-
-    return target;
-};
-
-export { container };

assets/coordinates.js

@@ -1,139 +0,0 @@
-import { position } from "./position.js";
-
-class coordinates extends position {
-    #rotate;
-    #head_rotate;
-
-    constructor() {
-        super();
-        
-        this.#rotate = 0;
-        this.#head_rotate = 0;
-    }
-
-    get rotate() {
-        this.#check_rotate();
-        
-        return this.#rotate;
-    }
-
-    set rotate(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Coordinate must be number.");
-        }
-
-        this.#rotate = target;
-        this.#check_rotate();
-    }
-
-    #check_rotate() {
-        while (this.#rotate < 0) {
-            this.#rotate += 360;
-        }
-
-        this.#rotate = this.#rotate % 360;
-    }
-
-    set head_rotate(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Coordinate must be number.");
-        }
-
-        this.#head_rotate = target % 90;
-        this.#check_head_rotate();
-    }   
-
-    #check_head_rotate() {
-        if (this.#head_rotate > 90) this.#head_rotate = 90;
-        if (this.#head_rotate < -90) this.#head_rotate = -90;
-    }
-
-    get head_rotate() {
-        this.#check_head_rotate();
-
-        return this.#head_rotate;
-    }
-
-    #radians(change = 0) {
-        return (this.rotate + change) * Math.PI / 180;
-    }
-
-    move_front(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Steps must be number.");
-        }
-    
-        this.y -= Math.cos(this.#radians()) * target;
-        this.x -= Math.sin(this.#radians()) * target;
-    }
-
-    move_back(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Steps must be number.");
-        }
-
-        this.move_front(-target);
-    }
-
-    move_left(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Steps must be number.");
-        }
-        
-        this.y += Math.cos(this.#radians(-90)) * target;
-        this.x += Math.sin(this.#radians(-90)) * target;
-    }
-
-    move_right(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Steps must be number.");
-        }
-
-        this.move_left(-target);
-    }
-
-    rotate_clockwise(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Degrees must be number.");
-        }
-
-        this.#rotate -= target;
-    }
-
-    rotate_counterclockwise(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Degrees must be number.");
-        }
-
-        this.#rotate += target;
-    }
-
-    rotate_top(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Degrees must be number.");
-        }
-
-        this.#head_rotate += target;
-    }
-
-    rotate_bottom(target = 1) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Degrees must be number.");
-        }
-
-        this.#head_rotate -= target;
-    }
-
-    get as_string() {
-        let dump = "";
-        dump += "X: " + this.x + "\n";
-        dump += "Y: " + this.y + "\n";
-        dump += "Z: " + this.z + "\n";
-        dump += "ROTATE: " + this.rotate;
-        dump += "HEAD ROTATE: " + this.head_rotate;
-
-        return dump;
-    }
-}
-
-export { coordinates };

assets/core.js

@@ -1,28 +0,0 @@
-import { color_mode } from "./color-mode.js";
-import { push } from "./push.js";
-import { material_icon } from "./icons.js";
-import { scene } from "./scene.js";
-import { scene_ui } from "./scene-ui.js";
-import { room } from "./room.js";
-
-document.addEventListener("DOMContentLoaded", () => {
-    const app = document.querySelector(".app");
-    const colors_state = new color_mode(app);
-    const colors_changer = push("change-color", () => {
-        colors_state.reverse();
-    }, (target) => {
-        target.innerText = "";
-        target.appendChild(material_icon("invert_colors"));
-    });
-
-    const space = new scene(room);
-    const controls = new scene_ui(space);
-
-    space.background = 0x303030;
-
-    app.appendChild(space.canvas);
-    app.appendChild(controls.box);
-    app.appendChild(colors_changer);
-
-    space.run();
-});

assets/factor.js

@@ -1,23 +0,0 @@
-import * as three from "three-js";
-
-class factor {
-    #mesh;
-
-    constructor(mesh) {
-        if (!(mesh instanceof three.Object3D)) {
-            throw new TypeError("Must initialize with Object3D.");
-        }
-
-        this.#mesh = mesh;
-    }
-
-    get mesh() {
-        return this.#mesh;
-    }
-
-    loop() {
-        return null;
-    }
-}
-
-export { factor }

assets/functional_factor.js

@@ -1,33 +0,0 @@
-import * as three from "three-js";
-import { factor } from "./factor.js";
-
-class functional_factor extends factor {
-    #animation;
-
-    constructor(init, animation = null) {
-        if (typeof (init) !== "function") {
-            throw new TypeError("Init must be an function.");
-        }
-
-        if (animation !== null && typeof (animation) !== "function") {
-            throw new TypeError("Animation could only be null or function.");
-        }
-
-        const mesh = init();
-
-        if (!(mesh instanceof three.Object3D)) {
-            throw new TypeError("Factor initializer must return Object3D.");
-        }
-
-        super(mesh);
-        this.#animation = animation;
-    }
-
-    loop() {
-        if (this.#animation !== null) {
-            this.#animation(this.mesh);
-        }
-    }
-}
-
-export { functional_factor };

assets/icons.js

@@ -1,14 +0,0 @@
-const material_icon = (name) => {
-    if (typeof(name) !== "string") {
-        throw new TypeError("Name of the icon must be string.");
-    }
-
-    const target = document.createElement("span");
-    
-    target.classList.add("material-symbols-outlined");
-    target.innerText = name;
-
-    return target;
-};
-
-export { material_icon };

assets/moving.js

@@ -1,77 +0,0 @@
-class move_direction {
-    static get add() {
-        return 1;
-    }
-
-    static get stop() {
-        return 0;
-    }
-
-    static get sub() {
-        return -1;
-    }
-
-    static contains(target) {
-        if (target === move_direction.add) return true;
-        if (target === move_direction.stop) return true;
-        if (target === move_direction.sub) return true;
-    
-        return false;
-    }
-}
-
-class moving {
-    #x;
-    #y;
-    #z;
-
-    constructor() {
-        this.#x = 0;
-        this.#y = 0;
-        this.#z = 0;
-    }
-
-    get x() {
-        return this.#x;
-    }
-
-    get y() {
-        return this.#y;
-    }
-
-    get z() {
-        return this.#z;
-    }
-
-    set x(target) {
-        if (!move_direction.contains(target)) {
-            throw new TypeError("New direction must be from move direction.");
-        }
-
-        this.#x = target;
-    }
-
-    set y(target) {
-        if (!move_direction.contains(target)) {
-            throw new TypeError("New direction must be from move direction.");
-        }
-
-        this.#y = target;
-    }
-
-    set z(target) {
-        if (!move_direction.contains(target)) {
-            throw new TypeError("New direction must be from move direction.");
-        }
-
-        this.#z = target;
-    }
-
-    stop() {
-        this.x = move_direction.stop;
-        this.y = move_direction.stop;
-        this.z = move_direction.stop;
-    }
-}
-
-export { moving, move_direction }

assets/position.js

@@ -1,63 +0,0 @@
-class position {
-    #x;
-    #y;
-    #z;
-
-    constructor(x = 0, y = 0, z = 0) {
-        this.x = x;
-        this.y = y;
-        this.z = z;
-    }
-
-    set x(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("X cord must be an number.");
-        }
-
-        this.#x = target;
-    }
-
-    set y(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Y cord must be an number.");
-        }
-
-        this.#y = target;
-    }
-    
-    set z(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Z cord must be an number.");
-        }
-
-        this.#z = target;
-    }
-
-    get x() {
-        return this.#x;
-    }
-
-    get y() {
-        return this.#y;
-    }
-
-    get z() {
-        return this.#z;
-    }
-
-    compare(target) {
-        if (!(target instanceof position)) {
-            throw new TypeError("Can only compare position with position.");   
-        }
-
-        const result = new position();
-
-        result.x = target.x - this.x;
-        result.y = target.y - this.y;
-        result.z = target.z - this.z;
-
-        return result;
-    }
-}
-
-export { position };

assets/push.js

@@ -1,38 +0,0 @@
-const push = (name, action, customisation = null) => {
-    if (action !== null && typeof(action) !== "function") {
-        throw new TypeError("Action must be an function.");
-    }
-
-    if (typeof(name) !== "string") {
-        throw new TypeError("Name of the push must be string.");
-    }
-
-    if (customisation !== null && typeof(customisation) !== "function") {
-        throw new TypeError("Customisation must be null or function");
-    }
-
-    const target = document.createElement("button");
-    
-    target.type = "button";
-    target.name = name;
-    target.id = "push-" + name;
-    
-    target.innerText = name
-        .toUpperCase()
-        .replaceAll("-", " ")
-        .replaceAll("_", " ");
-
-    target.classList.add("push");
-    
-    if (action !== null) {
-        target.addEventListener("click", action);
-    }
-
-    if (customisation) {
-        customisation(target);
-    }
-
-    return target;
-};
-
-export { push };

assets/render-engine.js

@@ -1,140 +0,0 @@
-import * as three from "three-js";
-import { actor } from "./actor.js";
-import { factor } from "./factor.js";
-
-class render_engine {
-    #renderer;
-    #scene;
-    #camera;
-    #canvas;
-    #actors;
-    #player;
-    #looped;
-
-    constructor(canvas, context, player) {
-        if (!(canvas instanceof HTMLCanvasElement)) {
-            throw new TypeError("Canvas must be an HTMLCanvasElement.");
-        }
-
-        if (!(context instanceof WebGL2RenderingContext)) {
-            throw new TypeError("Context must be WebGL RenderingContext.");
-        }
-
-        if (!(player instanceof actor)) {
-            throw new TypeError("Player must be an actor.");
-        }
-
-        this.#actors = new Array();
-        this.#player = player;
-        this.#canvas = canvas;
-        this.#scene = new three.Scene();
-        this.#camera = new three.PerspectiveCamera(75, 1, 0.1, 1000);
-
-        this.#renderer = new three.WebGLRenderer({ 
-            canvas: this.#canvas,
-            context: context
-        });
-
-        this.#renderer.shadowMap.enable = true;
-        this.#renderer.shadowMap.type = three.BasicShadowMap;
-   
-        this.#resize_canvas();
-        this.#update_camera();
-
-        window.addEventListener("resize", () => {
-            this.#resize_canvas();
-            this.#update_camera();
-        });
-    }
-
-    get player() {
-        return this.#player;
-    }
-
-    get canvas() {
-        return this.#canvas;
-    }
-
-    set background(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Background must be an number.");
-        }
-
-        this.#scene.background = target;
-    }
-
-    get background() {
-        return this.#scene.background;
-    }
-
-    #resize_canvas() {
-        this.#canvas.width = window.innerWidth;
-        this.#canvas.height = window.innerHeight;
-
-        this.#renderer.setSize(this.#canvas.width, this.#canvas.height);
-    }
-
-    #update_camera() {
-        this.#camera.aspect = this.#canvas.width / this.#canvas.height;
-        this.#camera.updateProjectionMatrix();
-    }
-
-    run() {
-        this.#looped = true;
-        this.#loop();
-    }
-
-    stop() {
-        this.#looped = false;
-    }
-
-    #loop() {
-        if (!this.#looped) {
-            return;
-        }
-
-        const start = performance.now();
-        this.#render();
-        const stop = performance.now();
-        const tooked = stop - start;
-        const new_frame = 1000 / 60 - tooked;
-
-        if (new_frame <= 0) {
-            setTimeout(() => { this.#loop(); }, 1);
-            return;
-        } 
-
-        setTimeout(() => { this.#loop(); }, new_frame);
-    }
-
-    add_factor(target) {
-        if (!(target instanceof factor)) {
-            throw new TypeError("New factor must be in factor class.");
-        }
-
-        this.#actors.push(target);
-        this.#scene.add(target.mesh);
-    }
-
-    #sync_camera() {
-        this.#player.update();
-
-        this.#camera.position.x = this.#player.x;
-        this.#camera.position.z = this.#player.y;
-        
-        this.#camera.rotation.y 
-        = three.MathUtils.degToRad(this.#player.rotate);
-    }
-
-    #render() {
-        this.#sync_camera();
-
-        this.#actors.forEach(actor => {
-            actor.loop();
-        });
-
-        this.#renderer.render(this.#scene, this.#camera);
-    }
-}
-
-export { render_engine };

assets/room.js

@@ -1,50 +0,0 @@
-import * as three from "three-js";
-import { functional_factor } from "./functional_factor.js";
-
-const room = (space) => {
-    const cube = new functional_factor(() => {
-        const material = new three.MeshStandardMaterial({
-            color: 0xA000A0
-        });
-
-        const geometry = new three.BoxGeometry(1, 1, 1);
-        const mesh = new three.Mesh(geometry, material);
-
-        mesh.position.x = 10;
-        mesh.position.z = -10;
-        mesh.position.y = 1;
-
-        return mesh;
-    }, (item) => {
-        item.rotation.x += 0.01;    
-    });
-
-    const light = new functional_factor(() => {
-        const light = new three.HemisphereLight(0x707070);
-        
-        light.position.x = -10;
-        light.position.z = 10;
-        light.position.y = 10;
-
-        return light;
-    }, (item) => {
-        if (item.rotation.x == 0) {
-            item.position.y += 0.1;
-        } else {
-            item.position.y -= 0.1;
-        }
-
-        if (item.position.y > 10) {
-            item.rotation.x = 0.1;
-        }
-
-        if (item.position.y < 0) {
-            item.rotation.x = 0;
-        }
-    });
-
-    space.add_factor(cube);
-    space.add_factor(light);
-};
-
-export { room };

assets/scene-ui.js

@@ -1,168 +0,0 @@
-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";
-import { move_direction } from "./moving.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.y = move_direction.add; }
-        );
-        
-        this.#step_back = this.#create_push(
-            "back", "arrow_drop_down",
-            (player) => { player.movement.y = move_direction.sub; }
-        );
-
-        this.#step_left = this.#create_push(
-            "left", "arrow_left",
-            (player) => { player.movement.x = move_direction.sub; }
-        );
-
-        this.#step_right = this.#create_push(
-            "right", "arrow_right", 
-            (player) => { player.movement.x = move_direction.add; }
-        );
-
-        this.#rotate_clockwise = this.#create_push(
-            "clockwise", "rotate_right", 
-            (player) => { player.rotation.z = move_direction.add; }
-        );
-
-        this.#rotate_countclockwise = this.#create_push(
-            "countclockwise", "rotate_left", 
-            (player) => { player.rotation.z = move_direction.sub; }
-        );
-
-        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.y = move_direction.add;
-                    break;
-                
-                case "s":
-                    this.#worker.player.movement.y = move_direction.sub;
-                    break;
-
-                case "d":
-                    this.#worker.player.movement.x = move_direction.add;
-                    break;
-
-                case "a":
-                    this.#worker.player.movement.x = move_direction.sub;
-                    break;
-
-                default:
-                    break;
-            }
-        });
-    
-        document.addEventListener("keyup", (action) => {
-            switch (action.key) {
-                case "w":
-                case "s":
-                    this.#worker.player.movement.y = move_direction.stop;
-                    break;
-
-                case "a":
-                case "d":
-                    this.#worker.player.movement.x = move_direction.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.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 };

assets/scene.js

@@ -1,27 +0,0 @@
-import { actor } from "./actor.js";
-import { render_engine } from "./render-engine.js"
-
-class scene extends render_engine {
-    constructor(initializer = null) {
-        if (initializer !== null && typeof(initializer) !== "function") {
-            throw new TypeError("Initializer or function.");
-        }
-
-        const player = new actor();
-        const canvas = document.createElement("canvas");
-        const context = canvas.getContext("webgl2");
-
-        if (!context) {
-            throw new TypeError("Browser does not support WebGL.");
-        }
-
-        canvas.classList.add("space-render");
-        super(canvas, context, player);
-
-        if (initializer) {
-            initializer(this);
-        }
-    }
-}
-
-export { scene };