/* TerraBloom Interactive ecosystem prototype */ const { useMemo, useState } = React; const { checkRequirements, placeOrToggleOrganism, calculateHealth, calculateStatus, } = window.EcosystemLogic; const { ORGANISMS, PLACEMENT_SLOTS, PROGRESSION_ORDER, OBJECTIVES, } = window.EcosystemConfig; const TYPE_ORDER = ["Abiotic", "Producer", "Primary consumer", "Secondary consumer"]; const SUN_RAY_ANGLES = [0, 45, 90, 135, 180, 225, 270, 315]; function formatNaturalList(items) { if (items.length <= 1) { return items[0] || ""; } if (items.length === 2) { return `${items[0]} and ${items[1]}`; } return `${items.slice(0, -1).join(", ")}, and ${items[items.length - 1]}`; } function OrgIcon({ id, className }) { switch (id) { case "sun": return ( ); case "water": return ( ); case "grass": return ( ); case "tree": return ( ); case "bee": return ( ); case "rabbit": return ( ); case "bird": return ( ); case "fox": return ( ); default: return null; } } function App() { const [placed, setPlaced] = useState(new Set()); const [warning, setWarning] = useState(null); const [pulseId, setPulseId] = useState(null); const [eventFeedback, setEventFeedback] = useState("Start with Sunlight and Rain to wake up Earth."); const [whyMatters, setWhyMatters] = useState( "Ecosystems need both non-living factors and living organisms to stay healthy.", ); const organismById = useMemo( () => ORGANISMS.reduce((acc, item) => ({ ...acc, [item.id]: item }), {}), [], ); const unlocksById = useMemo(() => { const map = {}; for (const organism of ORGANISMS) { map[organism.id] = []; } for (const organism of ORGANISMS) { for (const req of organism.requires) { map[req].push(organism.name); } } return map; }, []); const health = useMemo(() => calculateHealth(placed.size, ORGANISMS.length), [placed]); const status = useMemo(() => calculateStatus(placed.size), [placed]); const progressionIndex = useMemo(() => { let count = 0; for (const id of PROGRESSION_ORDER) { if (!placed.has(id)) { break; } count += 1; } return count; }, [placed]); const objective = useMemo(() => { if (placed.size === ORGANISMS.length) { return OBJECTIVES.complete; } const nextId = PROGRESSION_ORDER.find((id) => !placed.has(id)); if (!nextId) { return OBJECTIVES.complete; } const nextOrganism = organismById[nextId]; const missing = nextOrganism.requires.filter((req) => !placed.has(req)); if (missing.length === 0) { return `Objective: add ${nextOrganism.name} next.`; } const missingNames = formatNaturalList(missing.map((id) => organismById[id].name)); return `Objective: unlock ${nextOrganism.name} by placing ${missingNames}.`; }, [placed, organismById]); const groupedOrganisms = useMemo(() => { return TYPE_ORDER.map((type) => ({ type, items: ORGANISMS.filter((item) => item.type === type), })).filter((group) => group.items.length > 0); }, []); function place(id) { const wasPlaced = placed.has(id); const result = placeOrToggleOrganism(id, placed, ORGANISMS); setPlaced(result.nextPlaced); setWarning(result.warning); setPulseId(result.pulseId); if (result.warning) { setEventFeedback(result.warning); setWhyMatters("Order matters in ecosystems. Some organisms cannot survive without prerequisites."); } else if (wasPlaced) { setEventFeedback(`${organismById[id].name} removed. Dependent species may decline.`); setWhyMatters("When one species disappears, connected species can also collapse."); } else { setEventFeedback(`Great choice! ${organismById[id].chainReaction}`); setWhyMatters(organismById[id].why); } if (result.pulseTimeoutMs !== null) { setTimeout(() => setPulseId(null), result.pulseTimeoutMs); } if (result.warningTimeoutMs !== null) { setTimeout(() => setWarning(null), result.warningTimeoutMs); } } function reset() { setPlaced(new Set()); setWarning(null); setPulseId(null); setEventFeedback("Planet reset. Start again with Sunlight and Rain."); setWhyMatters("Strong ecosystems grow step by step from basic needs."); } const greenness = placed.size / ORGANISMS.length; const earthBg = `radial-gradient(circle at 30% 28%, ${greenness > 0.1 ? "#E5F0CF" : "#F0DBA8"} 0%, ${greenness > 0.2 ? "#A9D879" : "#E2B476"} 22%, ${greenness > 0.4 ? "#7AB648" : "#C99963"} 45%, ${greenness > 0.6 ? "#4F8A35" : "#A26538"} 75%, ${greenness > 0.8 ? "#2C5A22" : "#7B4F2A"} 100%)`; const waterReady = placed.has("water"); const plantsReady = placed.has("grass") && placed.has("tree"); const balanceReady = placed.has("bird") && placed.has("fox"); return (
Ecosystem health {status.label}
{PROGRESSION_ORDER.map((id, index) => { const item = organismById[id]; const isPlaced = placed.has(id); const isCurrent = index === progressionIndex && !isPlaced; return (
{index + 1}
{item.name}
); })}

Grassland world

Watch Earth shift from barren to blooming as species connect.

{[...placed].map((id) => { const slot = PLACEMENT_SLOTS.find((item) => item.id === id); if (!slot) { return null; } return (
); })} {placed.size === 0 && ( )}
💧 Water cycle 🌿 Plant cover 🦊 Predator balance
{warning && (
⚠ {warning}
)}

Current objective

{objective || OBJECTIVES.start}

Chain reaction

{eventFeedback}

Why this matters

{whyMatters}

{eventFeedback}
); } const rootNode = document.getElementById("eco-app"); if (rootNode) { const root = ReactDOM.createRoot(rootNode); root.render(); }