waow i really like doing config overhauls don't i

+ cursor improvements

public/script/config.js

@@ -1,33 +1,107 @@
-const DEFAULT_CONFIG = {
+const ARIMELODY_CONFIG_NAME = "arimelody.me-config";
-    crt: false
+
-};
+class Config {
-const config = (() => {
+    _crt = false;
-    let saved = localStorage.getItem("config");
+    _cursor = false;
-    if (saved) {
+    _cursorFunMode = false;
-        const config = JSON.parse(saved);
+
-        setCRT(config.crt || DEFAULT_CONFIG.crt);
+    /** @type Map<string, Array<Function>> */
-        return config;
+    #listeners = new Map();
+
+    constructor(values) {
+        function thisOrElse(values, name, defaultValue) {
+            if (values === null) return defaultValue;
+            if (values[name] === undefined) return defaultValue;
+            return values[name];
         }
 
-    localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG));
+        this.#listeners.set('crt', new Array());
-    return DEFAULT_CONFIG;
+        this.crt = thisOrElse(values, 'crt', false);
-})();
+        this.#listeners.set('cursor', new Array());
-
+        this.cursor = thisOrElse(values, 'cursor', false);
-function saveConfig() {
+        this.#listeners.set('cursorFunMode', new Array());
-    localStorage.setItem("config", JSON.stringify(config));
+        this.cursorFunMode = thisOrElse(values, 'cursorFunMode', false);
+        this.save();
     }
 
-document.getElementById("toggle-crt").addEventListener("click", () => {
+    /**
-    config.crt = !config.crt;
+     * Appends a listener function to be called when the config value of `name`
-    setCRT(config.crt);
+     * is changed.
-    saveConfig();
+     */
-});
+    addListener(name, callback) {
+        const callbacks = this.#listeners.get(name);
+        if (!callbacks) return;
+        callbacks.push(callback);
+    }
+
+    /**
+     * Removes the listener function `callback` from the list of callbacks when
+     * the config value of `name` is changed.
+     */
+    removeListener(name, callback) {
+        const callbacks = this.#listeners.get(name);
+        if (!callbacks) return;
+        callbacks.set(name, callbacks.filter(c => c !== callback));
+    }
+
+    save() {
+        localStorage.setItem(ARIMELODY_CONFIG_NAME, JSON.stringify({
+            crt: this.crt,
+            cursor: this.cursor,
+            cursorFunMode: this.cursorFunMode
+        }));
+    }
+
+    get crt() { return this._crt }
+    set crt(/** @type boolean */ enabled) {
+        this._crt = enabled;
 
-function setCRT(/** @type boolean */ enabled) {
         if (enabled) {
             document.body.classList.add("crt");
         } else {
             document.body.classList.remove("crt");
         }
         document.getElementById('toggle-crt').className = enabled ? "" : "disabled";
+
+        this.#listeners.get('crt').forEach(callback => {
+            callback(this._crt);
+        })
+
+        this.save();
     }
+
+    get cursor() { return this._cursor }
+    set cursor(/** @type boolean */ value) {
+        this._cursor = value;
+        this.#listeners.get('cursor').forEach(callback => {
+            callback(this._cursor);
+        })
+        this.save();
+    }
+
+    get cursorFunMode() { return this._cursorFunMode }
+    set cursorFunMode(/** @type boolean */ value) {
+        this._cursorFunMode = value;
+        this.#listeners.get('cursorFunMode').forEach(callback => {
+            callback(this._cursorFunMode);
+        })
+        this.save();
+    }
+}
+
+const config = (() => {
+    let values = null;
+
+    const saved = localStorage.getItem(ARIMELODY_CONFIG_NAME);
+    if (saved)
+        values = JSON.parse(saved);
+
+    return new Config(values);
+})();
+
+document.getElementById("toggle-crt").addEventListener("click", () => {
+    config.crt = !config.crt;
+});
+
+window.config = config;
+export default config;

public/script/cursor.js

@@ -1,7 +1,10 @@
+import config from './config.js';
+
 const CURSOR_TICK_RATE = 1000/30;
 const CURSOR_LERP_RATE = 1/100;
 const CURSOR_CHAR_MAX_LIFE = 5000;
 const CURSOR_MAX_CHARS = 50;
+
 /** @type HTMLElement */
 let cursorContainer;
 /** @type Cursor */
