const { useState, useEffect, useMemo, useRef, useCallback } = React; const uS = useState, uE = useEffect, uM = useMemo, uR = useRef; const hUS = useState, hUE = useEffect, hUM = useMemo; const pUS = useState, pUE = useEffect, pUM = useMemo, pUR = useRef; const mrUS = useState, mrUE = useEffect, mrUM = useMemo; const tjUS = useState, tjUE = useEffect, tjUM = useMemo, tjUR = useRef; const rrFUS = useState, rrFUE = useEffect, rrFUC = useCallback; // === deploy/creatures.jsx === // Creature SVGs, simple, abstract, never anatomically-specific // All reusable across hero scene and species cards const Creature = { clownfish: ({ size = 60, color = "var(--coral)" }) => ( ), tang: ({ size = 80, color = "var(--amber)" }) => ( ), cardinal: ({ size = 60, color = "var(--ink)" }) => ( ), gramma: ({ size = 60, color1 = "var(--violet)", color2 = "var(--amber)" }) => ( ), firefish: ({ size = 70, color = "oklch(0.95 0.02 60)" }) => ( ), mandarin: ({ size = 60 }) => ( ), jellyfish: ({ size = 80 }) => ( ), coral_frond: ({ size = 120, color = "var(--coral)" }) => ( ), anemone: ({ size = 100, color = "var(--lime)" }) => ( ), acro: ({ size = 100, color = "oklch(0.75 0.15 270)" }) => ( ), mushroom: ({ size = 90, color = "oklch(0.75 0.17 20)" }) => ( ), zoa: ({ size = 100 }) => ( ), snail: ({ size = 50, color = "oklch(0.5 0.05 60)" }) => ( ), shrimp: ({ size = 90, color = "oklch(0.82 0.08 25)" }) => ( ), rockbed: ({ w = 800, h = 200 }) => ( ) }; window.Creature = Creature; // === deploy/creature-resolver.jsx === // Maps every species in the library to the best-fit Creature SVG + color // Falls back gracefully by category/kind when id isn't explicitly mapped. function resolveCreature(sp, size) { const C = window.Creature; if (!C) return null; // Explicit per-id map (most specific) const idMap = { // Clowns & related ocellaris: () => , blackice: () => , maroon: () => , percula: () => , // Tangs yellowtang: () => , blueregal: () => , kolei: () => , powderblue: () => , purpletang: () => , foxface: () => , // Angels & butterflies flameangel: () => , coralbeauty: () => , copperband: () => , // Wrasses sixline: () => , melanurus: () => , mccosker: () => , fairywrasse: () => , leopardwrasse: () => , // Cardinals banggai: () => , pyjamacardinal: () => , // Grammas & dottybacks royalgramma: () => , purpledotty: () => , royaldotty: () => , orchiddotty: () => , // Gobies firefish: () => , watchman: () => , diamondgoby: () => , neongoby: () => , // Dragonets mandarin: () => , scooter: () => , // Damsels / chromis chromis: () => , starrydamsel: () => , // Anthias / basslets anthias: () => , basslet: () => , // Blennies lawnmower: () => , midasblenny: () => , tailspot: () => , // Hawkfish longnosehawk: () => , // Corals - Euphyllia hammer: () => , torch: () => , frogspawn: () => , // Corals - LPS duncan: () => , candycane: () => , acanlord: () => , blastomussa: () => , brain: () => , goniopora: () => , chalice: () => , // Corals - SPS acropora: () => , stylophora: () => , birdsnest: () => , montipora: () => , "plating-monti": () => , // Corals - Soft zoa: () => , greenstar: () => , gsp: () => , xenia: () => , leather: () => , mushroom: () => , ricordea: () => , // Inverts cleaner: () => , fireshrimp: () => , peppermint: () => , pistol: () => , turbosnail: () => , trochus: () => , cerith: () => , nassarius: () => , tuxedo: () => , hermit: () => , emerald: () => , seahare: () => , serpentstar: () => , maximaclam: () => , }; if (idMap[sp.id]) return idMap[sp.id](); // Category-based fallback const cat = (sp.category || "").toLowerCase(); if (cat.includes("clown")) return ; if (cat.includes("tang") || cat.includes("rabbit")) return ; if (cat.includes("angel") || cat.includes("butterfly")) return ; if (cat.includes("wrasse")) return ; if (cat.includes("cardinal")) return ; if (cat.includes("dottyback") || cat.includes("gramma")) return ; if (cat.includes("goby")) return ; if (cat.includes("blenny")) return ; if (cat.includes("damsel") || cat.includes("chromis")) return ; if (cat.includes("anthias") || cat.includes("basslet")) return ; if (cat.includes("dragonet")) return ; if (cat.includes("hawk")) return ; // Corals if (cat.includes("sps")) return ; if (cat.includes("lps")) return ; if (cat.includes("mushroom")) return ; if (cat.includes("zoa") || cat.includes("soft")) return ; if (cat.includes("anemone")) return ; // Inverts if (cat.includes("shrimp")) return ; if (cat.includes("snail")) return ; if (cat.includes("crab")) return ; if (cat.includes("urchin") || cat.includes("star")) return ; if (cat.includes("clam")) return ; // Kind fallback if (sp.kind === "fish") return ; if (sp.kind === "coral") return ; if (sp.kind === "invert") return ; return ; } window.resolveCreature = resolveCreature; // === deploy/favorites.jsx === // ReefReads; favorites system // // Stars species and articles into "My Reef" — a local-only list of things // the user wants to come back to. No accounts; localStorage only. // Same architecture as the Tank Journal — see JOURNAL_SYNC.md if/when // you want to add cross-device sync later. const RR_FAV_KEY = "rr-favorites-v1"; function rrFavLoad() { try { return JSON.parse(localStorage.getItem(RR_FAV_KEY) || '{"species":[],"articles":[]}'); } catch { return { species: [], articles: [] }; } } function rrFavSave(state) { localStorage.setItem(RR_FAV_KEY, JSON.stringify(state)); window.dispatchEvent(new Event("rr-favorites-changed")); } // React hook + helpers function useFavorites() { const [state, setState] = rrFUS(() => rrFavLoad()); rrFUE(() => { const onChange = () => setState(rrFavLoad()); window.addEventListener("rr-favorites-changed", onChange); window.addEventListener("storage", e => { if (e.key === RR_FAV_KEY) setState(rrFavLoad()); }); return () => window.removeEventListener("rr-favorites-changed", onChange); }, []); const toggle = rrFUC((kind, id) => { const next = rrFavLoad(); const list = next[kind] || (next[kind] = []); const i = list.indexOf(id); if (i >= 0) list.splice(i, 1); else list.unshift(id); // newest first rrFavSave(next); }, []); const has = rrFUC((kind, id) => (state[kind] || []).includes(id), [state]); return { state, toggle, has }; } // Star button — used inline on cards and as a large variant on detail pages. function StarButton({ kind, id, size = "sm", label }) { const fav = useFavorites(); const on = fav.has(kind, id); const handle = (e) => { e.preventDefault(); e.stopPropagation(); fav.toggle(kind, id); }; return ( ); } Object.assign(window, { useFavorites, StarButton, rrFavLoad, rrFavSave }); // === deploy/pages-home.jsx === // ReefReads; page components // ---------- Hero video sources ---------- // Defaults live in data-hero.js (window.HERO_VIDEOS). Edit that file to // change the clips, titles, and credits. // We keep a fallback array here so the page still works if data-hero.js // is missing for any reason. const HERO_VIDEOS_FALLBACK = [ { src: "", poster: "kelp", title: "Acropora garden at peak", credit: "Reef tour · @SaltyAquaria", creditUrl: "#" }, { src: "", poster: "anemone", title: "Bubble-tip with hosting ocellaris", credit: "Footage · BlueWorld Reef", creditUrl: "#" }, { src: "", poster: "school", title: "Schooling chromis at dusk", credit: "Tank · @KitanoReef", creditUrl: "#" }, { src: "", poster: "jellies", title: "Moon jellies pulse cycle", credit: "Footage · Monterey Bay Aquarium", creditUrl: "#" }, ]; // Source-type detection. Returns one of: // {type:"file", src} — direct .mp4/.webm/etc // {type:"youtube", id, embed} — YouTube watch / shorts / youtu.be // {type:"vimeo", id, embed} — Vimeo // {type:"instagram",url} — link out (no inline embed) // {type:"poster", key} — animated CSS placeholder function classifyHeroSource(v) { const s = (v.src || "").trim(); if (!s) return { type: "poster", key: v.poster || "kelp" }; // YouTube let m = s.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/); if (m) return { type: "youtube", id: m[1], embed: `https://www.youtube-nocookie.com/embed/${m[1]}?autoplay=1&mute=1&loop=1&playlist=${m[1]}&controls=0&modestbranding=1&playsinline=1&rel=0` }; // Vimeo m = s.match(/vimeo\.com\/(?:video\/)?(\d{6,})/); if (m) return { type: "vimeo", id: m[1], embed: `https://player.vimeo.com/video/${m[1]}?autoplay=1&muted=1&loop=1&background=1&controls=0` }; // Instagram (no inline autoplay possible — link out) if (/instagram\.com\/(reel|p|tv)\//.test(s)) return { type: "instagram", url: s }; // Otherwise assume it's a direct video file URL return { type: "file", src: s }; } // Placeholder video frame — pretty looping CSS scene per "poster" key. // Replace the parent

The ocean,in your living room.

The ocean,
in your living room.