[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22},"handle","qrtrcgn","name","zenplant","path","src/ui/app.ts","project",{"_23":49,"_11":12,"_36":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":35,"_64":-5,"_65":-5,"_66":39,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_23":24,"_11":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":17,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/qrtrcgn/zenplant/code/src/ui/app.ts","extension","ts","id","27672f85-6731-4f08-9ea6-46979655e042","app.ts","fileId","7030ca88-afc8-11f1-b92b-1607ee4eb77e","parentId","09506c09-4069-449c-a893-43a52e94393d","branchId","e8903778-8ee8-4223-9b28-51703ba2c4b0","branchVersion",2,"latest",true,"createdAt",["D",1789341083565],"version",0,"fileType","content","import { createPrng, type Prng } from \"../sim/prng\";\nimport { freshState, growOnce, pruneNode } from \"../sim/growth\";\nimport { breedGenomes } from \"../sim/genetics\";\nimport { japaneseBonsai, zenBamboo, sakuraOrchid, generateGenomeForSpecies, getSpeciesById } from \"../data/species\";\nimport { renderPlant, computeTransform, seasonOf, getWindDisp } from \"../render/canvas\";\nimport { exportPlantJSON, importPlantJSON, exportGenomeJSON, plantToSVG } from \"../export/plugin\";\nimport type { Genome, PlantState } from \"../sim/types\";\n\nconst $ = (id: string) => document.getElementById(id)!;\nconst canvas = $(\"plant\") as HTMLCanvasElement;\nconst ctx = canvas.getContext(\"2d\")!;\n\nconst SPECIES = [japaneseBonsai, zenBamboo, sakuraOrchid];\nlet speciesIdx = 0;\nlet prng: Prng = createPrng(42);\nlet seed = 42;\nlet state: PlantState;\nlet greenhouse: Genome[] = [];\nlet selected: number[] = [];\nlet playing = true;\nlet windEnabled = false;\n\ntry {\n const saved = localStorage.getItem(\"zenplant.greenhouse\");\n if (saved) greenhouse = JSON.parse(saved);\n} catch { /* ignore */ }\n\nfunction persist() {\n try { localStorage.setItem(\"zenplant.greenhouse\", JSON.stringify(greenhouse)); } catch { /* ignore */ }\n}\n\nfunction newPlant(newSeed = (Math.random() * 1e9) | 0) {\n seed = newSeed;\n prng = createPrng(seed);\n const genome = generateGenomeForSpecies(SPECIES[speciesIdx], seed);\n state = freshState(genome, SPECIES[speciesIdx], { seed });\n for (let i = 0; i < 80; i++) state = growOnce(state, prng);\n draw();\n}\n\nfunction draw() {\n const r = canvas.getBoundingClientRect();\n const dpr = window.devicePixelRatio || 1;\n const needResize = canvas.width !== Math.floor(r.width * dpr) || canvas.height !== Math.floor(r.height * dpr);\n if (needResize) {\n canvas.width = Math.floor(r.width * dpr);\n canvas.height = Math.floor(r.height * dpr);\n }\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n const info = renderPlant(ctx, state, r.width, r.height);\n const [name, color] = info.split(\"|\");\n const badge = $(\"season-badge\");\n badge.textContent = `${name} · step ${state.step} · seed ${seed}`;\n (badge as HTMLElement).style.color = color;\n const g = state.genome;\n $(\"genome-info\").innerHTML =\n `Vigor ${g.vigor.toFixed(2)} · Angle ${g.angle.toFixed(0)}° · Len ${g.lenScale.toFixed(0)}
` +\n `Species ${SPECIES[speciesIdx].name} · Nodes ${state.nodes.length}`;\n renderSlots();\n}\n\nfunction renderSlots() {\n const box = $(\"slots-container\");\n if (greenhouse.length === 0) {\n box.innerHTML = '

Save plants for breeding.

';\n ($(\"btn-breed\") as HTMLButtonElement).style.display = \"none\";\n return;\n }\n box.innerHTML = greenhouse.map((g, i) => {\n const sel = selected.includes(i) ? \"selected\" : \"\";\n return `

#${i + 1} vigor ${g.vigor.toFixed(2)}

`;\n }).join(\"\");\n box.querySelectorAll(\".slot\").forEach((el) => {\n el.addEventListener(\"click\", () => {\n const i = Number((el as HTMLElement).dataset.i);\n const at = selected.indexOf(i);\n if (at > -1) selected.splice(at, 1);\n else { if (selected.length >= 2) selected.shift(); selected.push(i); }\n draw();\n });\n });\n const bb = $(\"btn-breed\") as HTMLButtonElement;\n if (selected.length === 2) {\n bb.style.display = \"block\";\n bb.textContent = `Breed #${selected[0] + 1} + #${selected[1] + 1}`;\n } else bb.style.display = \"none\";\n}\n\nfunction distToSeg(p: {x:number;y:number}, v: {x:number;y:number}, w: {x:number;y:number}) {\n const l2 = (w.x - v.x) ** 2 + (w.y - v.y) ** 2;\n if (l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);\n let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;\n t = Math.max(0, Math.min(1, t));\n return Math.hypot(p.x - (v.x + t * (w.x - v.x)), p.y - (v.y + t * (w.y - v.y)));\n}\n\ncanvas.style.touchAction = \"none\";\nlet dragging = false;\nlet dragStartX = 0, dragStartY = 0;\nlet dragStartCamX = 0, dragStartCamY = 0;\nlet dragMoved = false;\nfunction pruneAt(clientX: number, clientY: number) {\n if (dragMoved) return;\n const r = canvas.getBoundingClientRect();\n const { scale, ox, oy } = computeTransform(\n r.width,\n r.height,\n state.showRoots,\n state.cameraX ?? 0,\n state.cameraY ?? 0,\n state.cameraZoom ?? 1.0\n );\n const wx = (clientX - r.left - ox) / scale;\n const wy = (clientY - r.top - oy) / scale;\n const disp = getWindDisp();\n let best: number | null = null, bestD = 20;\n for (const n of state.nodes) {\n if (n.type !== \"stem\" && n.type !== \"meristem\") continue;\n const parentD = n.parentId !== null ? disp.get(n.parentId) : undefined;\n const sx = parentD ? parentD.wx : n.x;\n const sy = parentD ? parentD.wy : n.y;\n const childD = disp.get(n.id);\n const ex = childD ? childD.wx : n.x + Math.cos(n.angle) * n.length;\n const ey = childD ? childD.wy : n.y + Math.sin(n.angle) * n.length;\n const d = distToSeg({ x: wx, y: wy }, { x: sx, y: sy }, { x: ex, y: ey });\n if (d < bestD) { bestD = d; best = n.id; }\n }\n if (best !== null) { state = pruneNode(state, best); state.cutAnimTime = 1.0; draw(); }\n}\ncanvas.addEventListener(\"click\", (e) => pruneAt(e.clientX, e.clientY));\ncanvas.addEventListener(\"pointerup\", (e) => pruneAt(e.clientX, e.clientY));\n\ncanvas.addEventListener(\"mousedown\", (e) => {\n dragging = true;\n dragMoved = false;\n dragStartX = e.clientX;\n dragStartY = e.clientY;\n dragStartCamX = state.cameraX;\n dragStartCamY = state.cameraY;\n});\n\nwindow.addEventListener(\"mousemove\", (e) => {\n if (!dragging) return;\n const dx = e.clientX - dragStartX;\n const dy = e.clientY - dragStartY;\n if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragMoved = true;\n state.cameraX = dragStartCamX + dx;\n state.cameraY = dragStartCamY + dy;\n draw();\n});\n\nwindow.addEventListener(\"mouseup\", () => { dragging = false; });\n\ncanvas.addEventListener(\"wheel\", (e) => {\n e.preventDefault();\n const delta = e.deltaY > 0 ? -0.1 : 0.1;\n state.cameraZoom = Math.max(0.3, Math.min(3.0, state.cameraZoom + delta));\n draw();\n}, { passive: false });\n\n$(\"btn-grow\").addEventListener(\"click\", () => { for (let i = 0; i < 10; i++) state = growOnce(state, prng); draw(); });\n$(\"btn-grow-season\").addEventListener(\"click\", () => { for (let i = 0; i < 50; i++) state = growOnce(state, prng); draw(); });\n$(\"btn-reset\").addEventListener(\"click\", () => newPlant());\n$(\"btn-play\").addEventListener(\"click\", (e) => {\n playing = !playing;\n (e.target as HTMLButtonElement).textContent = playing ? \"Pause\" : \"Play\";\n});\n$(\"species-select\").addEventListener(\"change\", (e) => {\n speciesIdx = Number((e.target as HTMLSelectElement).value);\n newPlant(seed);\n});\n$(\"btn-save\").addEventListener(\"click\", () => {\n greenhouse.push(JSON.parse(JSON.stringify(state.genome)));\n persist(); draw();\n});\n$(\"btn-breed\").addEventListener(\"click\", () => {\n if (selected.length !== 2) return;\n const child = breedGenomes(greenhouse[selected[0]], greenhouse[selected[1]], prng);\n state = freshState(child, SPECIES[speciesIdx], { seed: (Math.random() * 1e9) | 0 });\n for (let i = 0; i < 30; i++) state = growOnce(state, prng);\n selected = [];\n draw();\n});\n$(\"btn-pro\").addEventListener(\"click\", () => {\n const p = $(\"pro-panel\");\n p.style.display = p.style.display === \"none\" ? \"block\" : \"none\";\n});\n$(\"btn-export\").addEventListener(\"click\", () => {\n const blob = new Blob([exportPlantJSON(state)], { type: \"application/json\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `zenplant-step${state.step}-seed${seed}.json`;\n a.click();\n URL.revokeObjectURL(a.href);\n});\n$(\"btn-svg\").addEventListener(\"click\", () => {\n const blob = new Blob([plantToSVG(state, 400, 500)], { type: \"image/svg+xml\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `zenplant-step${state.step}.svg`;\n a.click();\n URL.revokeObjectURL(a.href);\n});\n$(\"btn-png\")?.addEventListener(\"click\", () => {\n const a = document.createElement(\"a\");\n a.href = canvas.toDataURL(\"image/png\");\n a.download = `zenplant-step${state.step}-seed${seed}.png`;\n a.click();\n});\n$(\"btn-timelapse\")?.addEventListener(\"click\", (e) => {\n state.isRecording = !state.isRecording;\n (e.target as HTMLButtonElement).textContent = state.isRecording\n ? `Stop (${state.timelapseFrames.length})`\n : \"Record Timelapse\";\n if (!state.isRecording && state.timelapseFrames.length > 0) {\n const a = document.createElement(\"a\");\n a.href = state.timelapseFrames[state.timelapseFrames.length - 1];\n a.download = `zenplant-frame${state.timelapseFrames.length}.webp`;\n a.click();\n state.timelapseFrames = [];\n }\n});\nconst speedSlider = $(\"grow-speed\") as HTMLInputElement;\nconst speedLabel = $(\"speed-label\");\nif (speedSlider) {\n speedSlider.addEventListener(\"input\", () => {\n state.growSpeed = parseFloat(speedSlider.value);\n if (speedLabel) speedLabel.textContent = state.growSpeed + \"×\";\n });\n}\n$(\"btn-import\").addEventListener(\"click\", () => $(\"import-file\").click());\n$(\"import-file\").addEventListener(\"change\", async (e) => {\n const f = (e.target as HTMLInputElement).files?.[0];\n if (!f) return;\n state = importPlantJSON(await f.text());\n prng = createPrng(state.step + seed);\n draw();\n});\n$(\"btn-dark\").addEventListener(\"click\", () => { state.darkMode = !state.darkMode; draw(); });\n$(\"btn-wood\").addEventListener(\"click\", (e) => { state.woodTexture = !state.woodTexture; (e.target as HTMLButtonElement).textContent = state.woodTexture ? \"Wood: ON\" : \"Wood: OFF\"; draw(); });\n$(\"btn-wind\").addEventListener(\"click\", (e) => { windEnabled = !windEnabled; (e.target as HTMLButtonElement).textContent = windEnabled ? \"Wind: ON\" : \"Wind: OFF\"; });\n\nlet resizeRaf: number | null = null;\nfunction scheduleDraw() {\n if (resizeRaf !== null) return;\n resizeRaf = requestAnimationFrame(() => { resizeRaf = null; draw(); });\n}\nwindow.addEventListener(\"resize\", scheduleDraw);\nwindow.addEventListener(\"orientationchange\", () => setTimeout(draw, 150));\nif ((window as unknown as { visualViewport?: { addEventListener: (t: string, f: () => void) => void } }).visualViewport) {\n (window as unknown as { visualViewport: { addEventListener: (t: string, f: () => void) => void } }).visualViewport.addEventListener(\"resize\", scheduleDraw);\n}\nlet lastWindTime = performance.now();\nlet lastGrowTime = performance.now();\nfunction animLoop(now: number) {\n const dt = (now - lastWindTime) / 1000;\n lastWindTime = now;\n if (windEnabled && state) {\n state.windTime += dt * 2.0;\n draw();\n }\n const growInterval = state.growSpeed > 0 ? 180 / state.growSpeed : 999999;\n if (playing && state && now - lastGrowTime > growInterval) {\n state = growOnce(state, prng);\n lastGrowTime = now;\n if (!windEnabled) draw();\n }\n if (state?.isRecording && state.timelapseFrames.length < 300) {\n state.timelapseFrames.push(canvas.toDataURL(\"image/webp\", 0.8));\n const recBtn = $(\"btn-timelapse\");\n if (recBtn) recBtn.textContent = `Stop (${state.timelapseFrames.length})`;\n }\n requestAnimationFrame(animLoop);\n}\nrequestAnimationFrame(animLoop);\nnewPlant();\n","deleted",false,"label",[47,48,25],"src","ui","4ba1fdc4-aa30-4738-b113-35954c6e16a0",["D",1789340809179],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","ZenPlant Botany Engine","imageUrl","userId","019b6180-9c19-703a-876b-b037124971e3","pinnedFileId","b796555e-b055-11f1-90f1-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019b6180-9c19-703a-876b-b699cd6ffa6a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_105":101},"org",{"_9":10,"_99":-5,"_100":101,"_59":60,"_102":103,"_104":44},"branch",{"_38":89,"_11":90,"_23":31,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",8,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN1JZVVRtUk5WYzdtWnhST2dOYkR6WllJck0ifQ","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_139":140,"_141":142,"_143":144,"_145":44,"_146":44,"_147":44,"_148":35,"_149":-5,"_150":-7,"_151":-7,"_152":39,"_153":44,"_154":44,"_155":-5,"_156":44,"_157":44,"_158":44,"_159":-5},"ENV",{"_110":111,"_112":113,"_114":90,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138},"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"]