{beams.map((b, i) => (

))}

); } /* Constellation dots orbiting outside */ function OrbitingStars({ baseR, hue = "gold" }) { const dots = React.useMemo(() => { return Array.from({ length: 60 }, () => ({ ang: Math.random() * 360, r: baseR + 60 + Math.random() * 200, size: 1 + Math.random() * 2.5, blink: Math.random() * 4, blinkDur: 2 + Math.random() * 4, })); }, [baseR]); const c = hue === "cyan" ? "#9ff5ff" : "#ffe9a8"; return (

{dots.map((d, i) => { const rad = d.ang * Math.PI / 180; return (

); })}

); } /* ── Gear Sound (Web Audio API) ── */ function playGearSound(totalMs) { try { const actx = new (window.AudioContext || window.webkitAudioContext)(); const dur = totalMs / 1000; const accelSec = 3; const now = actx.currentTime; // Pink noise buffer — mechanical rumble const noiseFrames = Math.min(Math.ceil(actx.sampleRate * dur), actx.sampleRate * 12); const noiseBuf = actx.createBuffer(1, noiseFrames, actx.sampleRate); const nd = noiseBuf.getChannelData(0); let b0=0,b1=0,b2=0,b3=0,b4=0,b5=0; for (let i = 0; i < noiseFrames; i++) { const w = Math.random()*2-1; b0=0.99886*b0+w*0.0555179; b1=0.99332*b1+w*0.0750759; b2=0.96900*b2+w*0.1538520; b3=0.86650*b3+w*0.3104856; b4=0.55000*b4+w*0.5329522; b5=-0.7616*b5-w*0.0168980; nd[i] = (b0+b1+b2+b3+b4+b5+w*0.5362)*0.05; } const noiseSrc = actx.createBufferSource(); noiseSrc.buffer = noiseBuf; const rumbleF = actx.createBiquadFilter(); rumbleF.type = 'bandpass'; rumbleF.Q.value = 1.5; rumbleF.frequency.setValueAtTime(80, now); rumbleF.frequency.linearRampToValueAtTime(320, now + accelSec); rumbleF.frequency.linearRampToValueAtTime(50, now + dur); const rumbleG = actx.createGain(); rumbleG.gain.setValueAtTime(0, now); rumbleG.gain.linearRampToValueAtTime(0.55, now + accelSec); rumbleG.gain.linearRampToValueAtTime(0, now + dur); noiseSrc.connect(rumbleF); rumbleF.connect(rumbleG); rumbleG.connect(actx.destination); noiseSrc.start(now); noiseSrc.stop(now + dur); // Metallic click buffer — gear teeth const clickFrames = Math.floor(actx.sampleRate * 0.02); const clickBuf = actx.createBuffer(1, clickFrames, actx.sampleRate); const cd = clickBuf.getChannelData(0); for (let i = 0; i < clickFrames; i++) { cd[i] = (Math.random()*2-1) * Math.exp(-i/(actx.sampleRate*0.003)) * 1.5; } let t = now + 0.05; const end = now + dur - 0.1; while (t < end) { const el = t - now; let ivl; if (el < accelSec) { const k = Math.pow(el / accelSec, 1.8); ivl = 0.30 - 0.26 * k; // 0.30s → 0.04s } else { const k = Math.pow((el - accelSec) / (dur - accelSec), 1.5); ivl = 0.04 + 0.28 * k; // 0.04s → 0.32s } ivl = Math.max(0.02, ivl); const env = el < accelSec ? el/accelSec : 1-(el-accelSec)/(dur-accelSec); const src = actx.createBufferSource(); src.buffer = clickBuf; const g = actx.createGain(); g.gain.value = 0.4 * Math.max(0.05, env); src.connect(g); g.connect(actx.destination); try { src.start(t); } catch {} t += ivl; } setTimeout(() => { try { actx.close(); } catch {} }, (dur + 1) * 1000); } catch(e) { /* audio unavailable */ } } /* The Cosmic Compass */ function CosmicCompass({ tweaks }) { const baseR = 360; const accentColors = tweaks.hue === "cyan" ? { glow: "#5ed8ff", text: "#cfeeff", divider: "rgba(94,216,255,0.55)", fillA: "rgba(20,60,90,0.55)", fillB: "rgba(8,28,48,0.65)" } : { glow: "#ffce5c", text: "#f1dba0", divider: "rgba(255,206,92,0.5)", fillA: "rgba(80,40,8,0.55)", fillB: "rgba(40,20,4,0.65)" }; // 4 cardinal indices for mountains: 子卯午酉 → indices 1, 7, 13, 19 const cardinalsMountains = [1, 7, 13, 19]; const ringSpec = [ { key: "trigrams", inner: 80, outer: 115, items: COSMIC_DATA.trigrams.map(t => t.name), font: 18 }, { key: "branches", inner: 115, outer: 150, items: COSMIC_DATA.branches, font: 20 }, { key: "terms", inner: 150, outer: 190, items: COSMIC_DATA.solarTerms, font: 11, renderItem: (s) => ( {s[0]} {s[1]} ) }, { key: "mountains", inner: 190, outer: 232, items: COSMIC_DATA.mountains, font: 22, accentIndices: cardinalsMountains }, { key: "hexagrams", inner: 232, outer: 295, items: COSMIC_DATA.hexagrams, font: 13, renderItem: (s) => s.length === 1 ? {s} : ( {s[0]} {s[1]} ) }, { key: "stars", inner: 295, outer: baseR, items: [...COSMIC_DATA.starSigils, ...COSMIC_DATA.starSigils.slice(0, 36)].slice(0, 36), font: 16 }, ]; const [rotations, setRotations] = React.useState( Object.fromEntries(ringSpec.map(r => [r.key, 0])) ); const burstRef = React.useRef(null); const stoppedRef = React.useRef(false); // compass-stop 事件设为 true，burst 时清除 // 用 ref 持有最新的 tweaks，避免 RAF 闭包捕获旧值 const autoSpinRef = React.useRef(tweaks.autoSpin); const spinSpeedRef = React.useRef(tweaks.spinSpeed); React.useEffect(() => { autoSpinRef.current = tweaks.autoSpin; }, [tweaks.autoSpin]); React.useEffect(() => { spinSpeedRef.current = tweaks.spinSpeed; }, [tweaks.spinSpeed]); React.useEffect(() => { const onBurst = (e) => { stoppedRef.current = false; // 新一轮起卦，清除停止标记 const dur = (e.detail && e.detail.duration) || 30000; const maxM = (e.detail && e.detail.maxMult) || 80; burstRef.current = { start: performance.now(), duration: dur, maxMult: maxM }; playGearSound(dur); // 齿轮声音 }; const onStop = () => { stoppedRef.current = true; // 起卦结束，标记停止 burstRef.current = null; }; window.addEventListener('compass-burst', onBurst); window.addEventListener('compass-stop', onStop); return () => { window.removeEventListener('compass-burst', onBurst); window.removeEventListener('compass-stop', onStop); }; }, []); React.useEffect(() => { let raf, last = performance.now(); const tick = (t) => { const dt = Math.min(0.05, (t - last) / 1000); last = t; const burst = burstRef.current; let burstMult = 1; if (burst) { const elapsed = t - burst.start; if (elapsed < burst.duration) { const ACCEL = 3000; // 前 3s 加速 const maxM = burst.maxMult || 80; if (elapsed < ACCEL) { // 加速阶段：ease-in，从 1x → maxMult const k = elapsed / ACCEL; burstMult = 1 + maxM * Math.pow(k, 2); } else { // 减速阶段：ease-out，从 maxMult → 1 const k = (elapsed - ACCEL) / (burst.duration - ACCEL); burstMult = 1 + maxM * Math.pow(1 - k, 3.2); } } else { burstRef.current = null; } } // stopped 优先级最高；其次 burst；最后 autoSpin const active = !stoppedRef.current && (burstRef.current || autoSpinRef.current); if (active) { setRotations(prev => { const next = { ...prev }; ringSpec.forEach((r, i) => { const dir = i % 2 === 0 ? 1 : -1; const base = (spinSpeedRef.current || 6) * (1 - i * 0.08); const speed = base * burstMult; next[r.key] = (prev[r.key] || 0) + dir * speed * dt; }); return next; }); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // 依赖为空——通过 ref 读取最新值，不需要重建闭包 // Pulsing aura const [pulse, setPulse] = React.useState(0); React.useEffect(() => { let raf; const tick = () => { setPulse(performance.now() / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const pulseScale = 1 + Math.sin(pulse * 1.4) * 0.04; const pulseOpacity = 0.45 + Math.sin(pulse * 1.4) * 0.2; return (

{/* Pulsing aura behind everything */}

{/* Orbiting starfield */} {tweaks.showStars && } {/* Light beams rising/descending */} {tweaks.showBeams && }

{/* Outer glowing rings */}

{/* Tick marks */} {ringSpec.map((r, i) => ( setRotations(p => ({ ...p, [r.key]: v }))} fontSize={r.font} glowColor={accentColors.glow} textColor={accentColors.text} divider={accentColors.divider} fillEven={accentColors.fillA} fillOdd={accentColors.fillB} renderItem={r.renderItem} accentIndices={r.accentIndices || []} zIndex={10 + (ringSpec.length - i)} /> ))} {/* Cardinal cross */}

); } window.CosmicCompass = CosmicCompass;