/* global React, ReactDOM */ (function () { const { useState, useEffect, useRef, useMemo } = React; const { MemoryWallModal, AdviceModal, BucketModal, CareModal, CutoutLayer, JournalModal, WishlistModal, CountdownWidget, MailboxCard, MailboxModal, MailboxButton, FeedCard, FeedModal, PublicFeedModal, PublicFeedTile, FundsCard, FundsModal, CollectionModal, LockedModal, LockBadge, useLayout, BUILTIN_IDS, LayoutSlot, CustomCard, SectionHeader, AddCardSheet, EditSheet, LayoutToolbar, useViewer, ChoiceScreen, PasswordScreen, FamilyView, ChangePasswordModal } = window; const BUILTIN_COLS = { memory: 7, advice: 5, bucket: 4, journal: 4, wishlist: 4, funds: 6, feed: 12, care: 6, letter: 12 }; // ========================================================= // LAUNCH GATING — under-construction / move-in locks // Flip MOVED_IN to true once Caiah is on campus to unlock everything. // (Could later be wired to a move-in date instead of a hard flag.) // ========================================================= const MOVED_IN = false; const LOCKED_SECTIONS = { advice: true, bucket: true, care: true }; const isSectionLocked = (id) => !MOVED_IN && !!LOCKED_SECTIONS[id]; // ========================================================= // ========================================================= // MUSIC PLAYER — Caiah's real playlist. Shuffles on load and // autoplays; advances automatically when a track ends. // ========================================================= const tracks = [ { title: "Juna", artist: "Clairo", src: "clairo-juna.mp3" }, { title: "Crack Rock", artist: "Frank Ocean", src: "crack-rock.mp3" }, { title: "Vibrate", artist: "Daniel Caesar", src: "daniel-caesar-vibrate.mp3" }, { title: "Yogurt Shake", artist: "NCT DREAM", src: "nct-dream-yogurt-shake.mp3" }, { title: "Girl Like Me", artist: "PinkPantheress", src: "pinkpantheress-girl-like-me.mp3" }, { title: "Chk Chk Boom", artist: "Stray Kids", src: "stray-kids-chk-chk-boom.mp3" }]; function KpopPlayer() { const audioRef = useRef(null); const [playing, setPlaying] = useState(false); // Shuffle the order once per page load. const order = useMemo(() => { const a = tracks.map((_, i) => i); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; }, []); const [pos, setPos] = useState(0); // index into `order` const idx = order[pos]; const t = tracks[idx]; const go = (delta) => setPos((p) => (p + delta + order.length) % order.length); // Load + (try to) autoplay whenever the track changes. useEffect(() => { const audio = audioRef.current; if (!audio) return; audio.src = t.src; audio.load(); const p = audio.play(); if (p && p.then) { p.then(() => setPlaying(true)).catch(() => setPlaying(false)); } }, [pos]); // Browsers block autoplay until a user gesture — start on first interaction. useEffect(() => { const audio = audioRef.current; if (!audio) return; const kick = () => { if (audio.paused) { audio.play().then(() => setPlaying(true)).catch(() => {}); } window.removeEventListener("pointerdown", kick); window.removeEventListener("keydown", kick); }; window.addEventListener("pointerdown", kick); window.addEventListener("keydown", kick); return () => { window.removeEventListener("pointerdown", kick); window.removeEventListener("keydown", kick); }; }, []); const toggle = () => { const audio = audioRef.current; if (!audio) return; if (audio.paused) { audio.play().then(() => setPlaying(true)).catch(() => {}); } else { audio.pause(); setPlaying(false); } }; return (
); } // ========================================================= // DOG MASCOT — cartoon black lab, barks + wags when clicked // ========================================================= const dogQuotes = [ "woof. she's cool i guess.", "i miss her already.", "tell her to come home for treats.", "i was here first btw.", "she always shared her snacks. legend.", "bark bark = i'm proud of u", "send treats. and caiah.", "she's annoying but she's MY annoying.", "did somebody say walk??", "she let me sleep on her bed once. iconic."]; function DogMascot() { const [showSpeech, setShowSpeech] = useState(false); const [quote, setQuote] = useState(dogQuotes[0]); const [barking, setBarking] = useState(false); const [wagging, setWagging] = useState(false); const [blink, setBlink] = useState(false); const timerRef = useRef(null); const wagTimerRef = useRef(null); // Idle blink every few seconds useEffect(() => { const id = setInterval(() => { setBlink(true); setTimeout(() => setBlink(false), 160); }, 4500 + Math.random() * 1500); return () => clearInterval(id); }, []); // Idle tail wag occasionally useEffect(() => { const id = setInterval(() => { setWagging(true); setTimeout(() => setWagging(false), 1800); }, 6000); return () => clearInterval(id); }, []); const click = () => { const q = dogQuotes[Math.floor(Math.random() * dogQuotes.length)]; setQuote(q); setShowSpeech(true); setBarking(true); setWagging(true); if (timerRef.current) clearTimeout(timerRef.current); if (wagTimerRef.current) clearTimeout(wagTimerRef.current); timerRef.current = setTimeout(() => setShowSpeech(false), 3200); setTimeout(() => setBarking(false), 800); wagTimerRef.current = setTimeout(() => setWagging(false), 2500); }; return (
{quote}
{/* Cartoon black lab — scrapbook style */} {/* ground shadow */} {/* WAGGING TAIL — behind body */} {/* BACK LEG */} {/* BODY */} {/* FRONT LEGS */} {/* CHEST FLEX (slight curve) */} {/* HEAD GROUP (bobs when barking) */} {/* head */} {/* FLOPPY EARS */} {/* inner ear */} {/* SNOUT */} {/* NOSE */} {/* nose shine */} {/* MOUTH (closed vs open during bark) */} {/* open bark mouth */} {/* EYES */} {/* EYEBROW SHEEN (subtle brown spots above eyes — common on black labs) */} {/* CHEEK BLUSH (matches scrapbook theme) */} {/* COLLAR */} {/* collar tag — bone-shaped, says "kemba" */} kemba {/* BARK SOUND DOODLES (visible during bark) */} woof! arf! !!
); } // ========================================================= // DOODLE SVG COMPONENTS // ========================================================= const Arrow = ({ rotate = 0, color = "var(--ink)", style = {} }) => ; const Squiggle = ({ width = "100%", color = "var(--pink-deep)" }) => ; const Star = ({ size = 32, color = "var(--butter-deep)", rotate = 0 }) => ; const Sparkle = ({ size = 24, color = "var(--pink-deep)", style = {} }) => ; const Heart = ({ size = 28, color = "var(--pink-deep)", rotate = 0 }) => ; const Flower = ({ size = 36, color = "var(--pink)", center = "var(--butter-deep)" }) => {[0, 60, 120, 180, 240, 300].map((a) => )} ; const DiscSticker = ({ size = 56, top = "var(--coral)", bottom = "white", style = {} }) => // original disc-shaped sticker, not Pokeball trademark ; const BlueHen = ({ size = 70 }) => // UDel blue hen mascot — original cartoon hen {/* body */} {/* head */} {/* comb */} {/* eye */} {/* beak */} {/* wattle */} {/* wing */} {/* legs */} ; const BlockyAvatar = ({ size = 50 }) => // generic sandbox-game blocky character — NOT Roblox's actual mark {/* head */} {/* body */} {/* arms */} {/* legs */} ; // ========================================================= // CONFETTI BURST // ========================================================= function useConfetti() { const canvasRef = useRef(null); const burst = (x, y) => { const c = canvasRef.current; if (!c) return; const ctx = c.getContext("2d"); c.width = window.innerWidth; c.height = window.innerHeight; const colors = ["#ff7b9e", "#a8d5e8", "#ffe89c", "#c7e8c7", "#d4c5e8", "#ff8a7a"]; const pieces = Array.from({ length: 70 }, () => ({ x, y, vx: (Math.random() - 0.5) * 12, vy: -Math.random() * 12 - 4, g: 0.4 + Math.random() * 0.3, color: colors[Math.floor(Math.random() * colors.length)], r: Math.random() * Math.PI, vr: (Math.random() - 0.5) * 0.4, size: 6 + Math.random() * 6, life: 80 })); let f = 0; const loop = () => { ctx.clearRect(0, 0, c.width, c.height); pieces.forEach((p) => { p.vy += p.g; p.x += p.vx; p.y += p.vy; p.r += p.vr; p.life--; ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.r); ctx.fillStyle = p.color; ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2); ctx.restore(); }); f++; if (f < 120) requestAnimationFrame(loop);else ctx.clearRect(0, 0, c.width, c.height); }; requestAnimationFrame(loop); }; return { canvasRef, burst }; } // ========================================================= // GRADUATION CELEBRATION — full-site confetti rain + banner. // Self-runs once on mount. (For now it fires every open; later we // can gate this on an actual graduation date.) // ========================================================= function GraduationCelebration({ onDone }) { const canvasRef = useRef(null); const [showBanner, setShowBanner] = useState(false); useEffect(() => { const c = canvasRef.current; if (!c) return; const ctx = c.getContext("2d"); let w = c.width = window.innerWidth; let h = c.height = window.innerHeight; const onResize = () => {w = c.width = window.innerWidth;h = c.height = window.innerHeight;}; window.addEventListener("resize", onResize); const colors = ["#ff7b9e", "#a8d5e8", "#ffe89c", "#c7e8c7", "#d4c5e8", "#ff8a7a", "#ffcf4f", "#6fb3d0"]; const RAIN_MS = 5200; // how long new confetti keeps spawning const start = performance.now(); // seed a population spread across the full width, staggered above the top const pieces = []; const spawn = (n) => { for (let i = 0; i < n; i++) { pieces.push({ x: Math.random() * w, y: -20 - Math.random() * h * 0.6, vx: (Math.random() - 0.5) * 3, vy: 2.5 + Math.random() * 3.5, g: 0.03 + Math.random() * 0.04, color: colors[Math.random() * colors.length | 0], r: Math.random() * Math.PI, vr: (Math.random() - 0.5) * 0.3, size: 7 + Math.random() * 8, sway: Math.random() * Math.PI * 2, swaySpeed: 0.02 + Math.random() * 0.03, ribbon: Math.random() < 0.35 }); } }; spawn(160); // pop the banner in shortly after the rain starts const bannerOn = setTimeout(() => setShowBanner(true), 250); const bannerOff = setTimeout(() => setShowBanner(false), 4200); let raf; const loop = (now) => { const elapsed = now - start; if (elapsed < RAIN_MS && pieces.length < 420) spawn(6); ctx.clearRect(0, 0, w, h); for (let i = pieces.length - 1; i >= 0; i--) { const p = pieces[i]; p.vy += p.g; p.sway += p.swaySpeed; p.x += p.vx + Math.sin(p.sway) * 1.1; p.y += p.vy; p.r += p.vr; ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.r); ctx.fillStyle = p.color; if (p.ribbon) ctx.fillRect(-p.size / 2, -p.size, p.size * 0.5, p.size * 2);else ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2); ctx.restore(); if (p.y > h + 40) pieces.splice(i, 1); } if (elapsed < RAIN_MS || pieces.length > 0) { raf = requestAnimationFrame(loop); } else { ctx.clearRect(0, 0, w, h); onDone && onDone(); } }; raf = requestAnimationFrame(loop); return () => { cancelAnimationFrame(raf); clearTimeout(bannerOn); clearTimeout(bannerOff); window.removeEventListener("resize", onResize); }; }, []); return ( ); } // ========================================================= // CAPSULE INTRO — shake, flash, open // ========================================================= function CapsuleIntro({ onEnter }) { const [stage, setStage] = useState("idle"); // idle, shake, open, gone const click = () => { if (stage !== "idle") return; setStage("shake"); // After shake → open flash; reveal corner mid-flash for seamless transition setTimeout(() => setStage("open"), 1150); setTimeout(onEnter, 1500); // start showing the corner behind the flash setTimeout(() => setStage("gone"), 2100); // remove the intro layer }; if (stage === "gone") return null; return (
{/* Floating doodles in background */}
✦ ♥ ✿ ★ ✦ ♡ ✿ ★
{/* shadow glow */} {/* BOTTOM HALF (cream) */} {/* tiny doodle */} caiah's {/* TOP HALF (pink) */} {/* highlight */} {/* sparkle */} ✦ {/* BAND */} {/* small dashes */} {/* CENTER BUTTON */} {/* Sparkles when about to be tapped */}
✦✦✦✦
{/* Flash burst (during opening) */}

