);
}
// ─────────────────────────────────────────────────────────────
// Sparkle Hunt mini game
// ─────────────────────────────────────────────────────────────
function SparkleHunt({ accent = '#ff9ec7', chromeGradient }) {
const canvasRef = React.useRef(null);
const stateRef = React.useRef({
player: { x: 200, y: 0, vx: 0, frame: 0, frameT: 0, facing: 1 },
items: [],
particles: [],
keys: {},
lastSpawn: 0,
lastT: 0,
hazardLastSpawn: 0,
});
const [score, setScore] = React.useState(0);
const [lives, setLives] = React.useState(3);
const [timeLeft, setTimeLeft] = React.useState(60);
const [status, setStatus] = React.useState('idle'); // idle | playing | over
const [hi, setHi] = React.useState(() => {
try { return parseInt(localStorage.getItem('paulyn-sparkle-hi') || '0', 10); } catch (e) { return 0; }
});
const W = 560, H = 320;
const PW = 64, PH = 120;
const GROUND_Y = H - PH - 6;
// Load real chibi PNG sprites
const spritesRef = React.useRef({ loaded: false, idle: null, walkA: null, walkB: null });
React.useEffect(() => {
const load = (src) => new Promise(res => { const img = new Image(); img.onload = () => res(img); img.onerror = () => res(null); img.src = src; });
Promise.all([
load('assets/paulyn-idle.png'),
load('assets/paulyn-walk-a.png'),
load('assets/paulyn-walk-b.png'),
]).then(([idle, walkA, walkB]) => {
spritesRef.current = { loaded: true, idle, walkA, walkB };
});
}, []);
const reset = React.useCallback(() => {
stateRef.current = {
player: { x: W / 2 - PW / 2, y: GROUND_Y, vx: 0, frame: 0, frameT: 0, facing: 1 },
items: [], particles: [], keys: {},
lastSpawn: 0, lastT: 0, hazardLastSpawn: 0,
};
setScore(0); setLives(3); setTimeLeft(60);
}, [GROUND_Y, PW]);
const start = () => { reset(); setStatus('playing'); };
// Input handlers (keyboard)
React.useEffect(() => {
const gameKeys = ['ArrowLeft','ArrowRight','a','A','d','D',' '];
const down = (e) => {
if (gameKeys.includes(e.key)) {
e.preventDefault();
}
stateRef.current.keys[e.key] = true;
if (e.key === ' ' && status !== 'playing') { start(); }
};
const up = (e) => { stateRef.current.keys[e.key] = false; };
window.addEventListener('keydown', down);
window.addEventListener('keyup', up);
return () => {
window.removeEventListener('keydown', down);
window.removeEventListener('keyup', up);
};
}, [status]);
// Touch controls via button presses (bound below)
const press = (key, v) => { stateRef.current.keys[key] = v; };
// Main loop
React.useEffect(() => {
if (status !== 'playing') return;
let raf;
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const step = (t) => {
const s = stateRef.current;
const dt = Math.min(0.05, (t - (s.lastT || t)) / 1000);
s.lastT = t;
// --- update player ---
const left = s.keys['ArrowLeft'] || s.keys['a'] || s.keys['A'];
const right = s.keys['ArrowRight'] || s.keys['d'] || s.keys['D'];
const speed = 260;
s.player.vx = (right ? speed : 0) - (left ? speed : 0);
s.player.x += s.player.vx * dt;
s.player.x = Math.max(4, Math.min(W - PW - 4, s.player.x));
// Walk frame + facing
if (Math.abs(s.player.vx) > 1) {
s.player.facing = s.player.vx > 0 ? 1 : -1;
s.player.frameT += dt;
if (s.player.frameT > 0.22) { s.player.frameT = 0; s.player.frame = 1 - s.player.frame; }
} else s.player.frame = 0;
// --- spawn sparkles ---
const spawnGap = Math.max(0.35, 0.9 - score * 0.01);
if (t - s.lastSpawn > spawnGap * 1000) {
s.lastSpawn = t;
s.items.push({
type: 'sparkle',
x: 20 + Math.random() * (W - 40),
y: -20,
vy: 80 + Math.random() * 80 + score * 2,
rot: Math.random() * Math.PI * 2,
size: 14 + Math.random() * 8,
hue: Math.random() < 0.15 ? 'rare' : 'normal',
});
}
// --- spawn hazards (coffee spill) ---
if (t - s.hazardLastSpawn > 2200 && score > 5) {
s.hazardLastSpawn = t;
s.items.push({
type: 'coffee',
x: 30 + Math.random() * (W - 60),
y: -20,
vy: 120 + Math.random() * 60,
rot: 0,
size: 20,
});
}
// --- update items ---
for (let i = s.items.length - 1; i >= 0; i--) {
const it = s.items[i];
it.y += it.vy * dt;
it.rot += dt * 2;
// collision with head area (top half of sprite)
const hx = s.player.x + PW * 0.2;
const hy = s.player.y + PH * 0.05;
const hw = PW * 0.6;
const hh = PH * 0.55;
if (it.y + it.size > hy && it.y < hy + hh &&
it.x + it.size > hx && it.x < hx + hw) {
if (it.type === 'sparkle') {
const gain = it.hue === 'rare' ? 5 : 1;
setScore(sc => sc + gain);
// particles
for (let p = 0; p < 8; p++) {
s.particles.push({
x: it.x, y: it.y,
vx: (Math.random() - 0.5) * 160,
vy: -60 - Math.random() * 60,
life: 0.7,
color: it.hue === 'rare' ? '#fff5a8' : accent,
});
}
} else if (it.type === 'coffee') {
setLives(l => l - 1);
for (let p = 0; p < 12; p++) {
s.particles.push({
x: it.x, y: it.y,
vx: (Math.random() - 0.5) * 200,
vy: -80 - Math.random() * 80,
life: 0.8,
color: '#6b4226',
});
}
}
s.items.splice(i, 1);
continue;
}
if (it.y > H + 30) s.items.splice(i, 1);
}
// --- update particles ---
for (let i = s.particles.length - 1; i >= 0; i--) {
const p = s.particles[i];
p.x += p.vx * dt; p.y += p.vy * dt; p.vy += 300 * dt; p.life -= dt;
if (p.life <= 0) s.particles.splice(i, 1);
}
// --- render ---
// sky gradient
const bg = ctx.createLinearGradient(0, 0, 0, H);
bg.addColorStop(0, '#2a1040');
bg.addColorStop(0.5, '#6b2d6a');
bg.addColorStop(1, '#ff9ec7');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, W, H);
// stars
ctx.fillStyle = 'rgba(255,255,255,0.7)';
for (let i = 0; i < 30; i++) {
const sx = (i * 47) % W;
const sy = (i * 31) % (H - 100);
const tw = Math.sin(t / 400 + i) * 0.5 + 0.5;
ctx.globalAlpha = 0.3 + tw * 0.6;
ctx.fillRect(sx, sy, 2, 2);
}
ctx.globalAlpha = 1;
// ground platform
ctx.fillStyle = 'rgba(255,255,255,0.15)';
ctx.fillRect(0, H - 10, W, 10);
ctx.fillStyle = 'rgba(255,255,255,0.3)';
for (let gx = 0; gx < W; gx += 8) ctx.fillRect(gx, H - 10, 4, 1);
// items
s.items.forEach(it => {
ctx.save();
ctx.translate(it.x + it.size / 2, it.y + it.size / 2);
ctx.rotate(it.rot);
if (it.type === 'sparkle') {
const col = it.hue === 'rare' ? '#fff5a8' : '#ff9ec7';
drawSparkle(ctx, it.size, col);
} else {
drawCoffee(ctx, it.size);
}
ctx.restore();
});
// player — real chibi sprites (2-frame cycle: idle + walk-a)
const sp = spritesRef.current;
const moving = Math.abs(s.player.vx) > 1;
let spriteImg = null;
if (sp.loaded) {
if (moving) {
spriteImg = s.player.frame === 0 ? sp.idle : sp.walkA;
} else {
spriteImg = sp.idle;
}
}
if (spriteImg) {
ctx.save();
ctx.imageSmoothingEnabled = false;
// All sprites are uniform 239×330 bottom-anchored — draw at fixed box
const aspect = spriteImg.width / spriteImg.height;
const drawH = PH;
const drawW = drawH * aspect;
const drawX = s.player.x + (PW - drawW) / 2;
const facing = s.player.facing || 1;
if (facing < 0) {
ctx.translate(drawX + drawW, s.player.y);
ctx.scale(-1, 1);
ctx.drawImage(spriteImg, 0, 0, drawW, drawH);
} else {
ctx.drawImage(spriteImg, drawX, s.player.y, drawW, drawH);
}
ctx.restore();
}
// player shadow
ctx.fillStyle = 'rgba(0,0,0,0.25)';
ctx.beginPath();
ctx.ellipse(s.player.x + PW / 2, s.player.y + PH - 2, PW * 0.35, 4, 0, 0, Math.PI * 2);
ctx.fill();
// particles
s.particles.forEach(p => {
ctx.globalAlpha = Math.max(0, p.life / 0.8);
ctx.fillStyle = p.color;
ctx.fillRect(p.x - 2, p.y - 2, 4, 4);
});
ctx.globalAlpha = 1;
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [status, accent, PW, PH, score]);
// Countdown timer
React.useEffect(() => {
if (status !== 'playing') return;
const id = setInterval(() => {
setTimeLeft(t => {
if (t <= 1) {
clearInterval(id);
return 0;
}
return t - 1;
});
}, 1000);
return () => clearInterval(id);
}, [status]);
// Game over check
React.useEffect(() => {
if (status === 'playing' && (lives <= 0 || timeLeft <= 0)) {
setStatus('over');
setHi(prev => {
const n = Math.max(prev, score);
try { localStorage.setItem('paulyn-sparkle-hi', String(n)); } catch (e) {}
return n;
});
}
}, [lives, timeLeft, status, score]);
return (