777 lines
27 KiB
JavaScript
777 lines
27 KiB
JavaScript
// ── Sprinkle background ────────────────────────────
|
||
(function () {
|
||
const canvas = document.getElementById('bgCanvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
const COLORS = ['#ffd84d', '#8cbcff', '#ff9fca', '#a9e76c', '#b99cff', '#ff9d57'];
|
||
const INK = '#171717';
|
||
const COUNT = 1000; // number of sprinkles
|
||
const MIN_LEN = 12; // px
|
||
const MAX_LEN = 18; // px
|
||
const MIN_W = 4;
|
||
const MAX_W = 6;
|
||
|
||
let W, H, sprinkles;
|
||
|
||
function rand(a, b) { return a + Math.random() * (b - a); }
|
||
|
||
function resize() {
|
||
W = canvas.width = window.innerWidth;
|
||
H = canvas.height = window.innerHeight;
|
||
if (!sprinkles) init();
|
||
// Redistribute any sprinkles that landed outside new bounds
|
||
sprinkles.forEach(s => {
|
||
if (s.x > W) s.x = rand(0, W);
|
||
if (s.y > H) s.y = rand(0, H);
|
||
});
|
||
// Resizing clears the canvas; with no animation loop running, repaint it
|
||
if (reduceMotion.matches) {
|
||
cancelAnimationFrame(rafId);
|
||
rafId = requestAnimationFrame(draw);
|
||
}
|
||
}
|
||
|
||
function init() {
|
||
sprinkles = [];
|
||
for (let i = 0; i < COUNT; i++) {
|
||
sprinkles.push(makeSprinkle());
|
||
}
|
||
}
|
||
|
||
function makeSprinkle() {
|
||
return {
|
||
x: rand(0, W),
|
||
y: rand(0, H),
|
||
len: rand(MIN_LEN, MAX_LEN),
|
||
width: rand(MIN_W, MAX_W),
|
||
color: COLORS[Math.floor(Math.random() * COLORS.length)],
|
||
angle: rand(0, Math.PI * 2),
|
||
// very slow drift
|
||
vx: rand(-0.1, 0.1),
|
||
vy: rand(-0.1, 0.1),
|
||
va: rand(-0.005, 0.005), // angular velocity
|
||
alpha: 1,
|
||
};
|
||
}
|
||
|
||
function draw() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
|
||
sprinkles.forEach(s => {
|
||
ctx.save();
|
||
ctx.translate(s.x, s.y);
|
||
ctx.rotate(s.angle);
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, -s.len / 2);
|
||
ctx.lineTo(0, s.len / 2);
|
||
ctx.lineCap = 'round';
|
||
ctx.globalAlpha = s.alpha;
|
||
// Ink outline under the colored fill (sticker look): same path, two strokes
|
||
ctx.strokeStyle = INK;
|
||
ctx.lineWidth = s.width + 3;
|
||
ctx.stroke();
|
||
ctx.strokeStyle = s.color;
|
||
ctx.lineWidth = s.width;
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
|
||
// Reduced motion: sprinkles stay where they are
|
||
if (reduceMotion.matches) return;
|
||
|
||
// Drift
|
||
s.x += s.vx;
|
||
s.y += s.vy;
|
||
if (s.vx > 0.1 || s.vx < -0.1) {
|
||
s.vx *= 0.98;
|
||
}
|
||
if (s.vy > 0.1 || s.vy < -0.1) {
|
||
s.vy *= 0.98;
|
||
}
|
||
s.angle += s.va;
|
||
|
||
// Repel from cursor
|
||
const dx = s.x - mouseX;
|
||
const dy = s.y - mouseY;
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
const repelRadius = 80;
|
||
if (dist < repelRadius && dist > 0) {
|
||
const force = (repelRadius - dist) / repelRadius;
|
||
s.vx += (dx / dist) * force * 1.0;
|
||
s.vy += (dy / dist) * force * 1.0;
|
||
}
|
||
|
||
// Wrap: when a sprinkle drifts off the screen, reappear on the other side
|
||
if (s.y < -MAX_LEN) s.y = H + MAX_LEN;
|
||
if (s.y > H + MAX_LEN) s.y = -MAX_LEN
|
||
if (s.x < -MAX_LEN) s.x = W + MAX_LEN;
|
||
if (s.x > W + MAX_LEN) s.x = -MAX_LEN;
|
||
});
|
||
|
||
if (!reduceMotion.matches) rafId = requestAnimationFrame(draw);
|
||
}
|
||
|
||
// With reduced motion the sprinkles render once as a static backdrop
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
let rafId;
|
||
reduceMotion.addEventListener('change', () => {
|
||
cancelAnimationFrame(rafId);
|
||
rafId = requestAnimationFrame(draw);
|
||
});
|
||
|
||
window.addEventListener('resize', resize, { passive: true });
|
||
resize();
|
||
let mouseX = -9999, mouseY = -9999;
|
||
window.addEventListener('mousemove', (e) => {
|
||
mouseX = e.clientX;
|
||
mouseY = e.clientY;
|
||
}, { passive: true });
|
||
rafId = requestAnimationFrame(draw);
|
||
})();
|
||
|
||
|
||
// ── Nav: scroll state & active link ───────────────────────────
|
||
(function () {
|
||
const header = document.getElementById('header');
|
||
const links = document.querySelectorAll('.nav-link');
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const burger = document.getElementById('burger');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
header.classList.toggle('scrolled', window.scrollY > 24 || burger.classList.contains('open'));
|
||
|
||
let current = '';
|
||
sections.forEach(s => {
|
||
if (window.scrollY >= s.offsetTop - 100) current = s.id;
|
||
});
|
||
links.forEach(l => {
|
||
l.classList.toggle('active', l.getAttribute('href') === '#' + current);
|
||
});
|
||
}, { passive: true });
|
||
})();
|
||
|
||
|
||
// ── Mobile burger ──────────────────────────────────────────────
|
||
(function () {
|
||
const burger = document.getElementById('burger');
|
||
const navLinks = document.getElementById('navLinks');
|
||
const header = document.getElementById('header');
|
||
burger.addEventListener('click', () => {
|
||
burger.classList.toggle('open');
|
||
navLinks.classList.toggle('open');
|
||
header.classList.toggle('scrolled', burger.classList.contains('open') || window.scrollY > 24);
|
||
});
|
||
navLinks.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => {
|
||
burger.classList.remove('open');
|
||
navLinks.classList.remove('open');
|
||
header.classList.toggle('scrolled', window.scrollY > 24);
|
||
});
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Avatar spin on click ──────────────────────────────────────
|
||
(function () {
|
||
const avatar = document.querySelector('.avatar-ring');
|
||
|
||
avatar.addEventListener('click', () => {
|
||
if (avatar.classList.contains('spinning')) return;
|
||
avatar.classList.add('spinning');
|
||
});
|
||
avatar.addEventListener('animationend', () => {
|
||
avatar.classList.remove('spinning');
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Tag pill tooltips: tap toggle (touch devices only) ────────
|
||
(function () {
|
||
// Hover-capable devices already get the tooltips via :hover
|
||
if (window.matchMedia('(hover: hover)').matches) return;
|
||
|
||
const pills = [...document.querySelectorAll('[data-tip]')];
|
||
|
||
function closeAll() {
|
||
pills.forEach(p => {
|
||
p.classList.remove('tip-open');
|
||
p.setAttribute('aria-expanded', 'false');
|
||
});
|
||
}
|
||
|
||
pills.forEach(pill => {
|
||
pill.setAttribute('tabindex', '0');
|
||
pill.setAttribute('role', 'button');
|
||
pill.setAttribute('aria-expanded', 'false');
|
||
// Pseudo-element tooltips are invisible to screen readers
|
||
pill.setAttribute('aria-description', pill.dataset.tip);
|
||
|
||
pill.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
const wasOpen = pill.classList.contains('tip-open');
|
||
closeAll();
|
||
if (!wasOpen) {
|
||
pill.classList.add('tip-open');
|
||
pill.setAttribute('aria-expanded', 'true');
|
||
}
|
||
});
|
||
pill.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
pill.click();
|
||
}
|
||
});
|
||
});
|
||
|
||
document.addEventListener('click', closeAll);
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeAll();
|
||
});
|
||
})();
|
||
|
||
|
||
|
||
// ── Pepsi gallery: shuffled on load, swipe cycles through on click ─
|
||
(function () {
|
||
const COUNT = 15;
|
||
const img = document.querySelector('.pepsi-placeholder img');
|
||
if (!img) return;
|
||
const box = img.parentElement;
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
const src = (n) => `Pepsi/Pepsi-${n}.jpg`;
|
||
|
||
// Fisher–Yates shuffle of [1..COUNT]; clicks cycle through this order
|
||
const order = Array.from({ length: COUNT }, (_, i) => i + 1);
|
||
for (let i = order.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[order[i], order[j]] = [order[j], order[i]];
|
||
}
|
||
let pos = 0;
|
||
img.src = src(order[pos]);
|
||
|
||
let busy = false;
|
||
box.addEventListener('click', () => {
|
||
if (busy) return;
|
||
pos = (pos + 1) % order.length;
|
||
const next = order[pos];
|
||
|
||
if (reduceMotion.matches) {
|
||
img.src = src(next);
|
||
return;
|
||
}
|
||
|
||
busy = true;
|
||
const incoming = new Image();
|
||
incoming.src = src(next);
|
||
incoming.alt = img.alt;
|
||
incoming.draggable = false;
|
||
incoming.className = 'pepsi-incoming';
|
||
// Decode before animating so the swipe never reveals a half-loaded frame
|
||
incoming.decode().then(() => {
|
||
box.appendChild(incoming);
|
||
const opts = { duration: 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' };
|
||
img.animate(
|
||
[{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],
|
||
opts
|
||
);
|
||
incoming.animate(
|
||
[{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],
|
||
opts
|
||
).finished.then(() => {
|
||
img.src = incoming.src; // already decoded, swaps instantly
|
||
incoming.remove();
|
||
busy = false;
|
||
});
|
||
}).catch(() => { busy = false; });
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Scroll hint: appears after idling at the top of the page ──
|
||
(function () {
|
||
const hint = document.getElementById('scrollHint');
|
||
if (!hint) return;
|
||
|
||
const timer = setTimeout(() => {
|
||
if (window.scrollY <= 24) hint.classList.add('visible');
|
||
}, 3000);
|
||
|
||
// Any scroll dismisses it for the rest of the visit
|
||
window.addEventListener('scroll', () => {
|
||
clearTimeout(timer);
|
||
hint.classList.remove('visible');
|
||
}, { passive: true, once: true });
|
||
})();
|
||
|
||
|
||
// ── Job title slot machine: click the role pill ───────────────
|
||
(function () {
|
||
const pill = document.getElementById('heroRole');
|
||
if (!pill) return;
|
||
|
||
const WORDS = [
|
||
['Software', 'Backend', 'Data', 'Computer', 'Frontend', 'Full-Stack', 'Tech'],
|
||
['Developer', 'Scientist', 'Engineer', 'Enthusiast', 'Wizard'],
|
||
];
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
const slots = [...pill.querySelectorAll('.slot')];
|
||
|
||
// Width of a word in this mono font: 1ch + letter-spacing per character.
|
||
// Slots hug their current word at rest and expand to their widest word
|
||
// while spinning (the CSS width transition animates both moves).
|
||
const widthFor = (word) => `calc(${word.length}ch + ${word.length * 0.08}em)`;
|
||
slots.forEach((slot) => {
|
||
slot.style.width = widthFor(slot.textContent.trim());
|
||
});
|
||
|
||
let busy = false;
|
||
pill.addEventListener('click', () => {
|
||
if (busy) return;
|
||
busy = true;
|
||
|
||
const spins = slots.map((slot, i) => {
|
||
const list = WORDS[i];
|
||
const reel = slot.querySelector('.reel');
|
||
const from = Math.max(list.indexOf(reel.textContent.trim()), 0);
|
||
// Random pick that's never the word already showing
|
||
let target = Math.floor(Math.random() * (list.length - 1));
|
||
if (target >= from) target++;
|
||
|
||
if (reduceMotion.matches) {
|
||
reel.innerHTML = `<span>${list[target]}</span>`;
|
||
slot.style.width = widthFor(list[target]);
|
||
return Promise.resolve();
|
||
}
|
||
|
||
// Expand to fit the reel's widest word for the duration of the spin
|
||
const longest = list.reduce((a, b) => (b.length > a.length ? b : a));
|
||
slot.style.width = widthFor(longest);
|
||
|
||
// Walk the reel in list order: a couple of full revolutions, then
|
||
// land on the target (the second reel spins one revolution longer)
|
||
const steps = ((target - from + list.length) % list.length) + list.length * (2 + i);
|
||
|
||
// Build the strip top-down ending at the current word, so the column
|
||
// slides downward and words enter from above. One extra word sits
|
||
// above the target to back the overshoot.
|
||
reel.innerHTML = '';
|
||
for (let k = 0; k <= steps + 1; k++) {
|
||
const w = document.createElement('span');
|
||
w.textContent = list[(from + steps + 1 - k) % list.length];
|
||
reel.appendChild(w);
|
||
}
|
||
|
||
const h = reel.firstChild.getBoundingClientRect().height;
|
||
const land = -h; // row where the target word sits
|
||
const over = land + h * 0.35; // spin runs slightly past the stop
|
||
const anim = reel.animate(
|
||
[
|
||
{ transform: `translateY(${-(steps + 1) * h}px)` },
|
||
{ transform: `translateY(${over}px)` },
|
||
],
|
||
{ duration: 900 + i * 500, easing: 'cubic-bezier(0.15, 0.85, 0.25, 1)', fill: 'forwards' }
|
||
);
|
||
return anim.finished.then(() => {
|
||
const settle = reel.animate(
|
||
[{ transform: `translateY(${over}px)` }, { transform: `translateY(${land}px)` }],
|
||
{ duration: 200, easing: 'ease', fill: 'forwards' }
|
||
);
|
||
return settle.finished.then(() => {
|
||
reel.innerHTML = `<span>${list[target]}</span>`;
|
||
settle.cancel();
|
||
anim.cancel(); // drop the forward-filled transforms after the swap
|
||
slot.style.width = widthFor(list[target]); // shrink back to fit
|
||
});
|
||
});
|
||
});
|
||
|
||
Promise.all(spins).finally(() => { busy = false; });
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Pronoun pill: non-binary flag sweep on click ──────────────
|
||
(function () {
|
||
const pill = document.querySelector('.hero-pronouns');
|
||
if (!pill) return;
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
|
||
pill.addEventListener('click', () => {
|
||
if (reduceMotion.matches) return;
|
||
if (pill.classList.contains('waving')) return;
|
||
pill.classList.add('waving');
|
||
});
|
||
pill.addEventListener('animationend', () => {
|
||
pill.classList.remove('waving');
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Delete website (footer): flag in localStorage, serve the 404 ─
|
||
(function () {
|
||
const button = document.getElementById('deleteSite');
|
||
const dialog = document.getElementById('deleteDialog');
|
||
const confirm = document.getElementById('deleteConfirm');
|
||
const cancel = document.getElementById('deleteCancel');
|
||
if (!button || !dialog) return;
|
||
|
||
button.addEventListener('click', () => dialog.showModal());
|
||
cancel.addEventListener('click', () => dialog.close());
|
||
confirm.addEventListener('click', () => {
|
||
try { localStorage.setItem('siteDeleted', '1'); } catch (e) {}
|
||
location.replace('404.html');
|
||
});
|
||
// Click on the backdrop closes too
|
||
dialog.addEventListener('click', (e) => {
|
||
if (e.target === dialog) dialog.close();
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Icon circles spin on click, same move as the avatar ───────
|
||
(function () {
|
||
const icons = document.querySelectorAll('.skill-card-icon, .project-icon, .edu-icon, .nav-logo');
|
||
icons.forEach((icon) => {
|
||
icon.addEventListener('click', () => {
|
||
if (icon.classList.contains('spinning')) return;
|
||
icon.classList.add('spinning');
|
||
});
|
||
icon.addEventListener('animationend', () => {
|
||
icon.classList.remove('spinning');
|
||
});
|
||
});
|
||
})();
|
||
|
||
|
||
// ── D20 on "Dungeons & Dragons": a 3D die built from matrix3d ─
|
||
(function () {
|
||
const anchor = document.querySelector('.dnd-roll');
|
||
if (!anchor) return;
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
|
||
// Icosahedron in CSS coordinates (x right, y down, z toward viewer)
|
||
const R = 44; // circumradius, px
|
||
const PHI = (1 + Math.sqrt(5)) / 2;
|
||
const RAW = [
|
||
[-1, PHI, 0], [1, PHI, 0], [-1, -PHI, 0], [1, -PHI, 0],
|
||
[0, -1, PHI], [0, 1, PHI], [0, -1, -PHI], [0, 1, -PHI],
|
||
[PHI, 0, -1], [PHI, 0, 1], [-PHI, 0, -1], [-PHI, 0, 1],
|
||
];
|
||
const FACES = [
|
||
[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
|
||
[1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8],
|
||
[3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
|
||
[4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1],
|
||
];
|
||
// The standard d20 layout (per Alea Kybos' dice configuration catalog),
|
||
// embedded onto the face list above: 20 bordered by 2/8/14, opposite
|
||
// faces sum to 21, evens on 20's hemisphere and odds on 1's
|
||
const NUMBERS = [20, 2, 12, 10, 8, 18, 14, 16, 15, 17, 11, 9, 19, 1, 13, 6, 4, 3, 7, 5];
|
||
// Theme pastels the die can be cast from, one picked per roll
|
||
const PASTELS = [
|
||
[255, 216, 77], [140, 188, 255], [255, 159, 202],
|
||
[169, 231, 108], [185, 156, 255], [255, 157, 87],
|
||
];
|
||
const scale = R / Math.hypot(1, PHI);
|
||
const V = RAW.map(([x, y, z]) => [x * scale, -y * scale, z * scale]);
|
||
|
||
const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
|
||
const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
|
||
const cross = (a, b) => [
|
||
a[1] * b[2] - a[2] * b[1],
|
||
a[2] * b[0] - a[0] * b[2],
|
||
a[0] * b[1] - a[1] * b[0],
|
||
];
|
||
const norm = (a) => {
|
||
const l = Math.hypot(a[0], a[1], a[2]);
|
||
return [a[0] / l, a[1] / l, a[2] / l];
|
||
};
|
||
const mat3d = ([X, Y, Z], t) =>
|
||
`matrix3d(${X[0]},${X[1]},${X[2]},0,${Y[0]},${Y[1]},${Y[2]},0,` +
|
||
`${Z[0]},${Z[1]},${Z[2]},0,${t[0]},${t[1]},${t[2]},1)`;
|
||
|
||
let scene = null;
|
||
let die = null;
|
||
const bases = [];
|
||
const faceEls = [];
|
||
|
||
function build() {
|
||
scene = document.createElement('span');
|
||
scene.className = 'die-scene';
|
||
die = document.createElement('span');
|
||
die.className = 'die';
|
||
scene.appendChild(die);
|
||
|
||
const light = norm([-0.35, -0.5, 0.78]);
|
||
FACES.forEach((f, idx) => {
|
||
let [A, B, C] = f.map((i) => V[i]);
|
||
const G = [
|
||
(A[0] + B[0] + C[0]) / 3,
|
||
(A[1] + B[1] + C[1]) / 3,
|
||
(A[2] + B[2] + C[2]) / 3,
|
||
];
|
||
let n = norm(cross(sub(B, A), sub(C, A)));
|
||
if (dot(n, G) < 0) { // ensure the normal points outward
|
||
[B, C] = [C, B];
|
||
n = [-n[0], -n[1], -n[2]];
|
||
}
|
||
const X = norm(sub(B, A)); // face-local right
|
||
const Y = norm(cross(n, X)); // face-local down (X × Y = n, no mirroring)
|
||
bases.push([X, Y, n]);
|
||
|
||
const D = Math.hypot(...sub(B, A)); // edge length
|
||
const face = document.createElement('span');
|
||
face.className = 'die-face';
|
||
face.textContent = NUMBERS[idx];
|
||
// Real dice underline the ambiguous digits
|
||
if (NUMBERS[idx] === 6 || NUMBERS[idx] === 9) face.classList.add('die-face--mark');
|
||
const pts = [A, B, C].map((P) => {
|
||
const p = sub(P, G);
|
||
return `${dot(p, X) + D / 2}px ${dot(p, Y) + D / 2}px`;
|
||
});
|
||
face.style.width = face.style.height = D + 'px';
|
||
face.style.margin = -D / 2 + 'px';
|
||
face.style.fontSize = D * 0.3 + 'px';
|
||
face.style.clipPath = `polygon(${pts.join(', ')})`;
|
||
// Static lighting factor, applied to the roll's color when it's cast
|
||
faceEls.push({ el: face, shade: 0.6 + 0.4 * Math.max(0, dot(n, light)) });
|
||
face.style.transform = mat3d([X, Y, n], G);
|
||
die.appendChild(face);
|
||
});
|
||
anchor.appendChild(scene);
|
||
}
|
||
|
||
// Rotation that lands face i flat toward the viewer, number upright
|
||
function landing(i) {
|
||
const [X, Y, Z] = bases[i];
|
||
return `matrix3d(${X[0]},${Y[0]},${Z[0]},0,${X[1]},${Y[1]},${Z[1]},0,` +
|
||
`${X[2]},${Y[2]},${Z[2]},0,0,0,0,1)`;
|
||
}
|
||
|
||
let busy = false;
|
||
anchor.addEventListener('click', () => {
|
||
if (busy) return;
|
||
busy = true;
|
||
if (!scene) build();
|
||
scene.style.display = '';
|
||
scene.style.opacity = '1';
|
||
|
||
const result = Math.floor(Math.random() * 20) + 1;
|
||
const final = landing(NUMBERS.indexOf(result));
|
||
|
||
// Cast the die in one of the theme pastels for this roll
|
||
const [pr, pg, pb] = PASTELS[Math.floor(Math.random() * PASTELS.length)];
|
||
faceEls.forEach(({ el, shade }) => {
|
||
el.style.background =
|
||
`rgb(${Math.round(pr * shade)}, ${Math.round(pg * shade)}, ${Math.round(pb * shade)})`;
|
||
});
|
||
|
||
// Nat 20: DOM sprinkles burst from the die — unlike the canvas ones,
|
||
// these render above the cards, so the effect survives any backdrop
|
||
const burst = () => {
|
||
const r = scene.getBoundingClientRect();
|
||
const cx = r.left + r.width / 2;
|
||
const cy = r.top + r.height / 2;
|
||
for (let i = 0; i < 24; i++) {
|
||
const bit = document.createElement('span');
|
||
bit.className = 'burst-bit';
|
||
const [br, bg, bb] = PASTELS[Math.floor(Math.random() * PASTELS.length)];
|
||
bit.style.background = `rgb(${br}, ${bg}, ${bb})`;
|
||
bit.style.left = cx + 'px';
|
||
bit.style.top = cy + 'px';
|
||
document.body.appendChild(bit);
|
||
const a = Math.random() * Math.PI * 2;
|
||
const d = 60 + Math.random() * 90;
|
||
bit.animate(
|
||
[
|
||
{
|
||
transform: `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`,
|
||
opacity: 1,
|
||
},
|
||
{
|
||
transform:
|
||
`translate(calc(-50% + ${(Math.cos(a) * d).toFixed(1)}px), ` +
|
||
`calc(-50% + ${(Math.sin(a) * d).toFixed(1)}px)) ` +
|
||
`rotate(${((Math.random() - 0.5) * 720).toFixed(0)}deg)`,
|
||
opacity: 0,
|
||
},
|
||
],
|
||
{ duration: 700 + Math.random() * 300, easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)', fill: 'forwards' }
|
||
).finished.then(() => bit.remove());
|
||
}
|
||
};
|
||
|
||
const finish = () => {
|
||
if (result === 20 && !reduceMotion.matches) burst();
|
||
setTimeout(() => {
|
||
scene.style.opacity = '0';
|
||
setTimeout(() => {
|
||
scene.style.display = 'none';
|
||
busy = false;
|
||
}, 320);
|
||
}, 1100);
|
||
};
|
||
|
||
if (reduceMotion.matches) {
|
||
die.style.transform = final;
|
||
finish();
|
||
return;
|
||
}
|
||
// One continuous decelerating roll from a fully random direction: the
|
||
// die tumbles end-over-end along its travel (axis perpendicular to the
|
||
// motion, in-plane) with a slower barrel roll around the travel axis.
|
||
// Both extra rotations unwind to exactly zero on top of the landing
|
||
// matrix, so it settles on the result with no correcting jerk.
|
||
const ang = Math.random() * Math.PI * 2;
|
||
const dx = Math.cos(ang);
|
||
const dy = Math.sin(ang);
|
||
const roll = 810 + Math.floor(Math.random() * 3) * 72;
|
||
const wobble = 240 + Math.random() * 240;
|
||
const tumbleAxis = `${dy.toFixed(4)},${(-dx).toFixed(4)},0`;
|
||
const travelAxis = `${dx.toFixed(4)},${dy.toFixed(4)},0`;
|
||
const anim = die.animate(
|
||
[
|
||
{
|
||
transform:
|
||
`translate(${(-dx * 150).toFixed(1)}px, ${(-dy * 150).toFixed(1)}px) ` +
|
||
`rotate3d(${tumbleAxis},${roll}deg) rotate3d(${travelAxis},${-wobble}deg) ${final}`,
|
||
},
|
||
{
|
||
transform:
|
||
`translate(0px, 0px) rotate3d(${tumbleAxis},0deg) rotate3d(${travelAxis},0deg) ${final}`,
|
||
},
|
||
],
|
||
{ duration: 1400, easing: 'cubic-bezier(0.16, 0.6, 0.28, 1)', fill: 'forwards' }
|
||
);
|
||
anim.finished.then(() => {
|
||
die.style.transform = final;
|
||
anim.cancel();
|
||
finish();
|
||
});
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Name anagram: clicks cycle through rearrangements ─────────
|
||
(function () {
|
||
const h1 = document.querySelector('.hero-name');
|
||
if (!h1) return;
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||
|
||
const NAME = 'Nikolaj Gade';
|
||
const CYCLE = [NAME, 'a joking deal', NAME, 'naked oil jag'];
|
||
|
||
// The visual letters rearrange, but assistive tech always gets the name
|
||
h1.setAttribute('aria-label', NAME);
|
||
|
||
// Split into persistent per-letter spans; the exact glyphs get reused,
|
||
// so the capitals travel (see "a jokiNG deal")
|
||
const letters = [];
|
||
h1.textContent = '';
|
||
for (const ch of NAME) {
|
||
if (ch === ' ') {
|
||
h1.appendChild(document.createTextNode(' '));
|
||
continue;
|
||
}
|
||
const s = document.createElement('span');
|
||
s.className = 'ltr';
|
||
s.textContent = ch;
|
||
h1.appendChild(s);
|
||
letters.push({ el: s, ch: ch.toLowerCase() });
|
||
}
|
||
|
||
function arrange(phrase) {
|
||
// Pick a distinct source glyph for every letter of the target
|
||
const pool = [...letters];
|
||
const seq = [];
|
||
for (const ch of phrase) {
|
||
if (ch === ' ') {
|
||
seq.push(null);
|
||
continue;
|
||
}
|
||
const i = pool.findIndex((l) => l.ch === ch.toLowerCase());
|
||
seq.push(pool.splice(i, 1)[0].el);
|
||
}
|
||
|
||
// FLIP: measure, reorder the DOM, measure again, then animate each
|
||
// glyph from its old position into its new one
|
||
const first = new Map(letters.map((l) => [l.el, l.el.getBoundingClientRect()]));
|
||
h1.textContent = '';
|
||
seq.forEach((el) => h1.appendChild(el || document.createTextNode(' ')));
|
||
if (reduceMotion.matches) return Promise.resolve();
|
||
|
||
return Promise.all(
|
||
letters.map((l, k) => {
|
||
const a = first.get(l.el);
|
||
const b = l.el.getBoundingClientRect();
|
||
return l.el.animate(
|
||
[
|
||
{ transform: `translate(${(a.left - b.left).toFixed(1)}px, ${(a.top - b.top).toFixed(1)}px)` },
|
||
{ transform: 'translate(0, 0)' },
|
||
],
|
||
{
|
||
duration: 650,
|
||
delay: k * 18,
|
||
fill: 'backwards',
|
||
easing: 'cubic-bezier(0.3, 0.9, 0.3, 1)',
|
||
}
|
||
).finished;
|
||
})
|
||
);
|
||
}
|
||
|
||
let pos = 0;
|
||
let busy = false;
|
||
h1.addEventListener('click', () => {
|
||
if (busy) return;
|
||
busy = true;
|
||
pos = (pos + 1) % CYCLE.length;
|
||
arrange(CYCLE[pos]).finally(() => { busy = false; });
|
||
});
|
||
})();
|
||
|
||
|
||
// ── Goat ──────────────────────────────────────────────────────
|
||
(function () {
|
||
console.log(`
|
||
%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%
|
||
%%%% %%%%%%%%%%%
|
||
%%% %%%%%%%%%%%%%%%
|
||
%% %%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%
|
||
%%%%%%%%%%%%%%%`);
|
||
|
||
const FACTS = [
|
||
`The word admiral comes from the Arabic "amir al bahr", which translates to "commander of the sea". Somewhere along the way into European languages, the bahr fell off, so the word we kept literally means "commander of the".`,
|
||
`The word stationery comes from (perhaps obviously) the word stationary. It's because book shops were some of the first shops to be in permanent buildings, since books are too heavy to carry around in a cart.`,
|
||
`The Wikipedia page for economist Guy Standing was the site of one of the biggest edit wars in Wikipedia history, started when an editor uploaded a picture with the description "Guy Standing sitting".`,
|
||
`The introduction of shipping containers, which hide their contents, dropped the number of alcohol bottles marked as "broken" by almost 100%.`,
|
||
`The words "chess" and "check" both come from the ancient Persian word "shah", meaning "king". "Check mate" comes from "shah maat", meaning "the king is dead".`,
|
||
`No one knows the origin of the character of Igor in the Frankenstein story. He's not in the original book, and his first known appearance is from the movie adaptation of a play. So it's not known if he originally appeared in the play or the movie.`,
|
||
`To avoid a binary overflow error, Swiss trains are not allowed to have exactly 256 axles.`,
|
||
];
|
||
console.log('Fun fact: ' + FACTS[Math.floor(Math.random() * FACTS.length)]);
|
||
})();
|