@@ -11,6 +14,7 @@ let cursors = new Map();
 /** @type Array<FunChar> */
 let chars = new Array();
 
+let running = false;
 let lastCursorUpdateTime = 0;
 let lastCharUpdateTime = 0;
 
@@ -42,16 +46,16 @@ class Cursor {
         this.rx = x;
         this.ry = y;
 
-        const element = document.createElement("i");
+        const element = document.createElement('i');
-        element.classList.add("cursor");
+        element.classList.add('cursor');
-        element.id = "cursor" + id;
+        element.id = 'cursor' + id;
         const colour = randomColour();
         element.style.borderColor = colour;
         element.style.color = colour;
-        element.innerText = "0x" + navigator.userAgent.hashCode();
+        element.innerText = '0x' + navigator.userAgent.hashCode();
 
-        const char = document.createElement("p");
+        const char = document.createElement('p');
-        char.className = "char";
+        char.className = 'char';
         element.appendChild(char);
 
         this.#element = element;
@@ -61,6 +65,7 @@ class Cursor {
 
     destroy() {
         this.#element.remove();
+        this.#char.remove();
     }
 
     /**
@@ -78,8 +83,8 @@ class Cursor {
     update(deltaTime) {
         this.rx += (this.x - this.rx) * CURSOR_LERP_RATE * deltaTime;
         this.ry += (this.y - this.ry) * CURSOR_LERP_RATE * deltaTime;
-        this.#element.style.left = this.rx + "px";
+        this.#element.style.left = this.rx + 'px';
-        this.#element.style.top = this.ry + "px";
+        this.#element.style.top = this.ry + 'px';
     }
 
     /**
@@ -89,6 +94,16 @@ class Cursor {
         if (text.length > 1) return;
         this.#char.innerText = text;
     }
+
+    /**
+     * @param {boolean} active 
+     */
+    click(active) {
+        if (active)
+            this.#element.classList.add('click');
+        else
+            this.#element.classList.remove('click');
+    }
 }
 
 class FunChar {
@@ -114,11 +129,11 @@ class FunChar {
         this.ra = this.r * 0.01;
         this.life = 0;
 
-        const char = document.createElement("i");
+        const char = document.createElement('i');
-        char.className = "funchar";
+        char.className = 'funchar';
         char.innerText = text;
-        char.style.left = x + "px";
+        char.style.left = x + 'px';
-        char.style.top = y + "px";
+        char.style.top = y + 'px';
         char.style.transform = `rotate(${this.r}deg)`;
         this.element = char;
         cursorContainer.appendChild(this.element);
@@ -130,9 +145,9 @@ class FunChar {
     update(deltaTime) {
         this.life += deltaTime;
         if (this.life > CURSOR_CHAR_MAX_LIFE ||
-            this.y > window.outerHeight ||
+            this.y > document.body.clientHeight ||
             this.x < 0 ||
-            this.x > window.outerWidth
+            this.x > document.body.clientWidth
         ) {
             this.destroy();
             return;
@@ -143,8 +158,8 @@ class FunChar {
         this.r += this.ra * deltaTime;
         this.ya = Math.min(this.ya + 0.0005 * deltaTime, 10);
 
-        this.element.style.left = this.x + "px";
+        this.element.style.left = (this.x - window.scrollX) + 'px';
-        this.element.style.top = this.y + "px";
+        this.element.style.top = (this.y - window.scrollY) + 'px';
         this.element.style.transform = `rotate(${this.r}deg)`;
     }
 
@@ -175,7 +190,7 @@ function randomColour() {
     const green = Math.round((min + Math.random() * range)).toString(16);
     const blue  = Math.round((min + Math.random() * range)).toString(16);
 
-    return "#" + red + green + blue;
+    return '#' + red + green + blue;
 }
 
 /**
@@ -186,18 +201,25 @@ function handleMouseMove(event) {
     myCursor.move(event.x, event.y);
 }
 
+function handleMouseDown() {
+    myCursor.click(true);
+}
+function handleMouseUp() {
+    myCursor.click(false);
+}
+
 /**
  * @param {KeyboardEvent} event
  */
 function handleKeyDown(event) {
     if (event.key.length > 1) return;
     if (event.metaKey || event.ctrlKey) return;
-    if (window.cursorFunMode === true) {
+    if (config.cursorFunMode === true) {
         const yOffset = -20;
         const accelMultiplier = 0.002;
         if (chars.length < CURSOR_MAX_CHARS)
             chars.push(new FunChar(
-                myCursor.x, myCursor.y + yOffset,
+                myCursor.x + window.scrollX, myCursor.y + window.scrollY + yOffset,
                 (myCursor.x - myCursor.rx) * accelMultiplier, (myCursor.y - myCursor.ry) * accelMultiplier,
                 event.key));
     } else {
@@ -206,8 +228,8 @@ function handleKeyDown(event) {
 }
 
 function handleKeyUp() {
-    if (!window.cursorFunMode) {
+    if (!config.cursorFunMode) {
-        myCursor.print("");
+        myCursor.print('');
     }
 }
 
@@ -215,6 +237,8 @@ function handleKeyUp() {
  * @param {number} time
  */
 function updateCursors(time) {
+    if (!running) return;
+
     const deltaTime = time - lastCursorUpdateTime;
 
     cursors.forEach(cursor => {
@@ -229,6 +253,8 @@ function updateCursors(time) {
  * @param {number} time
  */
 function updateChars(time) {
+    if (!running) return;
+
     const deltaTime = time - lastCharUpdateTime;
 
     chars.forEach(char => {
@@ -240,34 +266,60 @@ function updateChars(time) {
 }
 
 function cursorSetup() {
-    window.cursorFunMode = false;
+    if (running) throw new Error('Only one instance of Cursor can run at a time.');
-    cursorContainer = document.createElement("div");
+    running = true;
-    cursorContainer.id = "cursors";
+
+    cursorContainer = document.createElement('div');
+    cursorContainer.id = 'cursors';
     document.body.appendChild(cursorContainer);
+
     myCursor = new Cursor(0, window.innerWidth / 2, window.innerHeight / 2);
     cursors.set(0, myCursor);
-    document.addEventListener("mousemove", handleMouseMove);
+
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener("keyup", handleKeyUp);
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+
     requestAnimationFrame(updateCursors);
     requestAnimationFrame(updateChars);
+
     console.debug(`Cursor tracking @ ${window.location.pathname}`);
 }
 
 function cursorDestroy() {
-    document.removeEventListener("mousemove", handleMouseMove);
+    if (!running) return;
-    document.removeEventListener("keydown", handleKeyDown);
+
-    document.removeEventListener("keyup", handleKeyUp);
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mousedown', handleMouseDown);
+    document.removeEventListener('mouseup', handleMouseUp);
+    document.removeEventListener('keydown', handleKeyDown);
+    document.removeEventListener('keyup', handleKeyUp);
+    
+    chars.forEach(char => {
+        char.destroy();
+    });
+    chars = new Array();
     cursors.forEach(cursor => {
         cursor.destroy();
     });
     cursors.clear();
-    chars.forEach(cursor => {
-        cursor.destroy();
-    });
-    chars = new Array();
     myCursor = null;
+
+    cursorContainer.remove();
+
     console.debug(`Cursor no longer tracking.`);
+    running = false;
 }
 
+if (config.cursor === true) {
     cursorSetup();
+}
+
+config.addListener('cursor', enabled => {
+    if (enabled === true)
+        cursorSetup();
+    else
+        cursorDestroy();
+});

public/style/cursor.css

@@ -13,9 +13,11 @@
     font-size: 10px;
     font-weight: bold;
     white-space: nowrap;
+}
 
-    user-select: none;
+#cursors i.cursor.click {
-    pointer-events: none;
+    color: var(--on-background) !important;
+    border-color: var(--on-background) !important;
 }
 
 #cursors i.cursor .char {
@@ -27,7 +29,7 @@
 }
 
 #cursors .funchar {
-    position: fixed;
+    position: absolute;
     margin: 0;
 
     display: block;
@@ -37,7 +39,25 @@
     font-size: 20px;
     font-weight: bold;
     color: var(--on-background);
+}
+
+#cursors {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    z-index: 1000;
+    overflow: clip;
 
     user-select: none;
     pointer-events: none;
 }
+
+@media (prefers-color-scheme: light) {
+    #cursors i.cursor {
+        filter: saturate(5) brightness(0.8);
+        background: #fff8;
+    }
+}