From a797e82a6814fb285cd6ad5ca71cfdee9807032d Mon Sep 17 00:00:00 2001 From: ari melody Date: Fri, 14 Mar 2025 16:26:30 +0000 Subject: [PATCH] waow i really like doing config overhauls don't i + cursor improvements --- public/script/config.js | 122 ++++++++++++++++++++++++++++++++-------- public/script/cursor.js | 122 ++++++++++++++++++++++++++++------------ public/style/cursor.css | 26 ++++++++- 3 files changed, 208 insertions(+), 62 deletions(-) diff --git a/public/script/config.js b/public/script/config.js index 2bb33a6..1ab8b5a 100644 --- a/public/script/config.js +++ b/public/script/config.js @@ -1,33 +1,107 @@ -const DEFAULT_CONFIG = { - crt: false -}; -const config = (() => { - let saved = localStorage.getItem("config"); - if (saved) { - const config = JSON.parse(saved); - setCRT(config.crt || DEFAULT_CONFIG.crt); - return config; +const ARIMELODY_CONFIG_NAME = "arimelody.me-config"; + +class Config { + _crt = false; + _cursor = false; + _cursorFunMode = false; + + /** @type Map> */ + #listeners = new Map(); + + constructor(values) { + function thisOrElse(values, name, defaultValue) { + if (values === null) return defaultValue; + if (values[name] === undefined) return defaultValue; + return values[name]; + } + + this.#listeners.set('crt', new Array()); + this.crt = thisOrElse(values, 'crt', false); + this.#listeners.set('cursor', new Array()); + this.cursor = thisOrElse(values, 'cursor', false); + this.#listeners.set('cursorFunMode', new Array()); + this.cursorFunMode = thisOrElse(values, 'cursorFunMode', false); + this.save(); } - localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG)); - return DEFAULT_CONFIG; -})(); + /** + * Appends a listener function to be called when the config value of `name` + * is changed. + */ + addListener(name, callback) { + const callbacks = this.#listeners.get(name); + if (!callbacks) return; + callbacks.push(callback); + } -function saveConfig() { - localStorage.setItem("config", JSON.stringify(config)); + /** + * 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; + + 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; - setCRT(config.crt); - saveConfig(); }); -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"; -} +window.config = config; +export default config; diff --git a/public/script/cursor.js b/public/script/cursor.js index 94f1a8e..a1df6bb 100644 --- a/public/script/cursor.js +++ b/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 */ 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"); - element.classList.add("cursor"); - element.id = "cursor" + id; + const element = document.createElement('i'); + element.classList.add('cursor'); + 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"); - char.className = "char"; + const char = document.createElement('p'); + 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.top = this.ry + "px"; + this.#element.style.left = this.rx + '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"); - char.className = "funchar"; + const char = document.createElement('i'); + char.className = 'funchar'; char.innerText = text; - char.style.left = x + "px"; - char.style.top = y + "px"; + char.style.left = x + '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.top = this.y + "px"; + this.element.style.left = (this.x - window.scrollX) + '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) { - myCursor.print(""); + if (!config.cursorFunMode) { + 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; - cursorContainer = document.createElement("div"); - cursorContainer.id = "cursors"; + if (running) throw new Error('Only one instance of Cursor can run at a time.'); + running = true; + + 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("keyup", handleKeyUp); + + document.addEventListener('mousemove', handleMouseMove); + 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); - document.removeEventListener("keydown", handleKeyDown); - document.removeEventListener("keyup", handleKeyUp); + if (!running) return; + + 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; } -cursorSetup(); +if (config.cursor === true) { + cursorSetup(); +} + +config.addListener('cursor', enabled => { + if (enabled === true) + cursorSetup(); + else + cursorDestroy(); +}); diff --git a/public/style/cursor.css b/public/style/cursor.css index 477e525..e53cee5 100644 --- a/public/style/cursor.css +++ b/public/style/cursor.css @@ -13,9 +13,11 @@ font-size: 10px; font-weight: bold; white-space: nowrap; +} - user-select: none; - pointer-events: none; +#cursors i.cursor.click { + 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; + } +}