caiah's corner

☞ tap the Poké Ball  to open
); } // ========================================================= // JOURNAL CARD — preview of today's mood + streak // ========================================================= function JournalCard({ onClick }) { const [tick, setTick] = useState(0); // re-read storage when this card mounts / on click changes const data = useMemo(() => { try { const saved = localStorage.getItem("caiah-journal"); const entries = saved ? JSON.parse(saved) : []; const today = (() => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; })(); const todayEntry = entries.find((e) => e.date === today); // streak let current = 0; const dates = new Set(entries.map((e) => e.date)); const d = new Date(); while (dates.has(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`)) { current++; d.setDate(d.getDate() - 1); } return { todayEntry, streak: current, total: entries.length }; } catch (e) {return { todayEntry: null, streak: 0, total: 0 };} }, [tick]); // poll lightly while card is on screen (so streak updates after editing) useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 2000); return () => clearInterval(id); }, []); return (

the daily scrap

{data.streak}
day streak
{data.todayEntry ? "✓ today done" : "today empty"}
→
); } // ========================================================= // WISHLIST CARD — preview of next few items // ========================================================= function WishlistCard({ onClick }) { const [tick, setTick] = useState(0); const data = useMemo(() => { try { const saved = localStorage.getItem("caiah-wishlist"); const items = saved ? JSON.parse(saved) : []; return { remaining: items.filter((i) => !i.received), got: items.filter((i) => i.received), items }; } catch (e) {return { remaining: [], got: [], items: [] };} }, [tick]); useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 2000); return () => clearInterval(id); }, []); return (

