import { useMemo, useState, type CSSProperties } from "react"; import { Bike, Check, Clock3, Home, MapPinned, Plus, Search, Sparkles, UserRoundPlus, UtensilsCrossed, } from "lucide-react"; import HexLattice, { type HexNode } from "./HexLattice"; import CurrentAtmosphere from "./CurrentAtmosphere"; type CartCategoryKey = "food" | "activities" | "habitat"; type OnboardingStep = 1 | 2 | 3 | 4 | 5 | 6 | 7; type ClaimSlot = { id: string; name: string; signal: "hearts" | "stars" | "moons"; status: "dim" | "pending"; }; type SeedItem = { id: string; category: CartCategoryKey; name: string; }; const STEP_META: Record = { 1: { title: "Name + claim your hex", label: "Identity and ownership", icon: Sparkles }, 2: { title: "Plant your Inner Circle", label: "Six anchors, chosen once", icon: UserRoundPlus }, 3: { title: "First cart โ€” Food", label: "How you eat", icon: UtensilsCrossed }, 4: { title: "First cart โ€” Activities", label: "How you spend energy", icon: Bike }, 5: { title: "First cart โ€” Habitat", label: "How your space speaks", icon: Home }, 6: { title: "Your constellation begins", label: "Nine planted seeds", icon: Clock3 }, 7: { title: "First return โ€” The Current", label: "Ambient discovery", icon: Sparkles }, }; const INNER_CIRCLE: ClaimSlot[] = [ { id: "north", name: "Ari", signal: "hearts", status: "dim" }, { id: "northeast", name: "Sam", signal: "stars", status: "dim" }, { id: "southeast", name: "Jo", signal: "moons", status: "dim" }, { id: "south", name: "Mina", signal: "hearts", status: "dim" }, { id: "southwest", name: "Rae", signal: "stars", status: "dim" }, { id: "northwest", name: "Tae", signal: "moons", status: "dim" }, ]; const CATEGORY_META: Record = { food: { label: "Food", icon: "๐Ÿœ", accent: "#d4a574", prompt: "Tell us how you eat.", examples: ["Ramen Bar X", "Farmers market on Saturdays", "My own cooking"], }, activities: { label: "Activities", icon: "โ›ฐ๏ธ", accent: "#8ab6d6", prompt: "Tell us how you spend your time.", examples: ["Rock climbing on weekends", "Jazz vinyl listening", "Language learning apps"], }, habitat: { label: "Habitat", icon: "๐Ÿชด", accent: "#9ac18a", prompt: "Tell us about your space.", examples: ["My plants (14 and counting)", "Minimalist kitchen", "Bookshelf I actually use"], }, }; const CURRENT_PREVIEW = [ { name: "Mira", warmth: "hot", signal: "hearts" as const }, { name: "Sol", warmth: "warm", signal: "stars" as const }, { name: "Nadia", warmth: "cool", signal: "moons" as const }, { name: "Iris", warmth: "warm", signal: "hourglasses" as const }, { name: "Jun", warmth: "hot", signal: "balloons" as const }, { name: "Luca", warmth: "warm", signal: "stars" as const }, ]; function makeId(prefix: string) { return `${prefix}-${Math.random().toString(36).slice(2, 8)}-${Date.now().toString(36)}`; } function initials(name: string) { return name .split(/\s+/) .filter(Boolean) .map((part) => part[0]?.toUpperCase()) .slice(0, 2) .join(""); } function shortLabel(value: string, limit = 13) { const trimmed = value.trim().replace(/\s+/g, " "); return trimmed.length <= limit ? trimmed : `${trimmed.slice(0, limit - 1)}โ€ฆ`; } function categorySignal(category: CartCategoryKey) { if (category === "food") return "hearts" as const; if (category === "activities") return "stars" as const; return "moons" as const; } function warmthTone(warmth: "hot" | "warm" | "cool") { if (warmth === "hot") return { label: "Hot", icon: "๐Ÿ”ฅ", color: "#fb7185" }; if (warmth === "warm") return { label: "Warm", icon: "๐ŸŒก๏ธ", color: "#f59e0b" }; return { label: "Cool", icon: "๐ŸŒฟ", color: "#94a3b8" }; } function buildNodes(step: OnboardingStep, name: string, claims: ClaimSlot[], seeds: SeedItem[]): HexNode[] { const nodes: HexNode[] = [ { id: "center", ring: 0, position: 0, type: "you", label: name.trim() || "YOU", }, ]; claims.forEach((slot, index) => { nodes.push({ id: slot.id, ring: 1, position: index, type: slot.status === "dim" ? "dim" : "person", label: slot.name, resonanceSignal: slot.signal, }); }); if (step >= 3) { const ringForCategory: Record = { food: 2, activities: 2, habitat: 2, }; const positions: Record = { food: [0, 3, 6], activities: [1, 7, 13], habitat: [2, 8, 14], }; (Object.keys(ringForCategory) as CartCategoryKey[]).forEach((category) => { seeds .filter((item) => item.category === category) .slice(0, 3) .forEach((item, index) => { nodes.push({ id: item.id, ring: ringForCategory[category], position: positions[category][index], type: "person", label: shortLabel(item.name, 12), resonanceSignal: categorySignal(category), }); }); }); } if (step >= 7) { CURRENT_PREVIEW.forEach((person, index) => { nodes.push({ id: `current-${index}`, ring: 6, position: index * 6, type: person.warmth === "hot" ? "resonance-hot" : person.warmth === "warm" ? "resonance-warm" : "resonance-cool", label: initials(person.name), resonanceSignal: person.signal, }); }); } return nodes; } export interface CascadeOnboardingProps { title?: string; subtitle?: string; initialName?: string; onComplete?: () => void; } export default function CascadeOnboarding({ title = "Cascade Onboarding", subtitle = "Onboarding is not a tutorial. It is the first act of the game.", initialName = "", onComplete, }: CascadeOnboardingProps) { const [step, setStep] = useState(1); const [name, setName] = useState(initialName); const [claimed, setClaimed] = useState([]); const [drafts, setDrafts] = useState>({ food: "", activities: "", habitat: "" }); const [seeds, setSeeds] = useState([]); const plantedCount = 1 + claimed.length + seeds.length; const claimProgress = Math.round((claimed.length / 6) * 100); const categoryCounts = { food: seeds.filter((item) => item.category === "food").length, activities: seeds.filter((item) => item.category === "activities").length, habitat: seeds.filter((item) => item.category === "habitat").length, }; const canContinue = (step === 1 && name.trim().length > 0) || step === 2 || (step === 3 && categoryCounts.food > 0) || (step === 4 && categoryCounts.activities > 0) || (step === 5 && categoryCounts.habitat > 0) || (step === 6 && plantedCount >= 9) || step === 7; const activeMeta = STEP_META[step]; const latticeNodes = useMemo(() => buildNodes(step, name, INNER_CIRCLE.map((slot) => ({ ...slot, status: claimed.includes(slot.id) ? "pending" : "dim" })), seeds), [claimed, name, seeds, step]); const theme = { bg: "#09090d", panel: "rgba(18, 20, 28, 0.86)", card: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.10)", fg: "#f5eadc", muted: "rgba(245,234,220,0.68)", accent: "#d4a574", }; const next = () => { if (!canContinue) return; if (step === 7) { onComplete?.(); return; } setStep((current) => (Math.min(7, current + 1) as OnboardingStep)); }; const back = () => setStep((current) => Math.max(1, current - 1) as OnboardingStep); const toggleClaim = (id: string) => { setClaimed((current) => (current.includes(id) ? current.filter((value) => value !== id) : [...current, id])); }; const addSeed = (category: CartCategoryKey, value: string) => { const trimmed = value.trim(); if (!trimmed) return; setSeeds((current) => { const duplicate = current.some((item) => item.category === category && item.name.toLowerCase() === trimmed.toLowerCase()); if (duplicate) return current; return [...current, { id: makeId(category), category, name: trimmed }]; }); setDrafts((current) => ({ ...current, [category]: "" })); }; const removeSeed = (id: string) => setSeeds((current) => current.filter((item) => item.id !== id)); return (
Cascade / Onboarding

{title}

{subtitle}

Step {step} of 7
{plantedCount} planted
{Object.entries(STEP_META).map(([key, meta]) => { const number = Number(key) as OnboardingStep; const done = number < step || (number === 1 && name.trim().length > 0) || (number === 2 && claimed.length > 0) || (number === 3 && categoryCounts.food > 0) || (number === 4 && categoryCounts.activities > 0) || (number === 5 && categoryCounts.habitat > 0); return ( ); })}
{activeMeta.title}

{activeMeta.label}

{step === 1 ? : step === 2 ? : step === 7 ? : } {step === 1 ? "Center hex" : step === 2 ? "Bidirectional claim" : step >= 3 && step <= 5 ? "First cart items" : step === 6 ? "Consolidating" : "Hourly atmosphere"}
= 3 ? 2 : 0} />
Center
{name.trim() || "Your name goes here"}
The center hex is fixed. It cannot be moved or taken.
Ring 1
{claimed.length}/6 claimed
Claiming is bidirectional. Pending until mutual.
Ring 6
{step >= 7 ? "Atmosphere live" : "Forming hourly"}
People enter The Current at the hourly tempo.
); }