/* global React */
const { useState, useEffect, useRef, useMemo } = React;
/* ─── Zodiac data ─── */
const SIGNS = [
{ id: 'aries', sym: '♈', nm: 'ОВЕН', full: 'Овен', dates: '21 мар — 20 апр' },
{ id: 'taurus', sym: '♉', nm: 'ТЕЛЕЦ', full: 'Телец', dates: '21 апр — 21 мая' },
{ id: 'gemini', sym: '♊', nm: 'БЛИЗНЕЦЫ', full: 'Близнецы', dates: '22 мая — 21 июн' },
{ id: 'cancer', sym: '♋', nm: 'РАК', full: 'Рак', dates: '22 июн — 22 июл' },
{ id: 'leo', sym: '♌', nm: 'ЛЕВ', full: 'Лев', dates: '23 июл — 22 авг' },
{ id: 'virgo', sym: '♍', nm: 'ДЕВА', full: 'Дева', dates: '23 авг — 22 сен' },
{ id: 'libra', sym: '♎', nm: 'ВЕСЫ', full: 'Весы', dates: '23 сен — 22 окт' },
{ id: 'scorpio', sym: '♏', nm: 'СКОРПИОН', full: 'Скорпион', dates: '23 окт — 21 ноя' },
{ id: 'sagittarius', sym: '♐', nm: 'СТРЕЛЕЦ', full: 'Стрелец', dates: '22 ноя — 21 дек' },
{ id: 'capricorn', sym: '♑', nm: 'КОЗЕРОГ', full: 'Козерог', dates: '22 дек — 19 янв' },
{ id: 'aquarius', sym: '♒', nm: 'ВОДОЛЕЙ', full: 'Водолей', dates: '20 янв — 18 фев' },
{ id: 'pisces', sym: '♓', nm: 'РЫБЫ', full: 'Рыбы', dates: '19 фев — 20 мар' },
];
window.SIGNS = SIGNS;
window.signById = (id) => SIGNS.find(s => s.id === id) || SIGNS[4];
/* ─── Starfield ─── */
function Starfield({ count = 26, seed = 7 }) {
const stars = useMemo(() => {
let s = seed * 9301 + 49297;
const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
return Array.from({ length: count }, () => ({
x: rnd() * 100,
y: rnd() * 100,
r: rnd() < 0.18 ? 1.6 : 1.0,
a: 0.25 + rnd() * 0.55,
delay: rnd() * 6,
dur: 4 + rnd() * 5,
gold: rnd() < 0.35,
}));
}, [count, seed]);
return (
);
}
window.Starfield = Starfield;
/* ─── Status bar (Android) ─── */
function StatusBar({ time = '9:41' }) {
return (
);
}
window.StatusBar = StatusBar;
/* ─── Bottom nav ─── */
const TABS = [
{ id: 'horoscope', glyph: '✦', label: 'Гороскоп' },
{ id: 'natal', glyph: '✶', label: 'Карта' },
{ id: 'days', glyph: '◐', label: 'Дни' },
{ id: 'oracle', glyph: '☽', label: 'Оракул' },
{ id: 'profile', glyph: '⚙', label: 'Профиль' },
];
function BottomNav({ active, onChange }) {
return (
{TABS.map(t => (
))}
);
}
window.BottomNav = BottomNav;
window.TABS = TABS;
/* ─── Page header (sub-screens) ─── */
function PageHeader({ crumb, onBack, right }) {
return (
);
}
window.PageHeader = PageHeader;
/* ─── Glyph divider ─── */
function GlyphDivider({ glyph = '◆' }) {
return (
{glyph}
);
}
window.GlyphDivider = GlyphDivider;
/* ─── Sigil (large central glyph ring) ─── */
function Sigil({ size = 110, children }) {
return (
{children}
);
}
window.Sigil = Sigil;
/* ─── Moon phase glyph (drawn) ─── */
function MoonPhase({ phase = 0.35, size = 56 }) {
// phase 0=new, 0.25=first quarter, 0.5=full, 0.75=last quarter
const r = size / 2 - 2;
const cx = size / 2, cy = size / 2;
// simple: compute width of crescent shape via ellipse mask
const k = Math.abs(0.5 - phase) * 4; // 0=full, 1=new ish
const lit = phase < 0.5;
return (
);
}
window.MoonPhase = MoonPhase;
/* ─── Natal chart wheel (SVG) ─── */
function NatalWheel({ size = 320 }) {
const cx = size / 2, cy = size / 2;
const rOuter = size / 2 - 4;
const rZodiac = rOuter - 26;
const rHouses = rZodiac - 36;
const rPlanets = rHouses - 30;
const signs = ['♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓'];
// 12 zodiac sectors
const sectors = Array.from({ length: 12 }, (_, i) => {
const a1 = (i * 30 - 90) * Math.PI / 180;
const a2 = ((i + 1) * 30 - 90) * Math.PI / 180;
const mid = (a1 + a2) / 2;
return { a1, a2, mid, label: signs[i] };
});
// 12 house cusps
const cusps = Array.from({ length: 12 }, (_, i) => (i * 30 - 90) * Math.PI / 180);
// Sample planets
const planets = [
{ sym: '☉', deg: 142 }, // sun in leo
{ sym: '☽', deg: 268 }, // moon
{ sym: '☿', deg: 130 },
{ sym: '♀', deg: 178 },
{ sym: '♂', deg: 22 },
{ sym: '♃', deg: 305 },
{ sym: '♄', deg: 75 },
{ sym: '♅', deg: 250 },
{ sym: '♆', deg: 195 },
{ sym: '♇', deg: 95 },
];
const planetPos = planets.map(p => {
const ang = (p.deg - 90) * Math.PI / 180;
return { ...p, ang, x: cx + Math.cos(ang) * rPlanets, y: cy + Math.sin(ang) * rPlanets };
});
// Aspect lines: pair some
const aspects = [[0,4],[1,7],[2,6],[3,8],[5,9],[0,2]];
return (
);
}
window.NatalWheel = NatalWheel;
/* ─── Resonance ring ─── */
function ResonanceRing({ value = 72, size = 220 }) {
const stroke = 10;
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - value / 100);
// color: red→gold→green
const color = value < 40 ? '#E26565' : value < 70 ? '#C9A86A' : '#4FBD6E';
return (
);
}
window.ResonanceRing = ResonanceRing;