wishlist

{data.items.length === 0 ?

add what you need.
copy → send to mom.

: <>
{data.remaining.length} wanted · {data.got.length} got
}
); } // ========================================================= // MAIN APP // ========================================================= function App() { const [entered, setEntered] = useState(false); const [modal, setModal] = useState(null); const [hen, setHen] = useState(false); const [eggs, setEggs] = useState({ disc1: false, disc2: false, star: false, hen: false }); const [decorateMode, setDecorateMode] = useState(false); const { canvasRef, burst } = useConfetti(); const [grad, setGrad] = useState(false); // === VIEWER GATE === const { viewer, setViewer, lock } = useViewer(); const [gateStep, setGateStep] = useState("choice"); // 'choice' | 'password' const [lockMenu, setLockMenu] = useState(false); // Fire the graduation celebration only once Caiah unlocks her own corner // (not on capsule open, and not for family view). Plays once per unlock. const gradShownRef = useRef(false); useEffect(() => { if (entered && viewer === "caiah" && !gradShownRef.current) { gradShownRef.current = true; setGrad(true); } // reset so it can replay if she locks back out and returns if (viewer !== "caiah") gradShownRef.current = false; }, [entered, viewer]); // === LAYOUT EDITING === const { layout, moveItem, removeItem, addItem, updateItem, restoreBuiltin, resetLayout } = useLayout(); const [editing, setEditing] = useState(false); const [draggingIdx, setDraggingIdx] = useState(null); const [showAdd, setShowAdd] = useState(false); const [editingItem, setEditingItem] = useState(null); const [openCollection, setOpenCollection] = useState(null); // collection-card detail modal // Listen for decorate-mode broadcasts from CutoutLayer useEffect(() => { const h = (e) => setDecorateMode(!!e.detail); window.addEventListener("decorate-mode", h); return () => window.removeEventListener("decorate-mode", h); }, []); // Cutout layer "edit page" tool jumps into layout edit mode useEffect(() => { const h = () => setEditing(true); window.addEventListener("request-edit-page", h); return () => window.removeEventListener("request-edit-page", h); }, []); const open = (m, e) => { if (decorateMode) return; // ← scene cards inert while decorating if (editing) return; // ← cards inert while editing layout if (isSectionLocked(m)) {setModal("locked:" + m);return;} setModal(m); if (e && e.currentTarget) { const r = e.currentTarget.getBoundingClientRect(); burst(r.left + r.width / 2, r.top + r.height / 2); } }; const popEgg = (key, e) => { if (decorateMode) return; if (eggs[key]) return; setEggs((g) => ({ ...g, [key]: true })); if (e) { const x = e.clientX || e.currentTarget && e.currentTarget.getBoundingClientRect().left + 20; const y = e.clientY || e.currentTarget && e.currentTarget.getBoundingClientRect().top + 20; burst(x, y); } }; const foundEggs = Object.values(eggs).filter(Boolean).length; return ( <> {!entered && setEntered(true)} />} {entered && viewer === "caiah" && grad && setGrad(false)} />} {/* Once the capsule is open, gate the corner by viewer */} {entered && viewer !== "caiah" && <> {viewer === "family" ? {setGateStep("password");setViewer(null);}} onLockBack={() => {setGateStep("choice");setViewer(null);}} /> : gateStep === "password" ? setViewer("caiah")} onBack={() => setGateStep("choice")} /> : setGateStep("password")} onPickFamily={() => setViewer("family")} /> } } {/* THE FULL CORNER — only for caiah */} {entered && viewer === "caiah" && <>
{/* TITLE */}
welcome to

