import React, { useState, useMemo, useEffect } from "react"; import { useFireproof } from "use-fireproof"; import { ImgGen } from "use-vibes"; import { useVibe, useViewer } from "use-vibes"; const STAGES = [ { name: "Hatchling", min: 0, emoji: "egg" }, { name: "Young Dragon", min: 5000, emoji: "young" }, { name: "Adult Dragon", min: 25000, emoji: "adult" }, { name: "Elder Dragon", min: 75000, emoji: "elder" }, ]; function stageFor(total) { let s = STAGES[0]; for (const st of STAGES) if (total >= st.min) s = st; return s; } function roarSize(count) { if (count >= 2000) return "large"; if (count >= 500) return "medium"; return "small"; } function dayKey(d) { return new Date(d).toISOString().slice(0, 10); } function computeStreak(entries) { if (entries.length === 0) return 0; const days = new Set(entries.map((e) => e.date)); let streak = 0; let cursor = new Date(); cursor.setHours(0, 0, 0, 0); while (true) { const key = dayKey(cursor); if (days.has(key)) { streak++; cursor.setDate(cursor.getDate() - 1); } else if (streak === 0 && key === dayKey(new Date())) { // today not logged yet, check yesterday cursor.setDate(cursor.getDate() - 1); continue; } else { break; } } return streak; } function RoarIcon({ size }) { const dims = size === "large" ? 28 : size === "medium" ? 22 : 16; const color = size === "large" ? "text-[var(--error)]" : size === "medium" ? "text-[var(--warning)]" : "text-[var(--secondary)]"; return ( ); } function DragonHero({ stage, celebrating }) { const c = { box: "bg-[var(--surface)] border-[var(--border)] border-[var(--border-width)] rounded-[var(--radius-lg)] shadow-[var(--vibes-shadow)]", label: "uppercase tracking-[var(--letter-spacing-wide)] text-sm text-[var(--text-secondary)]", }; return (

{stage.name}

{celebrating && (

RAWR!

)}

); } export default function App() { const { database, useLiveQuery } = useFireproof("wordCountDragon"); const { can, ready, me } = useVibe("wordCountDragon"); const { requestLogin } = useViewer(); const { docs: entries } = useLiveQuery("date", { descending: true }); const [count, setCount] = useState(""); const [note, setNote] = useState(""); const [celebrating, setCelebrating] = useState(null); const [isSuggesting, setIsSuggesting] = useState(false); const lifetimeTotal = useMemo( () => entries.reduce((sum, e) => sum + (e.wordCount || 0), 0), [entries] ); const stage = stageFor(lifetimeTotal); const nextStage = STAGES.find((s) => s.min > lifetimeTotal); const streak = useMemo(() => computeStreak(entries), [entries]); const today = dayKey(new Date()); const todaysEntry = entries.find((e) => e.date === today); const canLog = can.create({ type: "entry", date: today, wordCount: 1, note: "", authorHandle: me?.userHandle }); useEffect(() => { if (!celebrating) return; const t = setTimeout(() => setCelebrating(null), 1600); return () => clearTimeout(t); }, [celebrating]); async function handleLog(e) { e.preventDefault(); const n = parseInt(count, 10); if (!n || n <= 0) return; const draft = { type: "entry", date: today, wordCount: n, note: note.trim(), createdAt: Date.now(), authorHandle: me?.userHandle, }; const verdict = can.create(draft); if (!verdict.ok) return; setCelebrating(roarSize(n)); await database.put(draft); setCount(""); setNote(""); } async function suggestNote() { setIsSuggesting(true); try { const { callAI } = await import("https://esm.sh/call-ai@latest"); const result = JSON.parse( await callAI( `Suggest a short, playful project or session name (3-5 words) for a writing session, in the voice of a cheerful dragon friend cheering on a writer. Return JSON only.`, { schema: { properties: { name: { type: "string" } } } } ) ); setNote(result.name || ""); } catch (err) { setNote("Epic Scroll of Doom"); } finally { setIsSuggesting(false); } } function handleKeyDown(event) { const target = event.target; if ( target instanceof HTMLElement && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) ) return; } const c = { page: "bg-[var(--background)] text-[var(--text-primary)] min-h-screen", header: "bg-[var(--surface)] border-b-[var(--border-width)] border-[var(--border)] sticky top-0 z-10", title: "text-2xl font-bold text-[var(--primary)]", sub: "text-[var(--text-secondary)] text-sm", card: "bg-[var(--surface)] border-[var(--border-width)] border-[var(--border)] rounded-[var(--radius-lg)] shadow-[var(--vibes-shadow)] p-4", label: "uppercase tracking-[var(--letter-spacing-wide)] text-xs text-[var(--text-secondary)]", input: "w-full rounded-[var(--radius)] border-[var(--border-width)] border-[var(--border)] bg-[var(--background)] px-3 py-3 text-[var(--text-primary)] min-h-[44px]", btn: "w-full min-h-[44px] rounded-[var(--radius)] bg-[var(--primary)] text-[var(--surface)] font-semibold py-3 shadow-[var(--vibes-shadow)] transition-transform duration-150 hover:shadow-[var(--vibes-shadow-lg)] hover:-translate-y-[var(--border-width)] hover:-translate-x-[var(--border-width)] disabled:opacity-50", btnGhost: "rounded-[var(--radius)] border-[var(--border-width)] border-[var(--border)] px-3 py-2 text-sm text-[var(--text-secondary)] bg-[var(--surface)] shadow-[var(--vibes-shadow)] transition-transform duration-150 hover:shadow-[var(--vibes-shadow-lg)] hover:-translate-y-[var(--border-width)] hover:-translate-x-[var(--border-width)]", row: "flex items-center justify-between", metadata: "text-[var(--text-secondary)] text-xs", listItem: "flex items-center justify-between gap-3 p-3 rounded-[var(--radius)] border-[var(--border-width)] border-[var(--border)] bg-[var(--background)] shadow-[var(--vibes-shadow)] transition-transform duration-150 hover:shadow-[var(--vibes-shadow-lg)] hover:-translate-y-[var(--border-width)] hover:-translate-x-[var(--border-width)]", }; return (

Lifetime Words

{lifetimeTotal.toLocaleString()}

Streak

{streak} day{streak === 1 ? "" : "s"}

{nextStage && (

{nextStage.min - lifetimeTotal} words until {nextStage.name}

)}

Today's Session

{!ready && checking...}

{todaysEntry ? (

Rawr! You already logged {todaysEntry.wordCount.toLocaleString()} words today, tiny victory!

{todaysEntry.note &&

{todaysEntry.note}

}

Come back tomorrow to keep the streak alive.

) : ready && canLog.ok ? ( ) : ready ? (

) : null}

History

{entries.length === 0 ? (

No roars logged yet.

Write your first words and give the dragon something to celebrate.

) : (

{e.wordCount.toLocaleString()} words
{e.note &&
{e.note}
}

{e.date}

)}

); }