waow i really like doing config overhauls don't i
+ cursor improvements
This commit is contained in:
parent
739390d7f5
commit
a797e82a68
GPG key ID:
60B5F0386E3DDB7E
3 changed files with 208 additions and 62 deletions
|
|
@ -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<string, Array<Function>> */
|
||||
#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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue