// mandala.jsx — 5-ring natal mandala (3 visual variants)
// Rings (outer → inner):
// 5 Òrìṣà (outermost) · 4 Manāzil · 3 Baḥrä · 2 Ifá · 1 Sba (innermost)
// Click any sector → scroll to that layer's section.
const DECAN_HI = ["𓇳","𓃀","𓇼","𓈖","𓅓","𓎡","𓏏","𓊪","𓂀","𓋴","𓃹","𓆓"];
const GEEZ_NUMS = ["፩","፪","፫","፬","፭","፮","፯","፰","፱","፲","፲፩","፲፪"];
const ARABIC_LETTERS = ["ا","ب","ت","ث","ج","ح","خ","د","ذ","ر","ز","س"];
const COWRIE = "⌣";
function polar(cx, cy, r, deg){
const rad = (deg - 90) * Math.PI / 180;
return [cx + r*Math.cos(rad), cy + r*Math.sin(rad)];
}
function arcPath(cx, cy, rOuter, rInner, a0, a1){
const [x1,y1] = polar(cx, cy, rOuter, a0);
const [x2,y2] = polar(cx, cy, rOuter, a1);
const [x3,y3] = polar(cx, cy, rInner, a1);
const [x4,y4] = polar(cx, cy, rInner, a0);
const large = (a1 - a0) > 180 ? 1 : 0;
return `M ${x1} ${y1} A ${rOuter} ${rOuter} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${rInner} ${rInner} 0 ${large} 0 ${x4} ${y4} Z`;
}
const PLANETS = [
{ id: "sun", sym: "☉", label: "SUN" },
{ id: "moon", sym: "☽", label: "MOON" },
{ id: "mercury", sym: "☿", label: "MERC" },
{ id: "venus", sym: "♀", label: "VEN" },
{ id: "mars", sym: "♂", label: "MARS" },
{ id: "jupiter", sym: "♃", label: "JUP" },
{ id: "saturn", sym: "♄", label: "SAT" },
{ id: "asc", sym: "Asc", label: "ASC" }
];
function Mandala({ chart, style, breathing, onHover, onLeave, drawOn }) {
// style: 'dense' | 'austere' | 'lithograph'
const cx = 400, cy = 400;
const R = {
r5o: 390, r5i: 350, // Orisha
r4o: 350, r4i: 300, // Manazil
r3o: 300, r3i: 250, // Bahere
r2o: 250, r2i: 200, // Ifa
r1o: 200, r1i: 110, // Sba
center: 100
};
const handleEnter = (e, data) => onHover && onHover(e, data);
const scrollToLayer = (id) => {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
// Dense = heavier fills/textures; Austere = thin lines only; Lithograph = mixed textures
const isDense = style === 'dense';
const isAust = style === 'austere';
const isLith = style === 'lithograph';
// Ring 1: Sba — 36 decans, 10° each
const sbaSectors = Array.from({length: 36}, (_, i) => {
const a0 = i*10, a1 = a0+10;
const mid = a0 + 5;
const [tx, ty] = polar(cx, cy, (R.r1o + R.r1i)/2, mid);
return (
scrollToLayer('sba')}
onMouseEnter={(e) => handleEnter(e, { name: `Decan ${i+1}`, lit: `${a0}°–${a1}°`, gloss: `Sba · ring of 36 ten-degree decans of the ecliptic` })}
onMouseLeave={onLeave}
style={{ cursor: 'pointer' }}
/>
{(isDense || isLith) && i%3===0 && (
{DECAN_HI[i%12]}
)}
);
});
// Ring 2: Ifá — 16 major odù (each is 22.5°)
const ifaSectors = Array.from({length: 16}, (_, i) => {
const a0 = i*22.5, a1 = a0+22.5;
const mid = a0 + 11.25;
const [tx, ty] = polar(cx, cy, (R.r2o + R.r2i)/2, mid);
// Draw binary 4-mark pattern for each sector
const bits = [(i>>3)&1, (i>>2)&1, (i>>1)&1, i&1];
return (
scrollToLayer('ifa')}
onMouseEnter={(e) => handleEnter(e, { name: `Odù ${i+1}/16`, lit: `binary ${bits.join('')}`, gloss: `Ifá · 256-figure divination corpus · 16 major patterns` })}
onMouseLeave={onLeave}
style={{ cursor: 'pointer' }}
/>
{/* 4-mark binary rendered as tiny rects */}
{bits.map((b, j) => (
b === 1
?
: (
)
))}
);
});
// Ring 3: Baḥrä — 12 liturgical months, Ge'ez numerals
const bahereSectors = Array.from({length: 12}, (_, i) => {
const a0 = i*30, a1 = a0+30;
const mid = a0 + 15;
const [tx, ty] = polar(cx, cy, (R.r3o + R.r3i)/2, mid);
const redAccent = isDense && (i===0 || i===3 || i===7);
return (
scrollToLayer('bahere')}
onMouseEnter={(e) => handleEnter(e, { name: `Month ${i+1}`, lit: GEEZ_NUMS[i], gloss: `Baḥrä Ḥasab · Ethiopian liturgical reckoning` })}
onMouseLeave={onLeave}
style={{ cursor: 'pointer' }}
/>
{GEEZ_NUMS[i]}
);
});
// Ring 4: Manāzil — 28 lunar mansions, arranged with tiny crescents
const manzilSectors = Array.from({length: 28}, (_, i) => {
const a0 = (360/28)*i, a1 = a0 + 360/28;
const mid = a0 + (360/56);
const [tx, ty] = polar(cx, cy, (R.r4o + R.r4i)/2, mid);
return (
scrollToLayer('manzil')}
onMouseEnter={(e) => handleEnter(e, { name: `Manzil ${i+1}`, lit: ARABIC_LETTERS[i%12], gloss: `Manāzil al-Qamar · 28 lunar mansions · Indian Ocean navigation` })}
onMouseLeave={onLeave}
style={{ cursor: 'pointer' }}
/>
{(isDense || isLith) && (
// little crescent
)}
);
});
// Ring 5: Òrìṣà — 7 day-guardians (for weekdays), split sectors
const ORISHA_DAYS = [
{ nm: "Èṣù", day: "Sun" },
{ nm: "Ọbàtálá", day: "Mon" },
{ nm: "Ògún", day: "Tue" },
{ nm: "Ọbàtálá", day: "Wed" },
{ nm: "Ṣàngó", day: "Thu" },
{ nm: "Ọ̀ṣun", day: "Fri" },
{ nm: "Babalú", day: "Sat" }
];
const orishaSectors = ORISHA_DAYS.map((o, i) => {
const a0 = (360/7)*i, a1 = a0 + 360/7;
const mid = a0 + (360/14);
const [tx, ty] = polar(cx, cy, (R.r5o + R.r5i)/2, mid);
return (
scrollToLayer('orisha')}
onMouseEnter={(e) => handleEnter(e, { name: o.nm, lit: o.day, gloss: `Òrìṣà · day-guardian lineage · diasporic re-weave` })}
onMouseLeave={onLeave}
style={{ cursor: 'pointer' }}
/>
{o.nm}
{o.day.toUpperCase()}
);
});
// Planet dots on Ring 1 (decans)
const planetDots = PLANETS.map((p) => {
const lon = chart.absolute_longitudes[p.id];
if (lon === undefined) return null;
const rDot = (R.r1o + R.r1i) / 2;
const [px, py] = polar(cx, cy, rDot, lon);
const [lx, ly] = polar(cx, cy, rDot - 32, lon);
return (
{p.sym}
);
});
// Zodiac / 12-gate grid lines
const gridLines = Array.from({length: 12}, (_, i) => {
const a = i*30;
const [x1,y1] = polar(cx, cy, R.center, a);
const [x2,y2] = polar(cx, cy, R.r5o, a);
return ;
});
// Cardinal markers (12 / 3 / 6 / 9 o'clock)
const cardinals = [
{ a: 0, label: "ASC" },
{ a: 90, label: "DSC" },
{ a: 180, label: "IC" },
{ a: 270, label: "MC" }
].map((c, i) => {
const [x, y] = polar(cx, cy, R.r5o + 18, c.a);
return (
{c.label}
);
});
return (
);
}
window.Mandala = Mandala;