caiah's corner

{/* floating stickers around title */}
{/* MAIN BOARD — rendered from layout.items so user can rearrange */} {(() => { const BUILTIN_ELEMENTS = { memory:
open("memory", e)}>

the memory wall

soon ↗
under construction

, // === ADVICE STACK === advice:
open("advice", e)} style={{ background: "var(--butter)" }}> {isSectionLocked("advice") &&
opens at move-in
}

unsolicited advice

for the college era · 8 cards

"you didn't ask.
you're getting it.
that's the deal."

open the stack →
, // === BUCKET LIST === bucket:
open("bucket", e)} style={{ background: "white", transform: "rotate(-1deg)" }}> {isSectionLocked("bucket") &&
opens at move-in
}
to-do · freshman year

bucket list

  • ☐ survive welcome week
  • ☑ graduate hs
  • ☐ best dining hall cookie
  • ☐ ...8 more
, // === DAILY SCRAP (JOURNAL) === journal: open("journal", e)} />, // === WISHLIST === wishlist: open("wishlist", e)} />, // === FUNDS (money tracker) === funds: open("funds", e)} />, // === KEEP UP (PHOTO FEED) === feed: open("feed", e)} />, // === CARE PACKAGE === care:
open("care", e)} style={{ background: "var(--lavender)", transform: "rotate(-0.6deg)" }}> {isSectionLocked("care") &&
opens at move-in
}
survival kit · 6 items

