// ============ 玄境 SVG art ============ const { useRef, useEffect, useState } = React; // cloud logo mark function CloudMark({ size = 30, color = '#C9322A' }) { return ( ); } // Taiji yin-yang function YinYang({ size = 150, spin = true }) { return ( ); } const TRIGRAMS = { 乾:[1,1,1], 兌:[0,1,1], 離:[1,0,1], 震:[0,0,1], 巽:[1,1,0], 坎:[0,1,0], 艮:[1,0,0], 坤:[0,0,0], }; // 先天八卦 order clockwise from top const BAGUA_ORDER = ['乾','兌','離','震','坤','艮','坎','巽']; function Trigram({ lines, color }) { // local coords: bars centered at x=0, stacked, width 34 return ( {lines.map((yang, i) => { const y = i * 9; return yang ? : ( ); })} ); } function Bagua({ size = 360 }) { const c = size / 2, R = size * 0.36; return (
{BAGUA_ORDER.map((name, i) => { const ang = (i / 8) * 360; const isWhite = i % 2 === 1; return ( ); })}
); } // 玄簽 fortune tube function FortuneTube({ shaking = false }) { return ( {/* sticks */} {/* tube body */} {/* red label */} 玄 簽 ); } // hand holding flame (master section) function HandFlame() { return ( {/* flame */} {/* hand / mudra */} ); } // 罗盘 / 奇门 woodblock wheel function Luopan() { const rings = [86, 66, 46]; const spokes = Array.from({ length: 8 }); const labels8 = ['乾','坎','艮','震','巽','離','坤','兌']; return ( {rings.map((r, i) => )} {spokes.map((_, i) => { const a = (i / 8) * Math.PI * 2; return ; })} {labels8.map((t, i) => { const a = (i / 8) * Math.PI * 2 - Math.PI/2 + Math.PI/8; const r = 76; return {t}; })} 陰 ); } // 五行 five elements cycle function Wuxing() { const els = [ { c:'木', col:'#4E7B3A' }, { c:'火', col:'#B23B22' }, { c:'土', col:'#A8772A' }, { c:'金', col:'#9C8A52' }, { c:'水', col:'#2E5670' }, ]; const R = 72, cx = 110, cy = 108; const pts = els.map((_, i) => { const a = (i / 5) * Math.PI * 2 - Math.PI / 2; return [cx + Math.cos(a) * R, cy + Math.sin(a) * R]; }); return ( p.join(',')).join(' ')} fill="none" stroke="#C2B79E" strokeWidth="1.4" /> {pts.map((p, i) => { const q = pts[(i + 2) % 5]; return ; })} {els.map((e, i) => ( {e.c} ))} 五行 ); } // 紫微 12-palace chart function Ziwei() { const cells = ['命','兄','夫','子','財','疾','遷','友','官','田','福','父']; // arrange 12 around a 4x4 grid border const pos = [ [0,0],[1,0],[2,0],[3,0],[3,1],[3,2],[3,3],[2,3],[1,3],[0,3],[0,2],[0,1] ]; return ( {[1,2,3].map(i => )} {[1,2,3].map(i => )} {pos.map(([x,y], i) => ( {cells[i]} ))} 紫微 斗數 ); } // arts card line icons function ArtIcon({ name, size = 30 }) { const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (name === 'wind') return ; if (name === 'sun') return ; if (name === 'star') return ; return ; } // atmospheric ink-cloud + dragon mural (hero fallback backdrop) function CloudSwirl({ x, y, s = 1, c = '#2A1C06', o = 0.5 }) { return ( ); } function DragonMural() { return ( {/* faint gold-leaf mottling */} {/* dragon body */} {/* mane / head near center-right */} {/* scale shimmer dashes along body */} {/* drifting mist bottom */} ); } function Mountains() { return ( ); } // large faint dragon seal watermark function DragonSeal({ size = 560 }) { return ( {Array.from({ length: 48 }).map((_, i) => { const a = (i / 48) * Math.PI * 2; return ; })} {[[58,58],[150,56],[44,140],[158,138]].map((s,i)=>( ))} ); } Object.assign(window, { CloudMark, YinYang, Bagua, FortuneTube, HandFlame, Luopan, Wuxing, Ziwei, ArtIcon, Mountains, DragonSeal, DragonMural, });