[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_114":115,"_116":117},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","pchinjr","name","firstpage","path","frontend/components/ActivityProjects.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/pchinjr/firstpage/code/frontend/components/ActivityProjects.tsx","extension","id","63f903b2-da24-472f-839d-375ede3b0c06","ActivityProjects.tsx","fileId","4a88f348-9cca-11f1-bacd-1607ee4eb77e","parentId","019fb401-dc04-779a-98cc-9f7db0f3fea4","branchId","e61b9380-cdfc-422f-a63c-d1817f84669f","branchVersion",162,"latest",true,"createdAt",["D",1787253076961],"version",1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport type ActivityName = \"hypertext\" | \"adventure\" | \"poetry\" | \"advanced\";\n\nexport type ActivityProject = {\n id: string;\n activity: ActivityName;\n name: string;\n updatedAt: number;\n state: T;\n};\n\ntype Status = \"saving\" | \"saved\" | \"error\";\n\nconst DB_NAME = \"firstpage\";\nconst DB_VERSION = 1;\nconst STORE = \"projects\";\n\nfunction openDatabase(): Promise {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open(DB_NAME, DB_VERSION);\n request.onupgradeneeded = () => {\n const db = request.result;\n if (!db.objectStoreNames.contains(STORE)) {\n const store = db.createObjectStore(STORE, { keyPath: \"id\" });\n store.createIndex(\"updatedAt\", \"updatedAt\");\n }\n };\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nasync function allRecords(): Promise {\n const db = await openDatabase();\n try {\n return await new Promise((resolve, reject) => {\n const request = db.transaction(STORE, \"readonly\").objectStore(STORE).getAll();\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n } finally {\n db.close();\n }\n}\n\nasync function putRecord(value: any) {\n const db = await openDatabase();\n try {\n await new Promise((resolve, reject) => {\n const request = db.transaction(STORE, \"readwrite\").objectStore(STORE).put(value);\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n } finally {\n db.close();\n }\n}\n\nasync function deleteRecord(id: string) {\n const db = await openDatabase();\n try {\n await new Promise((resolve, reject) => {\n const request = db.transaction(STORE, \"readwrite\").objectStore(STORE).delete(id);\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n } finally {\n db.close();\n }\n}\n\nexport function useActivityProjects(\n activity: ActivityName,\n makeInitial: () => T,\n getName: (state: T) => string,\n) {\n const [projects, setProjects] = useState[]>([]);\n const [activeId, setActiveId] = useState(null);\n const [state, setState] = useState(makeInitial);\n const [ready, setReady] = useState(false);\n const [status, setStatus] = useState(\"saved\");\n\n async function refresh() {\n const records = await allRecords();\n setProjects(records\n .filter((record) => record.activity === activity)\n .sort((a, b) => b.updatedAt - a.updatedAt));\n }\n\n useEffect(() => {\n refresh().then(() => setReady(true)).catch(() => {\n setReady(true);\n setStatus(\"error\");\n });\n }, [activity]);\n\n useEffect(() => {\n if (!activeId) return;\n setStatus(\"saving\");\n const timer = window.setTimeout(async () => {\n try {\n await putRecord({\n id: activeId,\n activity,\n name: getName(state) || \"Untitled project\",\n updatedAt: Date.now(),\n state,\n });\n setStatus(\"saved\");\n } catch {\n setStatus(\"error\");\n }\n }, 500);\n return () => window.clearTimeout(timer);\n }, [activeId, state, activity]);\n\n function create() {\n setState(makeInitial());\n setActiveId(crypto.randomUUID());\n setStatus(\"saving\");\n }\n\n function open(project: ActivityProject) {\n setState(project.state);\n setActiveId(project.id);\n setStatus(\"saved\");\n }\n\n async function remove(project: ActivityProject) {\n if (!confirm(`Delete “${project.name}” from this browser?`)) return;\n await deleteRecord(project.id);\n await refresh();\n }\n\n async function showLibrary() {\n if (activeId) {\n await putRecord({\n id: activeId,\n activity,\n name: getName(state) || \"Untitled project\",\n updatedAt: Date.now(),\n state,\n });\n }\n await refresh();\n setActiveId(null);\n }\n\n return { projects, activeId, state, setState, ready, status, create, open, remove, showLibrary };\n}\n\nexport function ActivityProjectLibrary({\n title,\n projects,\n onCreate,\n onOpen,\n onDelete,\n onBack,\n}: {\n title: string;\n projects: ActivityProject[];\n onCreate: () => void;\n onOpen: (project: ActivityProject) => void;\n onDelete: (project: ActivityProject) => void;\n onBack: () => void;\n}) {\n return (\n

\n \n

YOUR SAVED WORK

{title}

Saved in this browser on this device.

\n \n

\n {projects.map((project) => (\n

\n \n \n

\n ))}\n

\n {projects.length === 0 &&

No saved projects yet. Start a new one!

}\n

\n );\n}\n\nexport function ActivitySaveBar({ status, onProjects }: { status: Status; onProjects: () => void }) {\n return (\n

\n \n \n {status === \"saving\" ? \"● Saving…\" : status === \"error\" ? \"⚠ Couldn’t save\" : \"✓ Saved\"}\n \n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","aef53a57-6458-4eeb-8180-aac88cdb3009",["D",1785431448217],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A 20-minute HTML website maker for kids","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3c8e68aa-c2ee-49f5-a58d-a7c153163700/square512?exp=1789556399&sig=c9f8ed7eaa6ac6badcc671bf80b3bd320b737f10366b70c2d089b6a85b6ddcc9","userId","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","019fb401-dc04-779a-98cc-bb5991078e25","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","aef53a5764584eeb8180aac88cdb3009","tursoHostname","aef53a5764584eeb8180aac88cdb3009-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789476033740],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_113":109},"org",{"_9":10,"_107":-5,"_108":109,"_60":61,"_110":111,"_112":44},"branch",{"_37":32,"_11":94,"_22":30,"_95":49,"_96":97,"_98":99,"_100":54,"_101":102,"_103":104,"_105":12,"_106":10},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",91,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","ctx",{"_87":-5,"_147":148,"_149":150,"_151":152,"_153":44,"_154":44,"_155":44,"_156":34,"_157":-5,"_158":-7,"_159":-7,"_160":68,"_161":44,"_162":44,"_163":-5,"_164":44,"_165":44,"_166":44,"_167":-5},"ENV",{"_118":119,"_120":121,"_122":94,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142,"_143":144,"_145":146},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]