care package

the digital kind. links you'll actually need at UDel.

{["udel", "cs", "spotify", "art", "+more"].map((t, i) => {t} )}
, // === THE LETTER === letter:

caiah,

We all play many different roles in life. I'm somebody's son, somebody's friend, co-worker, neighbor; the list goes on and on. Without a doubt my absolute favorite role to play is your big brother. I am so proud of everything you've accomplished so far, and even more proud of who you have become as a young woman. It has truly been a privilege to grow up alongside you. I can't wait to continue to watch you grow, and I promise to be with you every step of the way and support in whatever way you need.   - Love, Juju

popEgg("hen", e)} title="psst"> {eggs.hen ? "✓ hen poked!" : "pet the hen?"}
}; const presentBuiltins = new Set(layout.items.filter((i) => i.kind === 'builtin').map((i) => i.builtinId)); const restoreOptions = BUILTIN_IDS.filter((id) => !presentBuiltins.has(id)); return (
{layout.items.map((item, idx) => { let content = null; let col; if (item.kind === 'builtin') { content = BUILTIN_ELEMENTS[item.builtinId]; col = item.col || BUILTIN_COLS[item.builtinId] || 6; } else if (item.kind === 'header') { content = ; col = 12; } else { content = updateItem(item.id, patch)} onOpen={() => setOpenCollection(item.id)} />; col = item.col || 6; } if (!content) return null; return ( removeItem(item.id)} onEdit={() => setEditingItem(item)} onResize={(newCol) => updateItem(item.id, { col: newCol })}> {content} ); })} {editing && }
); })()} {/* SCATTERED EASTER-EGG STICKERS (interactive!) */}
popEgg("disc1", e)} title="click me">
popEgg("star", e)} title="click me">
popEgg("disc2", e)} title="click me">
{/* DOODLES */}
{/* blocky avatar sticker */}
{/* SCATTERED FLOWERS / SPARKLES */}
{/* FOOTER */}
made with love by Juju
{/* Top-right utility cluster — mailbox lives next to decorate. (Edit-page entry moved into the decorate toolbar.) */}
setModal("mailbox")} />
{lockMenu && <>
setLockMenu(false)}>
}
setEditing((v) => !v)} onAdd={() => setShowAdd(true)} onReset={() => { if (confirm("reset to the original layout? this won't delete custom cards you've created — but they'll be removed from the page.")) { resetLayout(); } }} /> {showAdd && setShowAdd(false)} onAdd={addItem} restoreOptions={BUILTIN_IDS.filter( (id) => !layout.items.some((it) => it.kind === "builtin" && it.builtinId === id) )} onRestore={restoreBuiltin} /> } {editingItem && setEditingItem(null)} onSave={(patch) => updateItem(editingItem.id, patch)} /> } {modal === "memory" && setModal(null)} />} {modal === "advice" && setModal(null)} />} {modal === "bucket" && setModal(null)} />} {modal === "care" && setModal(null)} />} {modal === "journal" && setModal(null)} />} {modal === "wishlist" && setModal(null)} />} {modal === "mailbox" && setModal(null)} />} {modal === "feed" && setModal(null)} />} {modal === "funds" && setModal(null)} />} {modal === "changepw" && setModal(null)} />} {typeof modal === "string" && modal.startsWith("locked:") && setModal(null)} />} {openCollection && (() => { const item = layout.items.find((it) => it.id === openCollection); if (!item) return null; return ( setOpenCollection(null)} onUpdate={(patch) => updateItem(item.id, patch)} />); })()} } ); } // Wait for the Supabase hydration to finish (or resolve instantly in // localStorage-only mode) so the first render sees synced data. const __mount = () => ReactDOM.createRoot(document.getElementById("root")).render(); if (window.DB && window.DB.ready && typeof window.DB.ready.then === "function") { window.DB.ready.then(__mount); } else { __mount(); } })();