import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("doctrine-codex") const { docs: scenarios } = useLiveQuery("type", { key: "scenario", descending: true }) const { docs: attempts } = useLiveQuery("type", { key: "attempt", descending: true }) const current = scenarios[0] const [selected, setSelected] = React.useState(null) const [isLoading, setIsLoading] = React.useState(false) async function summonScenario() { setIsLoading(true) setSelected(null) try { const res = await callAI( "Generate a richly detailed US foreign policy historical scenario (150-200 words) describing a real or plausible situation without naming the doctrine. Then provide the correct doctrine and 3 plausible distractors from: Monroe Doctrine, Manifest Destiny, Big Stick, Dollar Diplomacy, Open Door, Fourteen Points, Containment, Nixon Doctrine, Reagan Doctrine. Include a multi-paragraph explainer covering strategic logic, domestic political pressures, and what actually resulted.", { schema: { properties: { narrative: { type: "string" }, era: { type: "string" }, correctDoctrine: { type: "string" }, distractors: { type: "array", items: { type: "string" } }, explainer: { type: "string" } }}} ) const data = JSON.parse(res) await database.put({ type: "scenario", ...data, createdAt: Date.now() }) } finally { setIsLoading(false) } } async function answerScenario(choice) { if (!current || selected) return setSelected(choice) await database.put({ type: "attempt", scenarioId: current._id, choice, correct: choice === current.correctDoctrine, userSlug: "visitor", displayName: "visitor", avatarUrl: "", createdAt: Date.now() }) } const c = { page: "min-h-screen bg-[#0f0f0f] text-[#e5e5e5] font-['Cinzel',serif]", header: "sticky top-0 z-10 bg-[#1a1a1a] border-b border-[#665533] px-4 py-4 flex items-center justify-between", title: "text-xl md:text-2xl font-['Cinzel_Decorative',serif] text-[#d4af6a] tracking-wider", tagline: "text-xs text-[#888] hidden md:block italic", avatar: "w-8 h-8 rounded-full border border-[#665533]", main: "max-w-3xl mx-auto px-4 py-6 space-y-6 pb-24", section: "bg-[#1a1a1a] border border-[#3a3a3a] rounded-lg p-5 shadow-lg", h2: "text-lg font-['Cinzel_Decorative',serif] text-[#d4af6a] mb-4 tracking-wide border-b border-[#3a3a3a] pb-2", btn: "min-h-[44px] px-4 py-3 bg-[#5a1a1a] hover:bg-[#7a2424] text-[#f0e6d2] rounded border border-[#8b3a3a] transition tracking-wide disabled:opacity-50", btnGhost: "min-h-[44px] px-4 py-3 bg-transparent hover:bg-[#2a2a2a] text-[#d4af6a] rounded border border-[#665533] transition", input: "w-full min-h-[44px] px-3 py-3 bg-[#0f0f0f] border border-[#3a3a3a] rounded text-[#e5e5e5] focus:border-[#d4af6a] outline-none", row: "p-3 bg-[#0f0f0f] border border-[#2a2a2a] rounded hover:border-[#665533] transition", muted: "text-[#888] text-sm italic", gold: "text-[#d4af6a]", parchment: "bg-[#2a2419] border border-[#665533] rounded p-4 text-[#d4c8a0] leading-relaxed", } return (

The Scenario {current?.era && — {current.era}}

{current ? (

{current.narrative}

) : (

Press "Summon a Scenario" to receive a historical case from the annals of American statecraft.

)}

{current && (

{[current.correctDoctrine, ...(current.distractors || [])].sort().map(opt => { const isPicked = selected === opt const isCorrect = opt === current.correctDoctrine const reveal = selected != null const cls = !reveal ? c.btnGhost : isCorrect ? "min-h-[44px] px-4 py-3 bg-[#1a4a2a] border border-[#3a8a4a] text-[#a0e0b0] rounded" : isPicked ? "min-h-[44px] px-4 py-3 bg-[#4a1a1a] border border-[#8a3a3a] text-[#e0a0a0] rounded" : "min-h-[44px] px-4 py-3 bg-transparent border border-[#3a3a3a] text-[#666] rounded" return ( ) })}

)} {selected && current && (

{selected === current.correctDoctrine ? "Correct — " : "The doctrine invoked was "} {current.correctDoctrine}

{current.explainer}

)}

The Scholars

No attempts yet — be the first to enter the codex.
{i+1} {s.avatar && } {s.name}
{s.correct} / {s.total}

The Codex

Doctrines encountered in past scenarios — tap to revisit the case.

Doctrines will accumulate as scenarios are summoned.
{doctrine} {list.length} case{list.length !== 1 ? "s" : ""}

{list.map(s => (

{s.era}

{s.explainer}

))}

) }