// lamp.jsx — engraving-style oil/brass lamp with pull cord physics const { clamp } = window._util; function Lamp({ on, onToggle }) { const [cordY, setCordY] = React.useState(0); const [pulling, setPulling] = React.useState(false); const [wiggle, setWiggle] = React.useState(0); // gentle attract-animation amplitude when lamp off const startRef = React.useRef({ y: 0, cordY: 0, t: 0, moved: false }); React.useEffect(() => { const onMove = (e) => { if (!pulling) return; const dy = e.clientY - startRef.current.y; if (Math.abs(dy) > 4) startRef.current.moved = true; // more responsive: dy/55 means a small drag already lights the lamp setCordY(clamp(startRef.current.cordY + dy / 55, 0, 1)); }; const onUp = (e) => { if (!pulling) return; setPulling(false); const dt = performance.now() - startRef.current.t; const moved = startRef.current.moved; // tap-to-toggle: a short interaction with little movement counts as a click const isTap = !moved && dt < 350; // lowered threshold: 40% pull already toggles if (isTap || cordY > 0.4) onToggle(); let from = isTap ? 0.55 : cordY; // tap shows a quick yank-down animation const start = performance.now(); const a = (t) => { const k = Math.min(1, (t - start) / 320); const ease = 1 - Math.pow(1 - k, 3); const overshoot = Math.sin(k * Math.PI * 2) * 0.08 * (1 - k); setCordY(from * (1 - ease) + overshoot); if (k < 1) requestAnimationFrame(a); else setCordY(0); }; requestAnimationFrame(a); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; }, [pulling, cordY, onToggle]); // Attract animation: while lamp is off and user hasn't interacted, gently wiggle the cord // every 4s, up to 3 times — enough to draw the eye, not enough to feel busy. React.useEffect(() => { if (on || pulling) return; let count = 0; let raf; const tick = () => { if (count >= 3) return; count++; const start = performance.now(); const dur = 900; const step = (t) => { const k = Math.min(1, (t - start) / dur); // damped sine: amplitude ~0.18 → 0 const amp = 0.18 * (1 - k); setWiggle(Math.sin(k * Math.PI * 4) * amp); if (k < 1) raf = requestAnimationFrame(step); else { setWiggle(0); setTimeout(tick, 2000); } }; raf = requestAnimationFrame(step); }; const t = setTimeout(tick, 2000); return () => { clearTimeout(t); cancelAnimationFrame(raf); setWiggle(0); }; }, [on, pulling]); const onDown = (e) => { e.preventDefault(); // Lock the pointer to this element so move events keep firing even after // the cursor leaves the (small) hit area — without this, drags drop the moment // the user moves more than a few px below the original press point. try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} startRef.current = { y: e.clientY, cordY, t: performance.now(), moved: false }; setPulling(true); }; // visual pull = active drag + idle wiggle (only when off & not pulling). // Clamp to ≥0 so the cord never floats upward (un-physical). const pull = Math.max(0, (cordY + (on || pulling ? 0 : wiggle))) * 80; const ink = '#2e1e10'; return (

{!on && ( )}

); } window.Lamp = Lamp;