import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" const CYCLE_START = new Date(Date.UTC(1991, 0, 1)) const CYCLE_MS = 18980 * 24 * 60 * 60 * 1000 const CYCLE_END = new Date(CYCLE_START.getTime() + CYCLE_MS) export default function App() { const [now, setNow] = React.useState(new Date()) React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000) return () => clearInterval(id) }, []) const elapsedMs = now.getTime() - CYCLE_START.getTime() const dayOfRound = Math.floor(elapsedMs / 86400000) % 18980 + 1 const tonal = ((dayOfRound - 1) % 260) + 1 const xiuh = ((dayOfRound - 1) % 365) + 1 const remainMs = CYCLE_END.getTime() - now.getTime() const rYears = Math.floor(remainMs / (365.25 * 86400000)) const rMonths = Math.floor((remainMs % (365.25 * 86400000)) / (30.44 * 86400000)) const rDays = Math.floor((remainMs % (30.44 * 86400000)) / 86400000) const rHours = Math.floor((remainMs % 86400000) / 3600000) const { database, useLiveQuery, useDocument } = useFireproof("xiuhmolpilli-codex") const { doc, merge, submit } = useDocument({ type: "moment", note: "", createdAt: Date.now() }) const { docs: moments } = useLiveQuery("type", { key: "moment", descending: true }) const [suggesting, setSuggesting] = React.useState(false) const [oracleFor, setOracleFor] = React.useState(null) const [oracleLoading, setOracleLoading] = React.useState(false) async function suggestNote() { setSuggesting(true) try { const r = await callAI(`Write a single short poetic line (max 15 words) an Aztec elder priest might inscribe on day ${dayOfRound} of the Calendar Round, Tonalpohualli day ${tonal}, Xiuhpohualli day ${xiuh}. Return only the line.`, { schema: { properties: { line: { type: "string" } } } }) merge({ note: JSON.parse(r).line }) } finally { setSuggesting(false) } } async function consultOracle(m) { setOracleFor(m._id); setOracleLoading(true) try { const r = await callAI(`As an elder Mexica priest reading the codex, give a 2-sentence divination for a moment inscribed on day ${m.dayOfRound} of the Calendar Round (Tonalpohualli ${m.tonal}/260, Xiuhpohualli ${m.xiuh}/365) with the note: "${m.note}". Speak with reverence and ancient cadence.`, { schema: { properties: { divination: { type: "string" } } } }) await database.put({ ...m, oracle: JSON.parse(r).divination }) } finally { setOracleLoading(false); setOracleFor(null) } } function inscribe(e) { e.preventDefault() if (!doc.note.trim()) return merge({ dayOfRound, tonal, xiuh, observedAt: now.toISOString() }) submit() } const cycleStartStr = CYCLE_START.toUTCString().slice(5, 16) const c = { page: "min-h-screen bg-[#06040a] text-[#d4c5a0] font-serif", topBar: "h-1 w-full bg-gradient-to-r from-transparent via-[#c9a84c] to-transparent", wrap: "max-w-3xl mx-auto px-5 py-8", header: "text-center mb-8", title: "text-[#c9a84c] uppercase tracking-[0.18em] text-2xl md:text-3xl font-bold", titleGlow: "[text-shadow:0_0_16px_rgba(201,168,76,0.4)]", subtitle: "text-[#8a7a60] uppercase tracking-[0.2em] text-xs mt-3", section: "bg-[#12100a] border border-[#2a2015] p-5 mb-6", h2: "text-[#c9a84c] uppercase tracking-[0.14em] text-sm font-semibold mb-4", divider: "flex items-center justify-center my-6 text-[#c9a84c]", dividerLine: "flex-1 h-px bg-[#2a2015]", dividerGlyph: "px-3 text-sm", muted: "text-[#8a7a60] text-sm", terracotta: "text-[#c0522a] font-semibold", jade: "text-[#00c9a7]", btn: "border border-[#c9a84c] text-[#c9a84c] uppercase tracking-[0.14em] text-xs px-4 py-3 hover:bg-[#c9a84c] hover:text-[#06040a] transition-colors min-h-[44px]", btnJade: "border border-[#00c9a7] text-[#00c9a7] uppercase tracking-[0.14em] text-xs px-4 py-3 hover:bg-[#00c9a7] hover:text-[#06040a] transition-colors min-h-[44px]", input: "w-full bg-transparent border-0 border-b border-[#c9a84c] text-[#d4c5a0] py-2 focus:outline-none focus:[box-shadow:0_2px_8px_-4px_rgba(201,168,76,0.6)] placeholder:text-[#8a7a60]", scroll: "border-l-2 border-[#2a2015] pl-4 py-3 mb-3", } return (

◈ Today In The Round

Cycle Began

{cycleStartStr}

Day Of Round

{dayOfRound.toLocaleString()} of 18,980

Tonalpohualli

day {tonal} of 260

Xiuhpohualli

day {xiuh} of 365

Until The New Fire

{rYears}

years

{rMonths}

months

{rDays}

days

{rHours}

hours

◈

◈ The Turning Rings

◈ Tonalpohualli

◈ Xiuhpohualli

◈

◈ Inscribe This Moment

Bind today's position into the codex with a note.

◈

◈ The Codex Scroll

{moments.length === 0 ? (

The scroll awaits its first inscription.

) : (

{moments.map((m) => (

Day {m.dayOfRound} · Tonal {m.tonal} · Xiuh {m.xiuh}

"{m.note}"

{m.oracle && (

◈ Oracle

{m.oracle}

)}

{!m.oracle && ( )}

))}

)}

) }