Rework of the moving, rotating and add color-mode save.

assets/actor.js

@@ -1,21 +1,19 @@
 import { coordinates } from "./coordinates.js";
 import { position } from "./position.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 { moving } from "./moving.js";
+import { rotating } from "./rotating.js";
 
 class actor extends coordinates {
-    #moving;
-    #rotating;
+    #movement;
+    #rotation;
     #speed;
 
     constructor() {
         super();
 
         this.#speed = 0.25;    
-        this.#moving = moving_directions.stop;
-        this.#rotating = moving_directions.stop;
+        this.#movement = new moving();
+        this.#rotation = new rotating();
     }
 
     set speed(target) {
@@ -43,28 +41,12 @@ class actor extends coordinates {
         this.rotate_clockwise(rotate);
     }
 
-    set moving(target) {
-        if (!is_moving_direction(target)) {
-            throw new TypeError("Direction must be in directions.");
-        }
-
-        this.#moving = target;
-    }
-
-    get moving() {
-        return this.#moving;
-    }
-
-    set rotating(target) {
-        if (!is_rotating_direction(target)) {
-            throw new TypeError("Direction must be in directions.");
-        }
-
-        this.#rotating = target;
+    get movement() {
+        return this.#movement;
     }
 
-    get rotating() {
-        return this.#rotating;
+    get rotation() {
+        return this.#rotation;
     }
 
     update() {
@@ -73,41 +55,20 @@ class actor extends coordinates {
     }
 
     #update_rotation() {
-        switch (this.#rotating) {
-            case rotating_directions.clockwise:
-                this.rotate_clockwise(this.#speed * 10);
-                return;
-
-            case rotating_directions.counterclockwise:
-                this.rotate_counterclockwise(this.#speed * 10);
-                return;
+        if (this.rotation.is_right) {
+            this.rotate_clockwise(this.#speed * 10);
+        }
 
-            default:
-                return;
+        if (this.rotation.is_left) {
+            this.rotate_counterclockwise(this.#speed * 10);
         }
     }
 
     #update_position() {
-        switch (this.#moving) {
-            case moving_directions.front:
-                this.move_front(this.#speed);
-                return;
-
-            case moving_directions.back:
-                this.move_back(this.#speed);
-                return;
-
-            case moving_directions.left:
-                this.move_left(this.#speed);
-                return;
-
-            case moving_directions.right:
-                this.move_right(this.#speed);
-                return;
-
-            default:
-                return;
-        }
+        if (this.movement.is_front) this.move_front(this.#speed);
+        if (this.movement.is_back) this.move_back(this.#speed);
+        if (this.movement.is_left) this.move_left(this.#speed);
+        if (this.movement.is_right) this.move_right(this.#speed);
     }
 }
 

assets/color-mode.js

@@ -1,6 +1,6 @@
 const color_modes = Object.freeze({
-    DARK: true,
-    LIGHT: false,
+    DARK: "dark",
+    LIGHT: "light",
 })
 
 class color_mode {
@@ -35,13 +35,27 @@ class color_mode {
             throw new TypeError("Default color mode must be color modes.");
         }
 
-        this.#current = defaults;
+        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;
     }
@@ -55,16 +69,14 @@ class color_mode {
         update();
     }
 
-    reverse(now = true) {
+    reverse() {
         if (this.#current === color_modes.DARK) {
             this.#current = color_modes.LIGHT
         } else {
             this.#current = color_modes.DARK;
         }
 
-        if (now) {
-            this.update();
-        }
+        this.update();
     }
 
     update() {
@@ -73,6 +85,8 @@ class color_mode {
         const lightmode = this.#light_class;
         const current = this.#current;
 
+        this.#save_mode();
+
         if (app.classList.contains(darkmode)) {
             app.classList.remove(darkmode);
         }
@@ -86,10 +100,8 @@ class color_mode {
             return;
         }
 
-        if (current === color_modes.LIGHT) {
-            app.classList.add(lightmode);
-        }
+        app.classList.add(lightmode);
     }
 }
 
-export { color_mode };
+export { color_mode, color_modes };

assets/directions.js

@@ -1,30 +0,0 @@
-const moving_directions = Object.freeze({
-    front: "front",
-    back: "back",
-    left: "left",
-    right: "right",
-    stop: "stop"
-});
-
-const rotating_directions = Object.freeze({
-    clockwise: "clockwise",
-    counterclockwise: "counterclockwise",
-    top: "top",
-    bottom: "bottom",
-    stop: "stop"
-});
-
-const is_moving_direction = (target) => {
-    return Object.values(moving_directions).includes(target);
-}
-
-const is_rotating_direction = (target) => {
-    return Object.values(rotating_directions).includes(target);
-}   
-
-export { 
-    moving_directions, 
-    is_moving_direction,  
-    rotating_directions, 
-    is_rotating_direction
-};

assets/moving.js

@@ -0,0 +1,71 @@
+class moving {
+    #front_back;
+    #left_right;
+
+    static get left() {
+        return -1;
+    }
+
+    static get right() {
+        return 1;
+    }
+
+    static get front() {
+        return 1;
+    }
+
+    static get back() {
+        return -1;
+    }
+
+    constructor() {
+        this.stop();
+    }
+
+    stop() {
+        this.#left_right = 0;
+        this.#front_back = 0;
+    }
+
+    add_left() {
+        this.#left_right = moving.left;
+    }
+
+    add_right() {
+        this.#left_right = moving.right;
+    }
+
+    add_front() {
+        this.#front_back = moving.front;
+    }
+
+    add_back() {
+        this.#front_back = moving.back;
+    }
+
+    stop_front_back() {
+        this.#front_back = 0;
+    }
+
+    stop_left_right() {
+        this.#left_right = 0;
+    }
+
+    get is_back() {
+        return this.#front_back === moving.back;
+    }
+
+    get is_front() {
+        return this.#front_back === moving.front;
+    }
+
+    get is_left() {
+        return this.#left_right === moving.left;
+    }
+
+    get is_right() {
+        return this.#left_right === moving.right;
+    }
+}
+
+export { moving }

assets/render-engine.js

@@ -60,7 +60,6 @@ class render_engine {
 
     run() {
         this.#init();
-        //this.#renderer.setAnimationLoop(() => { this.#render(); });
         this.#loop();
     }
 

assets/rotating.js

@@ -0,0 +1,71 @@
+class rotating {
+    #sideways;
+    #up_down;
+
+    static get top() {
+        return 1;
+    }
+
+    static get bottom() {
+        return -1;
+    }   
+
+    static get left() {
+        return -1;
+    }
+
+    static get right() {
+        return 1;
+    }
+
+    constructor() {
+        this.stop();
+    }
+
+    stop() {
+        this.#sideways = 0;
+        this.#up_down = 0;
+    }
+
+    add_top() {
+        this.#up_down = rotating.top;
+    }
+
+    add_bottom() {
+        this.#up_down = rotating.bottom;
+    }
+
+    add_left() {
+        this.#sideways = rotating.left;
+    }
+
+    add_right() {
+        this.#sideways = rotating.right;
+    }
+
+    stop_sideways() {
+        this.#sideways = 0;
+    }
+
+    stop_up_down() {
+        this.#up_down = 0;
+    }
+
+    get is_left() {
+        return this.#sideways === rotating.left;
+    }
+
+    get is_right() {
+        return this.#sideways === rotating.right;
+    }
+
+    get is_top() {
+        return this.#up_down === rotating.top;
+    }   
+
+    get is_bottom() {
+        return this.#up_down === rotating.bottom;
+    }
+}
+
+export { rotating }

assets/scene-ui.js

@@ -2,10 +2,6 @@ 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 {
@@ -28,29 +24,33 @@ class scene_ui {
         this.#worker = worker;
 
         this.#step_front = this.#create_push(
-            "front", "arrow_drop_up", moving_directions.front
+            "front", "arrow_drop_up", 
+            (player) => { player.movement.add_front(); }
         );
         
         this.#step_back = this.#create_push(
-            "back", "arrow_drop_down", moving_directions.back
+            "back", "arrow_drop_down",
+            (player) => { player.movement.add_back(); }
         );
 
         this.#step_left = this.#create_push(
-            "left", "arrow_left", moving_directions.left
+            "left", "arrow_left",
+            (player) => { player.movement.add_left(); }
         );
 
         this.#step_right = this.#create_push(
-            "right", "arrow_right", moving_directions.right
+            "right", "arrow_right", 
+            (player) => { player.movement.add_right(); }
         );
 
         this.#rotate_clockwise = this.#create_push(
             "clockwise", "rotate_right", 
-            rotating_directions.clockwise
+            (player) => { player.rotation.add_right(); }
         );
 
         this.#rotate_countclockwise = this.#create_push(
             "countclockwise", "rotate_left", 
-            rotating_directions.counterclockwise
+            (player) => { player.rotation.add_left(); }
         );
 
         this.#setup_stopers();
@@ -80,19 +80,19 @@ class scene_ui {
         document.addEventListener("keydown", (action) => {
             switch (action.key) {
                 case "w":
-                    this.#worker.player.moving = moving_directions.front;
+                    this.#worker.player.movement.add_front();
                     break;
                 
                 case "s":
-                    this.#worker.player.moving = moving_directions.back;
+                    this.#worker.player.movement.add_back();
                     break;
 
                 case "d":
-                    this.#worker.player.moving = moving_directions.right;
+                    this.#worker.player.movement.add_right();
                     break;
 
                 case "a":
-                    this.#worker.player.moving = moving_directions.left;
+                    this.#worker.player.movement.add_left();
                     break;
 
                 default:
@@ -104,9 +104,12 @@ class scene_ui {
             switch (action.key) {
                 case "w":
                 case "s":
+                    this.#worker.player.movement.stop_front_back();
+                    break;
+
                 case "a":
                 case "d":
-                    this.#worker.player.moving = moving_directions.stop;
+                    this.#worker.player.movement.stop_left_right();
                     break;
 
                 default:
@@ -141,8 +144,8 @@ class scene_ui {
 
     #setup_stopers() {
         const stoper = () => {
-            this.#worker.player.moving = moving_directions.stop;
-            this.#worker.player.rotating = rotating_directions.stop;
+            this.#worker.player.movement.stop();
+            this.#worker.player.rotation.stop();
         };
 
         document.addEventListener("mouseup", stoper);
@@ -150,23 +153,13 @@ class scene_ui {
     }
 
     #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;
-                });
-            }
+        
+            target.addEventListener("mousedown", () => {
+                move(this.#worker.player);
+            });
         });
     }
 }

assets/scene.js

@@ -1,4 +1,3 @@
-import { coordinates } from "./coordinates.js";
 import { actor } from "./actor.js";
 import { render_engine } from "./render-engine.js"
 

theme/push.css

@@ -1,5 +1,5 @@
 .push {
-    background-color: transparent;
+    background-color: var(--background-color);
     color: var(--font-color);
     border: var(--font-color) 2px solid;
     border-radius: 10px;
@@ -8,7 +8,8 @@
 
     transition:
         border-color 0.5s,
-        color 0.5s;
+        color 0.5s,
+        background-color 0.5s;
 }
 
 .push:hover {