Something went wrong. Try again.
a tiny pet with a GPT-2 brain, living in your browser
Something went wrong. Try again.
1.6 kB · 47 lines
TSX
at cloud-pet
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748import { store, ui } from "../app/store.ts";import { Icon } from "./shared.tsx";export function Diary() { const s = store.state; return ( <> <p id="diary-today" class="muted small"> {s.today.log.length ? `today so far: ${s.today.log.join("; ")}` : ""} </p> <div id="diary-pages" class="diary-pages"> {ui.diaryWriting && ( <article class="diary-page drafting"> <header> <span>{s.pet?.name} is writing…</span> </header> <p id="diary-draft">{ui.diaryDraft}</p> </article> )} {[...s.diary].reverse().map((page) => ( <article class="diary-page" key={page.date}> <header> <span>{`day ${page.day} · ${page.date} · ${page.weather}`}</span> <span>{page.stage}</span> </header> {page.text.split(/\n+/).map((text, i) => ( <p key={i}>{text}</p> ))} {!!page.doodles?.length && ( <div class="diary-doodles"> {page.doodles.map((d, i) => ( <Icon key={i} name={d} scale={4} alt={d} /> ))} </div> )} </article> ))} {!s.diary.length && !ui.diaryWriting && ( <p class="muted"> {s.pet ? `${s.pet.name} writes a page when it goes to sleep at night, about a day with at least two things in it. Days it missed get written next time it's awake with you.` : "The diary starts after hatching."} </p> )} </div> </> );}