// screens.jsx — all full-screen views: Welcome, GamesHub, ChapterSelect,
// CardGallery, FairyMap (level select), RewardScreen, the rest-timer screens
// (TiredToast / GoodnightScreen / SleepScreen), card overlays, MilestonePopup,
// MusicButton, and the ParentDashboard.
const { useState: useSt, useEffect: useEf, useRef: useRf } = React;
// ── soft sky gradient backdrop used on every screen ──
function Sky({ children }) {
return (
{/* soft clouds (percentage positions so they spread on any width) */}
{[['-5%', '10%', 150], ['62%', '17%', 120], ['14%', '37%', 110], ['68%', '54%', 140]].map((c, i) => (
))}
{children}
);
}
// ─────────────────────────────────────────────────────────────
// MILESTONE POP-UP — brief celebration when the child hits a word streak
// (10, 20, …). Shows a character card + streak count, then the parent
// (App) removes it after a short timer. Non-blocking (pointer-events off).
// ─────────────────────────────────────────────────────────────
function MilestonePopup({ n, src, exiting, isNew }) {
return (
{/* star burst */}
{Array.from({ length: 12 }).map((_, i) => (
{['⭐', '✨', '🌟'][i % 3]}
))}
{ e.target.style.display = 'none'; }} />
🔥 {n} pēc kārtas!
{isNew && (
🎴 Jauna kartiņa albumā!
)}
);
}
// ── round music on/off button (🎵 / 🔇) ──
function MusicButton({ on, onToggle, style = {} }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// REST TIMER — "Kikija nogurst". The fairy (not the child) gets tired:
// a gentle yawn warning first, later a calm goodnight scene, then a
// sleeping-fairy cooldown screen until she is rested again.
// ─────────────────────────────────────────────────────────────
// non-blocking corner toast shown a few minutes before the session ends
function TiredToast() {
return (
Kikija sāk nogurst… 🥱 Vēl mazliet — un viņa ies gulēt!
);
}
// dark starry backdrop for the goodnight / sleep screens (theme-independent)
function NightSky({ children }) {
return (
))}
);
}
// calm session ending: positive recap + the child "tucks the fairy in"
function GoodnightScreen({ sessionWords, sessionStars, onGoodnight }) {
return (
🌙
Kikija ir nogurusi 🥱
Tu šodien biji malacis!
Šodien: {sessionWords} vārdi · ⭐ {sessionStars}
🌟
Tava labunakts zvaigznīte!
);
}
// simple arithmetic parental gate — shown after the secret version-number tap
// gesture (see app.jsx), so a young child can't wake the fairy or reach the
// parent dashboard just by fumbling around. Numbers are two-digit so it can't
// be brute-forced by mashing a couple of digits.
function ParentGate({ onSuccess, onCancel }) {
const gen = () => ({ a: 10 + Math.floor(Math.random() * 40), b: 10 + Math.floor(Math.random() * 40) });
const [challenge, setChallenge] = useSt(gen);
const [value, setValue] = useSt('');
const [wrong, setWrong] = useSt(false);
const inputRef = useRf(null);
useEf(() => { inputRef.current && inputRef.current.focus(); }, []);
const submit = (e) => {
e.preventDefault();
if (Number(value) === challenge.a + challenge.b) { onSuccess(); return; }
setWrong(true);
setChallenge(gen());
setValue('');
setTimeout(() => setWrong(false), 500);
};
return (
);
}
// cooldown: the fairy sleeps while a moon travels an arc toward the sun.
// Cards stay browsable (calm activity). Parents wake her early via the secret
// version-number tap gesture in app.jsx (which opens the math check there),
// not from anything on this screen.
function SleepScreen({ sleepUntil, cooldownMs, onWake, onShowCards }) {
const [now, setNow] = useSt(() => Date.now());
useEf(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const remaining = Math.max(0, (sleepUntil || 0) - now);
const awake = remaining <= 0;
const p = cooldownMs > 0 ? Math.min(1, Math.max(0, 1 - remaining / cooldownMs)) : 1;
const remMin = Math.floor(remaining / 60000);
const remSec = Math.floor((remaining % 60000) / 1000);
const remStr = `${remMin}:${String(remSec).padStart(2, '0')}`;
// moon position along the arc: left horizon → top → the sun on the right
const W = 320, H = 150, R = 128, CX = W / 2, CY = H - 6;
const a = Math.PI * (1 - p);
const mx = CX + R * Math.cos(a), my = CY - R * Math.sin(a);
if (awake) return (
);
}
// ─────────────────────────────────────────────────────────────
// CARD TILE — one collectible card in a grid (gallery or peek).
// Unlocked cards are tappable; locked ones show a grey "?".
// ─────────────────────────────────────────────────────────────
function CardTile({ ch, isUnlocked, isCompanion, delay = 0, onOpen }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// CARD DETAIL — one card up close. With `onChoose` the child can pick it
// as the companion ("Mans draugs!"); without it the view is read-only.
// ─────────────────────────────────────────────────────────────
function CardDetail({ chapter, isCompanion, onChoose, onClose }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// CARD PEEK — overlay with the collected cards, openable from inside any
// game (🎴 in the top bar). The game underneath keeps running untouched.
// A scrollable grid (view-only); tap a card to see it big.
// ─────────────────────────────────────────────────────────────
function CardPeek({ chapters, currentId, streakCards = 0, onClose }) {
const unlocked = chapters.filter(c => c.endId < currentId).length
+ Math.min(streakCards, STREAK_CARDS.length);
const totalCards = chapters.length + STREAK_CARDS.length;
const [detail, setDetail] = useSt(null);
return (
<>
);
}
// ─────────────────────────────────────────────────────────────
// CHAPTER SELECT — the journey, split into short books of ~10 words.
// Each chapter the child can actually finish; completing one unlocks the
// next plus a collectible card. State is derived from the global currentId.
// ─────────────────────────────────────────────────────────────
function ChapterSelect({ chapters, currentId, levelStars, totalStars, onPick, onBack, musicOn, onToggleMusic }) {
return (