ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

waow i really like doing config overhauls don't i

Browse source 
+ cursor improvements
This commit is contained in:
ari melody 2025-03-14 16:26:30 +00:00
parent 739390d7f5
commit a797e82a68
Signed by: ari
GPG key ID: 60B5F0386E3DDB7E
3 changed files with 208 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

122
public/script/cursor.js
View file

@ -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();
});