/* global React, ART_PALETTE, SUIT_COLOR, Pip, MAJOR_GLYPHS, CardBack */ // Suit-specific court card glyphs (Pages, Knights, Queens, Kings) const COURT_GLYPHS = { wands: { // Page of Wands: standing, wand raised, feathered cap 11: (c) => , // Knight of Wands: charging, wand raised, leaning forward 12: (c) => , // Queen of Wands: seated on throne, wand in right hand, sunflower at feet 13: (c) => , // King of Wands: seated, wand displayed, commanding 14: (c) => , }, cups: { // Page of Cups: standing, cup raised, fish emerging 11: (c) => , // Knight of Cups: calm trot, cup held forward, winged helm 12: (c) => , // Queen of Cups: seated, ornate cup cradled in lap, water below 13: (c) => , // King of Cups: seated, cup raised to side, fish symbol 14: (c) => , }, swords: { // Page of Swords: standing, sword raised, windswept, alert 11: (c) => , // Knight of Swords: charging hard, sword thrust, speed lines 12: (c) => , // Queen of Swords: seated, sword upright, left hand raised 13: (c) => , // King of Swords: seated, sword raised high, authoritative 14: (c) => , }, pentacles: { // Page of Pentacles: standing, pentacle held up in both hands, studying 11: (c) => , // Knight of Pentacles: steady, pentacle held carefully, plodding 12: (c) => , // Queen of Pentacles: seated, pentacle cradled in lap, plant at side 13: (c) => , // King of Pentacles: seated, pentacle on knee, vine at throne 14: (c) => , }, }; // Pip arrangement for numbered cards (1–10) const PipLayout = ({n, suit, color}) => { // Geometric, symmetric arrangements const layouts = { 1: [[50,60]], 2: [[50,40],[50,80]], 3: [[50,35],[50,60],[50,85]], 4: [[35,40],[65,40],[35,80],[65,80]], 5: [[35,40],[65,40],[50,60],[35,80],[65,80]], 6: [[35,35],[65,35],[35,60],[65,60],[35,85],[65,85]], 7: [[35,32],[65,32],[35,55],[65,55],[50,68],[35,82],[65,82]], 8: [[35,30],[65,30],[35,48],[65,48],[35,72],[65,72],[35,90],[65,90]], 9: [[35,30],[50,30],[65,30],[35,55],[50,55],[65,55],[35,80],[50,80],[65,80]], 10:[[35,28],[65,28],[35,42],[65,42],[35,58],[50,58],[65,72],[35,72],[35,88],[65,88]] }; const points = layouts[n] || []; return {points.map(([x,y],i) => =7?7:9} color={color}/>)} ; }; // Helper: draws a chalice centered at (cx, cy) where cy is the base const CupShape = ({cx, cy, w=11, h=14, c, lw=0.8}) => { const hw=w*0.48, nw=w*0.16, bw=w*0.38; const top=cy-h*0.6, bowlBot=cy-h*0.25; return ; }; // Helper: draws one sword from tip (x1,y1) to pommel (x2,y2) with a perpendicular crossguard const SwordLine = ({x1,y1,x2,y2,c,sw=1.0,gs=4.5,op=1}) => { const dx=x2-x1, dy=y2-y1; const len=Math.sqrt(dx*dx+dy*dy); const gx=x1+dx*0.73, gy=y1+dy*0.73; const px=-dy/len*gs, py=dx/len*gs; return ; }; // Swords-specific glyphs — evocative compositions instead of pip arrangements const SWORDS_GLYPHS = { // Ace: single prominent sword, cloud at tip 1: (c) => , // Two: crossed swords, crescent moon — deliberate blindness 2: (c) => , // Three: three swords converging at a heart, rain 3: (c) => , // Four: three swords on wall, one lying horizontal — rest 4: (c) => , // Five: two upright swords (winner) vs three scattered (defeated) 5: (c) => , // Six: boat with six standing swords, calm water 6: (c) => , // Seven: five swords moving (right, angled), two left standing behind 7: (c) => , // Eight: swords forming a cage, dashed binding in center 8: (c) => , // Nine: nine horizontal swords racked on a wall 9: (c) => {[24,33,42,51,60,69,78,87,96].map((y,i) => )} , // Ten: ten swords stabbing downward — tip at bottom, guard near top 10: (c) => {[ [42,97,20,28],[44,97,27,24],[46,97,34,21],[48,97,41,19],[50,97,48,18], [52,97,54,18],[54,97,62,19],[57,97,69,21],[60,97,75,24],[63,97,82,28] ].map(([x1,y1,x2,y2],i) => 7?0.75:1}/> )} , }; // Cups-specific glyphs const CUPS_GLYPHS = { // Ace: single large overflowing chalice, water streams, lotus above 1: (c) => , // Two: two cups facing each other, arc above 2: (c) => , // Three: three cups at different heights, celebration dots 3: (c) => , // Four: three cups on ground, one offered from cloud above 4: (c) => , // Five: three spilled cups (left), two upright cups (right) 5: (c) => , // Six: six cups in two rows, small star in each bowl 6: (c) => {[[28,40],[50,40],[72,40],[28,75],[50,75],[72,75]].map(([cx,cy],i) => )} , // Seven: seven cups drifting in cloud-like scatter 7: (c) => {[ [50, 30, 13, 17], [26, 50, 11, 14], [74, 50, 11, 14], [38, 68, 11, 14], [62, 68, 11, 14], [24, 86, 10, 13], [76, 86, 10, 13], ].map(([cx,cy,w,h],i) => )} , // Eight: eight cups arranged in arc, crescent moon (departure) 8: (c) => {[ [22,93],[34,89],[46,86],[58,84],[70,86], [26,70],[40,67],[54,64], ].map(([cx,cy],i) => )} , // Nine: nine cups displayed in two rows (5+4) 9: (c) => {[22,34,46,58,70].map((cx,i) => )} {[28,42,56,70].map((cx,i) => )} , // Ten: ten cups in rainbow arc 10: (c) => {Array.from({length:10}, (_,i) => { const cx = 14 + i*7.8; const cy = 55 + (i-4.5)*(i-4.5)*0.9; return ; })} , }; // Helper: draws a wand (staff) with alternating leaf-sprouts along the shaft const WandLine = ({x1,y1,x2,y2,c,sw=1.0,ls=3.5,op=1}) => { const dx=x2-x1, dy=y2-y1; const len=Math.sqrt(dx*dx+dy*dy); const px=-dy/len, py=dx/len; return {[0.28,0.50,0.70].map((t,i) => { const lx=x1+dx*t, ly=y1+dy*t, s=i%2===0?1:-1; return ; })} ; }; // Wands-specific glyphs const WANDS_GLYPHS = { // Ace: single large wand, bold sprouts, energy at tip 1: (c) => , // Two: two wands planted, globe surveyed between them 2: (c) => , // Three: three wands, horizon, ships in distance 3: (c) => , // Four: four wands, garland swags between them 4: (c) => , // Five: five wands clashing at competing angles 5: (c) => , // Six: five dim wands, one victorious center wand with laurel wreath 6: (c) => , // Seven: six wands rising from below, one defender's wand angled against them 7: (c) => , // Eight: eight wands flying in parallel diagonal formation 8: (c) => {Array.from({length:8}, (_,i) => )} , // Nine: eight wands planted behind a wall, one leaning forward in foreground 9: (c) => {[18,27,36,45,54,63,72,81].map((x,i) => )} , // Ten: ten wands leaning forward in a dense bundle (burden) 10: (c) => {[28,33,38,43,48,53,58,63,68,73].map((x,i) => )} , }; // Helper: draws a pentacle coin (circle + five-pointed star) const PentacleDisc = ({cx, cy, r=8, c, lw=0.8}) => { const star = Array.from({length:10}, (_,i) => { const a = (i*36 - 90) * Math.PI / 180; const rad = i%2===0 ? r*0.62 : r*0.25; return `${i===0?'M':'L'}${(cx+Math.cos(a)*rad).toFixed(1)},${(cy+Math.sin(a)*rad).toFixed(1)}`; }).join(' ') + ' Z'; return ; }; // Pentacles-specific glyphs const PENTACLES_GLYPHS = { // Ace: single large pentacle, garden arch below 1: (c) => , // Two: two pentacles connected by S-ribbon, waves below 2: (c) => , // Three: stone arch with three pentacles set into it (craftsmanship) 3: (c) => , // Four: one on head, one each side, one underfoot — possession 4: (c) => , // Five: five pentacles in stained-glass window, cold ground below 5: (c) => , // Six: balance scales above, six pentacles below (giving/receiving) 6: (c) => {[[28,72],[50,72],[72,72],[28,92],[50,92],[72,92]].map(([cx,cy],i) => )} , // Seven: seven pentacles on a vine (patient harvest) 7: (c) => {[[50,26],[36,40],[64,40],[28,56],[50,54],[72,56],[38,72]].map(([cx,cy],i) => )} , // Eight: eight pentacles in two columns (craftsman's work) 8: (c) => {[[32,24],[32,44],[32,64],[32,84],[64,24],[64,44],[64,64],[64,84]].map(([cx,cy],i) => )} , // Nine: nine pentacles among garden vines 9: (c) => {[[50,26],[30,36],[70,36],[26,54],[50,52],[74,54],[30,72],[50,74],[70,72]].map(([cx,cy],i) => )} , // Ten: ten pentacles in Tree of Life formation 10: (c) => {[ [50,22], [68,34],[32,34], [68,52],[32,52],[50,52], [68,70],[32,70], [50,80], [50,95], ].map(([cx,cy],i) => )} {[ [[50,22],[68,34]],[[50,22],[32,34]], [[68,34],[32,34]],[[68,34],[68,52]],[[32,34],[32,52]], [[68,52],[50,52]],[[32,52],[50,52]], [[50,52],[50,80]], [[68,52],[68,70]],[[32,52],[32,70]], [[68,70],[50,80]],[[32,70],[50,80]], [[50,80],[50,95]], ].map(([[x1,y1],[x2,y2]],i) => )} , }; // Major arcana image map const MAJOR_IMAGES = { 'fool': '/major-arcana/00-fool.webp', 'magician': '/major-arcana/01-magician.webp', 'high-priestess': '/major-arcana/02-high-priestess.webp', 'empress': '/major-arcana/03-empress.webp', 'emperor': '/major-arcana/04-emperor.webp', 'hierophant': '/major-arcana/05-hierophant.webp', 'lovers': '/major-arcana/06-lovers.webp', 'chariot': '/major-arcana/07-chariot.webp', 'strength': '/major-arcana/08-strength.webp', 'hermit': '/major-arcana/09-hermit.webp', 'wheel-of-fortune': '/major-arcana/10-wheel-of-fortune.webp', 'justice': '/major-arcana/11-justice.webp', 'hanged-man': '/major-arcana/12-hanged-man.webp', 'death': '/major-arcana/13-death.webp', 'temperance': '/major-arcana/14-temperance.webp', 'devil': '/major-arcana/15-devil.webp', 'tower': '/major-arcana/16-tower.webp', 'star': '/major-arcana/17-star.webp', 'moon': '/major-arcana/18-moon.webp', 'sun': '/major-arcana/19-sun.webp', 'judgement': '/major-arcana/20-judgement.webp', 'world': '/major-arcana/21-world.webp', }; // Main face component const CardFace = ({card, reversed = false}) => { const c = SUIT_COLOR[card.suit] || ART_PALETTE.ink; const isMajor = card.suit === 'major'; const num = card.number; // 大阿卡纳：有真实图片时直接渲染 PNG if (isMajor && MAJOR_IMAGES[card.id]) { return ( {card.nameZh}

); } let centerArt; if (isMajor) { const fn = MAJOR_GLYPHS[card.id]; centerArt = fn ? fn(c) : {card.roman}; } else if (card.suit === 'swords' && num <= 10 && SWORDS_GLYPHS[num]) { centerArt = SWORDS_GLYPHS[num](c); } else if (card.suit === 'cups' && num <= 10 && CUPS_GLYPHS[num]) { centerArt = CUPS_GLYPHS[num](c); } else if (card.suit === 'wands' && num <= 10 && WANDS_GLYPHS[num]) { centerArt = WANDS_GLYPHS[num](c); } else if (card.suit === 'pentacles' && num <= 10 && PENTACLES_GLYPHS[num]) { centerArt = PENTACLES_GLYPHS[num](c); } else if (num >= 11) { const courtFn = COURT_GLYPHS[card.suit]?.[num]; centerArt = courtFn ? courtFn(c) : null; } else { centerArt = ; } const cornerLabel = isMajor ? card.roman : null; return ( ); }; window.CardFace = CardFace;