[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_190":191,"_192":193},"routes/_app.x.$handle.$name",{"_93":92,"_32":44,"_101":83,"_27":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","styles.css","latestPath","fileId","9f6caebc-482a-11f1-8e01-42b51c65c3df","name","fileType","content",":root {\n color-scheme: light;\n --bg-top: #f7f1df;\n --bg-bottom: #e5d0a4;\n --panel: rgba(255, 248, 235, 0.9);\n --panel-border: rgba(90, 56, 26, 0.16);\n --text: #2e2217;\n --muted: #72573d;\n --accent: #b24f1d;\n --accent-soft: #e3b06f;\n --frame: #5b371e;\n --beam: #7d4b28;\n --rod: linear-gradient(180deg, #8f6941 0%, #4b311b 100%);\n --bead: linear-gradient(180deg, #cf7c34 0%, #8d4419 100%);\n --bead-active: linear-gradient(180deg, #f8c37c 0%, #c06121 100%);\n --shadow: 0 18px 44px rgba(75, 49, 27, 0.18);\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n min-height: 100vh;\n font-family: Georgia, \"Times New Roman\", serif;\n color: var(--text);\n background:\n radial-gradient(circle at top, rgba(255, 250, 241, 0.9), transparent 36%),\n linear-gradient(180deg, var(--bg-top), var(--bg-bottom));\n}\n\nbutton,\ntextarea,\ninput {\n font: inherit;\n}\n\n.app-shell {\n width: min(1180px, calc(100% - 2rem));\n margin: 0 auto;\n padding: 2rem 0 3rem;\n display: grid;\n gap: 1.5rem;\n}\n\n.hero-panel,\n.control-panel,\n.abacus-panel {\n background: var(--panel);\n border: 1px solid var(--panel-border);\n border-radius: 24px;\n box-shadow: var(--shadow);\n}\n\n.hero-panel {\n padding: 2rem;\n}\n\n.eyebrow,\n.label,\n.field-label {\n margin: 0 0 0.5rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--muted);\n font-size: 0.78rem;\n}\n\n.hero-panel h1 {\n margin: 0;\n font-size: clamp(2.1rem, 4vw, 4rem);\n line-height: 0.98;\n max-width: 11ch;\n}\n\n.intro {\n max-width: 48rem;\n margin: 1rem 0 0;\n font-size: 1.1rem;\n line-height: 1.5;\n}\n\n.control-panel {\n padding: 1.25rem;\n display: grid;\n gap: 1rem;\n}\n\n.total-card {\n padding: 1rem 1.25rem;\n border-radius: 18px;\n background: linear-gradient(135deg, rgba(255, 242, 219, 0.95), rgba(255, 232, 188, 0.9));\n border: 1px solid rgba(178, 79, 29, 0.18);\n}\n\n.total-value {\n display: block;\n font-size: clamp(2rem, 6vw, 4rem);\n font-weight: 700;\n}\n\n.status-text,\n.hint {\n margin: 0.4rem 0 0;\n color: var(--muted);\n}\n\n.panel-block {\n display: grid;\n gap: 0.5rem;\n}\n\ntextarea {\n width: 100%;\n min-height: 5rem;\n resize: vertical;\n border-radius: 16px;\n border: 1px solid rgba(90, 56, 26, 0.22);\n padding: 0.85rem 1rem;\n background: rgba(255, 255, 255, 0.7);\n}\n\nbutton,\ninput[type=\"range\"] {\n cursor: pointer;\n}\n\n.button-row {\n grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));\n}\n\n.button-row button {\n border: 0;\n border-radius: 999px;\n padding: 0.8rem 1rem;\n background: #fff6ea;\n color: var(--text);\n box-shadow: inset 0 0 0 1px rgba(90, 56, 26, 0.18);\n}\n\n.button-row button:hover,\n.button-row button:focus-visible {\n background: #fff0da;\n}\n\n.button-row button:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n\n.speed-row {\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\n.speed-row input {\n width: 100%;\n grid-column: 1 / -1;\n}\n\n.sequence-steps {\n margin: 0;\n padding-left: 1.25rem;\n display: grid;\n gap: 0.5rem;\n}\n\n.sequence-steps li {\n color: var(--muted);\n}\n\n.sequence-steps li.current-step {\n color: var(--accent);\n font-weight: 700;\n}\n\n.abacus-panel {\n padding: 1.5rem 1rem 1.75rem;\n}\n\n.place-values {\n display: grid;\n grid-template-columns: repeat(6, minmax(44px, 1fr));\n gap: 0.75rem;\n width: min(100%, 860px);\n margin: 0 auto 0.75rem;\n color: var(--muted);\n text-align: center;\n font-size: 0.82rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.abacus {\n position: relative;\n width: min(100%, 860px);\n margin: 0 auto;\n padding: 1.5rem 0.9rem;\n display: grid;\n grid-template-columns: repeat(6, minmax(44px, 1fr));\n gap: 0.75rem;\n border: 16px solid var(--frame);\n border-radius: 26px;\n background:\n linear-gradient(180deg, rgba(255, 244, 224, 0.4), transparent 18%),\n linear-gradient(180deg, #d6b98e 0%, #b28b5f 100%);\n overflow: hidden;\n}\n\n.abacus::before {\n content: \"\";\n position: absolute;\n inset: 37% 0 auto;\n height: 14px;\n background: var(--beam);\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);\n}\n\n.rod {\n position: relative;\n min-height: 440px;\n display: grid;\n justify-items: center;\n}\n\n.rod-line {\n position: absolute;\n top: 0.4rem;\n bottom: 0.4rem;\n width: 8px;\n border-radius: 999px;\n background: var(--rod);\n}\n\n.rod-value {\n position: absolute;\n bottom: -1.55rem;\n font-size: 0.82rem;\n color: var(--muted);\n}\n\n.bead {\n position: absolute;\n width: min(100%, 76px);\n height: 48px;\n border: 0;\n border-radius: 999px;\n background: var(--bead);\n box-shadow:\n inset 0 4px 10px rgba(255, 235, 201, 0.3),\n inset 0 -5px 12px rgba(69, 31, 8, 0.26),\n 0 8px 12px rgba(54, 26, 9, 0.18);\n transition:\n transform var(--speed, 700ms) cubic-bezier(0.2, 0.9, 0.2, 1),\n filter 180ms ease,\n background 180ms ease;\n}\n\n.bead::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 14%;\n right: 14%;\n height: 10px;\n transform: translateY(-50%);\n border-radius: 999px;\n background: rgba(74, 43, 17, 0.38);\n}\n\n.bead:hover,\n.bead:focus-visible {\n filter: brightness(1.08);\n}\n\n.bead.active {\n background: var(--bead-active);\n}\n\n.upper-bead {\n top: 1.25rem;\n}\n\n.upper-bead.active {\n transform: translateY(104px);\n}\n\n.lower-bead-0 {\n top: 220px;\n}\n\n.lower-bead-1 {\n top: 278px;\n}\n\n.lower-bead-2 {\n top: 336px;\n}\n\n.lower-bead-3 {\n top: 394px;\n}\n\n.lower-bead-0.active {\n transform: translateY(-64px);\n}\n\n.lower-bead-1.active {\n transform: translateY(-64px);\n}\n\n.lower-bead-2.active {\n transform: translateY(-64px);\n}\n\n.lower-bead-3.active {\n transform: translateY(-64px);\n}\n\n@media (max-width: 900px) {\n .abacus,\n .place-values {\n gap: 0.4rem;\n }\n\n .bead {\n height: 42px;\n }\n\n .rod {\n min-height: 400px;\n }\n\n .lower-bead-0 {\n top: 200px;\n }\n\n .lower-bead-1 {\n top: 252px;\n }\n\n .lower-bead-2 {\n top: 304px;\n }\n\n .lower-bead-3 {\n top: 356px;\n }\n}\n\n@media (max-width: 680px) {\n .app-shell {\n width: min(100% - 1rem, 1180px);\n padding-top: 0.75rem;\n }\n\n .hero-panel,\n .control-panel,\n .abacus-panel {\n border-radius: 18px;\n }\n\n .abacus {\n padding-inline: 0.35rem;\n border-width: 10px;\n }\n\n .place-values {\n font-size: 0.68rem;\n }\n\n .rod-value {\n display: none;\n }\n}\n",":root {\n color-scheme: light;\n --bg-top: #f7f1df;\n --bg-bottom: #e5d0a4;\n --panel: rgba(255, 248, 235, 0.9);\n --panel-border: rgba(90, 56, 26, 0.16);\n --text: #2e2217;\n --muted: #72573d;\n --accent: #b24f1d;\n --accent-soft: #e3b06f;\n --frame: #5b371e;\n --beam: #7d4b28;\n --rod: linear-gradient(180deg, #8f6941 0%, #4b311b 100%);\n --bead: linear-gradient(180deg, #cf7c34 0%, #8d4419 100%);\n --bead-active: linear-gradient(180deg, #f8c37c 0%, #c06121 100%);\n --shadow: 0 18px 44px rgba(75, 49, 27, 0.18);\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n min-height: 100vh;\n font-family: Georgia, \"Times New Roman\", serif;\n color: var(--text);\n background:\n radial-gradient(circle at top, rgba(255, 250, 241, 0.9), transparent 36%),\n linear-gradient(180deg, var(--bg-top), var(--bg-bottom));\n}\n\nbutton,\ntextarea,\ninput {\n font: inherit;\n}\n\n.app-shell {\n width: min(1180px, calc(100% - 2rem));\n margin: 0 auto;\n padding: 2rem 0 3rem;\n display: grid;\n gap: 1.5rem;\n}\n\n.hero-panel,\n.control-panel,\n.abacus-panel {\n background: var(--panel);\n border: 1px solid var(--panel-border);\n border-radius: 24px;\n box-shadow: var(--shadow);\n}\n\n.hero-panel {\n padding: 2rem;\n}\n\n.eyebrow,\n.label,\n.field-label {\n margin: 0 0 0.5rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--muted);\n font-size: 0.78rem;\n}\n\n.hero-panel h1 {\n margin: 0;\n font-size: clamp(2.1rem, 4vw, 4rem);\n line-height: 0.98;\n max-width: 11ch;\n}\n\n.intro {\n max-width: 48rem;\n margin: 1rem 0 0;\n font-size: 1.1rem;\n line-height: 1.5;\n}\n\n.control-panel {\n padding: 1.25rem;\n display: grid;\n gap: 1rem;\n}\n\n.total-card {\n padding: 1rem 1.25rem;\n border-radius: 18px;\n background: linear-gradient(135deg, rgba(255, 242, 219, 0.95), rgba(255, 232, 188, 0.9));\n border: 1px solid rgba(178, 79, 29, 0.18);\n}\n\n.total-value {\n display: block;\n font-size: clamp(2rem, 6vw, 4rem);\n font-weight: 700;\n}\n\n.status-text,\n.hint {\n margin: 0.4rem 0 0;\n color: var(--muted);\n}\n\n.panel-block {\n display: grid;\n gap: 0.5rem;\n}\n\ntextarea {\n width: 100%;\n min-height: 5rem;\n resize: vertical;\n border-radius: 16px;\n border: 1px solid rgba(90, 56, 26, 0.22);\n padding: 0.85rem 1rem;\n background: rgba(255, 255, 255, 0.7);\n}\n\nbutton,\ninput[type=\"range\"] {\n cursor: pointer;\n}\n\n.button-row {\n grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));\n}\n\n.button-row button {\n border: 0;\n border-radius: 999px;\n padding: 0.8rem 1rem;\n background: #fff6ea;\n color: var(--text);\n box-shadow: inset 0 0 0 1px rgba(90, 56, 26, 0.18);\n}\n\n.button-row button:hover,\n.button-row button:focus-visible {\n background: #fff0da;\n}\n\n.button-row button:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n}\n\n.speed-row {\n grid-template-columns: 1fr auto;\n align-items: center;\n}\n\n.speed-row input {\n width: 100%;\n grid-column: 1 / -1;\n}\n\n.sequence-steps {\n margin: 0;\n padding-left: 1.25rem;\n display: grid;\n gap: 0.5rem;\n}\n\n.sequence-steps li {\n color: var(--muted);\n}\n\n.sequence-steps li.current-step {\n color: var(--accent);\n font-weight: 700;\n}\n\n.abacus-panel {\n padding: 1.5rem 1rem 1.75rem;\n}\n\n.place-values {\n display: grid;\n grid-template-columns: repeat(6, minmax(44px, 1fr));\n gap: 0.75rem;\n width: min(100%, 860px);\n margin: 0 auto 0.75rem;\n color: var(--muted);\n text-align: center;\n font-size: 0.82rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.abacus {\n position: relative;\n width: min(100%, 860px);\n margin: 0 auto;\n padding: 1.5rem 0.9rem;\n display: grid;\n grid-template-columns: repeat(6, minmax(44px, 1fr));\n gap: 0.75rem;\n border: 16px solid var(--frame);\n border-radius: 26px;\n background:\n linear-gradient(180deg, rgba(255, 244, 224, 0.4), transparent 18%),\n linear-gradient(180deg, #d6b98e 0%, #b28b5f 100%);\n overflow: hidden;\n}\n\n.abacus::before {\n content: \"\";\n position: absolute;\n inset: 37% 0 auto;\n height: 14px;\n background: var(--beam);\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);\n}\n\n.rod {\n position: relative;\n min-height: 440px;\n display: grid;\n justify-items: center;\n --upper-rest-top: 1.25rem;\n --upper-active-shift: 82px;\n --lower-rest-start: 220px;\n --lower-gap: 58px;\n --lower-active-shift: -42px;\n}\n\n.rod-line {\n position: absolute;\n top: 0.4rem;\n bottom: 0.4rem;\n width: 8px;\n border-radius: 999px;\n background: var(--rod);\n}\n\n.rod-value {\n position: absolute;\n bottom: -1.55rem;\n font-size: 0.82rem;\n color: var(--muted);\n}\n\n.bead {\n position: absolute;\n width: min(100%, 76px);\n height: 48px;\n border: 0;\n border-radius: 999px;\n background: var(--bead);\n box-shadow:\n inset 0 4px 10px rgba(255, 235, 201, 0.3),\n inset 0 -5px 12px rgba(69, 31, 8, 0.26),\n 0 8px 12px rgba(54, 26, 9, 0.18);\n transition:\n transform var(--speed, 700ms) cubic-bezier(0.2, 0.9, 0.2, 1),\n filter 180ms ease,\n background 180ms ease;\n}\n\n.bead::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 14%;\n right: 14%;\n height: 10px;\n transform: translateY(-50%);\n border-radius: 999px;\n background: rgba(74, 43, 17, 0.38);\n}\n\n.bead:hover,\n.bead:focus-visible {\n filter: brightness(1.08);\n}\n\n.bead.active {\n background: var(--bead-active);\n}\n\n.upper-bead {\n top: var(--upper-rest-top);\n}\n\n.upper-bead.active {\n transform: translateY(var(--upper-active-shift));\n}\n\n.lower-bead-0 {\n top: var(--lower-rest-start);\n}\n\n.lower-bead-1 {\n top: calc(var(--lower-rest-start) + var(--lower-gap));\n}\n\n.lower-bead-2 {\n top: calc(var(--lower-rest-start) + (var(--lower-gap) * 2));\n}\n\n.lower-bead-3 {\n top: calc(var(--lower-rest-start) + (var(--lower-gap) * 3));\n}\n\n.lower-bead-0.active {\n transform: translateY(var(--lower-active-shift));\n}\n\n.lower-bead-1.active {\n transform: translateY(var(--lower-active-shift));\n}\n\n.lower-bead-2.active {\n transform: translateY(var(--lower-active-shift));\n}\n\n.lower-bead-3.active {\n transform: translateY(var(--lower-active-shift));\n}\n\n@media (max-width: 900px) {\n .abacus,\n .place-values {\n gap: 0.4rem;\n }\n\n .bead {\n height: 42px;\n }\n\n .rod {\n min-height: 400px;\n --upper-active-shift: 74px;\n --lower-rest-start: 200px;\n --lower-gap: 52px;\n --lower-active-shift: -38px;\n }\n}\n\n@media (max-width: 680px) {\n .app-shell {\n width: min(100% - 1rem, 1180px);\n padding-top: 0.75rem;\n }\n\n .hero-panel,\n .control-panel,\n .abacus-panel {\n border-radius: 18px;\n }\n\n .abacus {\n padding-inline: 0.35rem;\n border-width: 10px;\n }\n\n .place-values {\n font-size: 0.68rem;\n }\n\n .rod-value {\n display: none;\n }\n}\n","createdAt",["D",1777948753641],"branchVersion","branchId","423ef5de-4829-11f1-ba34-42b51c65c3df","id","423b39d0-4829-11f1-ba34-42b51c65c3df","digital-abacus",["D",1777947746723],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interactive abacus app.","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},"branch",{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":186,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":187,"_78":188,"_80":189,"_82":25},"tree",[169,170,171,172],"files",[169,170,171,172],"counts",{"_159":148,"_160":60,"_161":148,"_162":163,"_164":165},"contents",[124,125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":151,"_32":152,"_30":153,"_129":-5,"_40":41,"_39":154,"_130":119,"_37":155,"_13":148,"_33":156,"_34":157,"_24":25,"_132":-5,"_27":158},{"_42":143,"_32":144,"_30":145,"_129":-5,"_40":41,"_39":146,"_130":119,"_37":147,"_13":148,"_33":20,"_34":149,"_24":25,"_132":-5,"_27":150},{"_42":134,"_32":135,"_30":136,"_129":-5,"_40":41,"_39":137,"_130":119,"_37":138,"_13":139,"_33":140,"_34":141,"_24":25,"_132":-5,"_27":142},{"_42":128,"_32":28,"_30":31,"_129":-5,"_40":41,"_39":14,"_130":119,"_37":131,"_13":60,"_33":20,"_34":36,"_24":25,"_132":-5,"_27":133},"9a6b6e7a-482b-11f1-a190-42b51c65c3df","parentId","latest",["D",1777948753641],"label",[28],"d8f62992-482a-11f1-94db-42b51c65c3df","main.ts","424ddefa-4829-11f1-ba34-42b51c65c3df",6,["D",1777948429086],2,"http","function response(body: string, contentType: string, status = 200) {\n return new Response(body, {\n status,\n headers: {\n \"content-type\": `${contentType}; charset=utf-8`,\n \"cache-control\": \"no-store\",\n },\n });\n}\n\nconst assetPaths = {\n html: new URL(\"./index.html\", import.meta.url),\n css: new URL(\"./styles.css\", import.meta.url),\n js: new URL(\"./app.js\", import.meta.url),\n};\n\nlet assetCache: null | { html: string; css: string; js: string } = null;\n\nasync function readAsset(url: URL) {\n if (url.protocol === \"file:\") {\n return Deno.readTextFile(url);\n }\n\n const response = await fetch(url);\n\n if (!response.ok) {\n throw new Error(`Unable to load asset: ${url.pathname}`);\n }\n\n return response.text();\n}\n\n// Read once per runtime so the handler stays simple but avoids repeated disk access.\nasync function loadAssets() {\n if (!assetCache) {\n const [html, css, js] = await Promise.all([\n readAsset(assetPaths.html),\n readAsset(assetPaths.css),\n readAsset(assetPaths.js),\n ]);\n\n assetCache = { html, css, js };\n }\n\n return assetCache;\n}\n\nexport default async function handler(request: Request) {\n const { pathname } = new URL(request.url);\n const assets = await loadAssets();\n\n if (pathname === \"/\" || pathname === \"/index.html\") {\n return response(assets.html, \"text/html\");\n }\n\n if (pathname === \"/styles.css\") {\n return response(assets.css, \"text/css\");\n }\n\n if (pathname === \"/app.js\") {\n return response(assets.js, \"text/javascript\");\n }\n\n return response(\"Not found\", \"text/plain\", 404);\n}\n\nif (import.meta.main) {\n Deno.serve(handler);\n}\n",[135],"9f554f4c-482a-11f1-8120-42b51c65c3df","index.html","9f55500a-482a-11f1-8120-42b51c65c3df",3,["D",1777948332361],0,"\n\n \n \n \n Digital Abacus\n \n \n \n

Digital Abacus

Move beads by hand or animate a math sequence.

\n The total always comes from the bead state. Manual moves update the\n number immediately, and sequence playback animates each step.\n

\n\n

Running Total

\n 0\n

Manual mode ready.

\n\n

\n Math sequence\n 12 + 7 - 3 + 20\n

\n Use whole numbers with + and -, for\n example 12 + 7 - 3 + 20.\n

\n\n

\n \n \n \n \n \n

\n\n

\n Animation speed\n \n 700 ms\n

\n\n

Sequence steps

\n\n

\n \n

\n\n \n \n\n",[144],"9f5ee1ce-482a-11f1-953f-42b51c65c3df","app.js","9f5ee282-482a-11f1-953f-42b51c65c3df",4,["D",1777948332392],"script","const DEFAULT_ROD_COUNT = 6;\nconst DEFAULT_SPEED = 700;\nconst PLACE_LABELS = [\"Hundred-Thousands\", \"Ten-Thousands\", \"Thousands\", \"Hundreds\", \"Tens\", \"Ones\"];\n\nfunction wait(milliseconds) {\n return new Promise((resolve) => setTimeout(resolve, milliseconds));\n}\n\n// Each rod stores the two pieces of soroban state needed to derive a digit.\nexport function createRodState(upperActive = false, lowerActive = 0) {\n return { upperActive, lowerActive };\n}\n\nexport function createEmptyState(rodCount = DEFAULT_ROD_COUNT) {\n return Array.from({ length: rodCount }, () => createRodState());\n}\n\nexport function digitToRodState(digit) {\n if (!Number.isInteger(digit) || digit < 0 || digit > 9) {\n throw new RangeError(\"Digit must be an integer between 0 and 9.\");\n }\n\n if (digit >= 5) {\n return createRodState(true, digit - 5);\n }\n\n return createRodState(false, digit);\n}\n\nexport function rodStateToDigit(rod) {\n return (rod.upperActive ? 5 : 0) + rod.lowerActive;\n}\n\nexport function numberToState(number, rodCount = DEFAULT_ROD_COUNT) {\n if (!Number.isInteger(number) || number < 0) {\n throw new RangeError(\"Only non-negative integers can be shown on the abacus.\");\n }\n\n if (String(number).length > rodCount) {\n throw new RangeError(\"The value does not fit on the current abacus.\");\n }\n\n const digits = String(number).padStart(rodCount, \"0\").slice(-rodCount).split(\"\").map(Number);\n return digits.map(digitToRodState);\n}\n\nexport function stateToNumber(rods) {\n return rods.reduce((total, rod) => total * 10 + rodStateToDigit(rod), 0);\n}\n\nexport function setLowerBeadCount(rods, rodIndex, beadIndex) {\n const nextState = structuredClone(rods);\n const rod = nextState[rodIndex];\n\n // Lower beads always stay contiguous from the beam outward.\n rod.lowerActive = beadIndex < rod.lowerActive ? beadIndex : beadIndex + 1;\n return nextState;\n}\n\nexport function toggleUpperBead(rods, rodIndex) {\n const nextState = structuredClone(rods);\n nextState[rodIndex].upperActive = !nextState[rodIndex].upperActive;\n return nextState;\n}\n\nexport function parseSequence(sequenceText) {\n const compact = sequenceText.trim();\n\n if (!compact) {\n throw new Error(\"Enter a sequence to animate.\");\n }\n\n const normalized = compact.replace(/\\s+/g, \"\");\n const tokens = normalized.match(/[+-]|\\d+/g);\n\n if (!tokens || tokens.join(\"\") !== normalized) {\n throw new Error(\"Use numbers separated by + or -.\");\n }\n\n if (!/^\\d+$/.test(tokens[0])) {\n throw new Error(\"The sequence must start with a number.\");\n }\n\n const start = Number(tokens[0]);\n const operations = [];\n\n for (let index = 1; index < tokens.length; index += 2) {\n const operator = tokens[index];\n const operand = Number(tokens[index + 1]);\n\n if (!(operator === \"+\" || operator === \"-\") || !Number.isInteger(operand)) {\n throw new Error(\"Each operator must be followed by a whole number.\");\n }\n\n operations.push({ operator, operand });\n }\n\n if (tokens.length % 2 === 0) {\n throw new Error(\"The sequence cannot end with an operator.\");\n }\n\n return { start, operations };\n}\n\nexport function buildSequenceSteps(parsedSequence) {\n const steps = [];\n let current = 0;\n\n // The first step animates from a clear abacus to the starting number.\n steps.push({\n label: `Set to ${parsedSequence.start}`,\n from: current,\n to: parsedSequence.start,\n });\n\n current = parsedSequence.start;\n\n for (const operation of parsedSequence.operations) {\n const next = operation.operator === \"+\" ? current + operation.operand : current - operation.operand;\n\n if (next < 0) {\n throw new Error(\"This version of the abacus only supports totals of 0 or more.\");\n }\n\n steps.push({\n label: `${current} ${operation.operator} ${operation.operand} = ${next}`,\n from: current,\n to: next,\n });\n\n current = next;\n }\n\n return steps;\n}\n\nfunction getPlaceLabel(rodCount, rodIndex) {\n return PLACE_LABELS[PLACE_LABELS.length - rodCount + rodIndex] ?? `10^${rodCount - rodIndex - 1}`;\n}\n\nexport function createAppState(rodCount = DEFAULT_ROD_COUNT) {\n return {\n rodCount,\n speedMs: DEFAULT_SPEED,\n rods: createEmptyState(rodCount),\n steps: [],\n currentStepIndex: -1,\n isPlaying: false,\n playToken: 0,\n };\n}\n\nfunction renderPlaceValues(elements, state) {\n elements.placeValues.innerHTML = \"\";\n\n for (let rodIndex = 0; rodIndex < state.rodCount; rodIndex += 1) {\n const label = document.createElement(\"div\");\n label.textContent = getPlaceLabel(state.rodCount, rodIndex);\n elements.placeValues.append(label);\n }\n}\n\nfunction createBeadButton({ className, label, onClick }) {\n const bead = document.createElement(\"button\");\n bead.type = \"button\";\n bead.className = `bead ${className}`;\n bead.setAttribute(\"aria-label\", label);\n bead.setAttribute(\"aria-pressed\", className.includes(\"active\") ? \"true\" : \"false\");\n bead.addEventListener(\"click\", onClick);\n return bead;\n}\n\nfunction renderAbacus(elements, state, updateState) {\n elements.abacus.innerHTML = \"\";\n\n for (let rodIndex = 0; rodIndex < state.rods.length; rodIndex += 1) {\n const rod = state.rods[rodIndex];\n const rodElement = document.createElement(\"div\");\n rodElement.className = \"rod\";\n rodElement.style.setProperty(\"--speed\", `${state.speedMs}ms`);\n\n const rodLine = document.createElement(\"div\");\n rodLine.className = \"rod-line\";\n rodElement.append(rodLine);\n\n const upperBead = createBeadButton({\n className: `upper-bead${rod.upperActive ? \" active\" : \"\"}`,\n label: `Toggle upper bead on rod ${rodIndex + 1}`,\n onClick: () => {\n if (state.isPlaying) {\n return;\n }\n\n updateState(toggleUpperBead(state.rods, rodIndex), \"Manual move saved.\");\n },\n });\n\n rodElement.append(upperBead);\n\n for (let lowerIndex = 0; lowerIndex < 4; lowerIndex += 1) {\n const isActive = lowerIndex < rod.lowerActive;\n const lowerBead = createBeadButton({\n className: `lower-bead-${lowerIndex}${isActive ? \" active\" : \"\"}`,\n label: `Set lower beads on rod ${rodIndex + 1}`,\n onClick: () => {\n if (state.isPlaying) {\n return;\n }\n\n updateState(setLowerBeadCount(state.rods, rodIndex, lowerIndex), \"Manual move saved.\");\n },\n });\n\n rodElement.append(lowerBead);\n }\n\n const rodValue = document.createElement(\"div\");\n rodValue.className = \"rod-value\";\n rodValue.textContent = rodStateToDigit(rod);\n rodElement.append(rodValue);\n\n elements.abacus.append(rodElement);\n }\n}\n\nfunction renderSteps(elements, state) {\n elements.sequenceSteps.innerHTML = \"\";\n\n if (state.steps.length === 0) {\n const empty = document.createElement(\"li\");\n empty.textContent = \"Load a sequence to see step-by-step totals.\";\n elements.sequenceSteps.append(empty);\n return;\n }\n\n state.steps.forEach((step, index) => {\n const item = document.createElement(\"li\");\n item.textContent = step.label;\n\n if (index === state.currentStepIndex) {\n item.classList.add(\"current-step\");\n }\n\n elements.sequenceSteps.append(item);\n });\n}\n\nfunction renderStatus(elements, state, statusText) {\n const hasNextStep = state.currentStepIndex < state.steps.length - 1;\n elements.totalDisplay.textContent = stateToNumber(state.rods).toString();\n elements.speedDisplay.textContent = `${state.speedMs} ms`;\n elements.statusText.textContent = statusText;\n elements.playButton.disabled = state.steps.length === 0 || state.isPlaying;\n elements.pauseButton.disabled = !state.isPlaying;\n elements.nextButton.disabled = state.steps.length === 0 || state.isPlaying || !hasNextStep;\n}\n\nfunction render(elements, state, statusText, updateState) {\n renderPlaceValues(elements, state);\n renderAbacus(elements, state, updateState);\n renderSteps(elements, state);\n renderStatus(elements, state, statusText);\n}\n\nexport function setupApp(documentObject = document) {\n const query = (selector) => documentObject.querySelector(selector);\n const elements = {\n abacus: query(\"#abacus\"),\n placeValues: query(\"#place-values\"),\n totalDisplay: query(\"#total-display\"),\n statusText: query(\"#status-text\"),\n sequenceInput: query(\"#sequence-input\"),\n sequenceSteps: query(\"#sequence-steps\"),\n speedInput: query(\"#speed-input\"),\n speedDisplay: query(\"#speed-display\"),\n loadButton: query(\"#load-sequence\"),\n playButton: query(\"#play-sequence\"),\n pauseButton: query(\"#pause-sequence\"),\n nextButton: query(\"#next-step\"),\n resetButton: query(\"#reset-abacus\"),\n };\n const state = createAppState();\n let statusText = \"Manual mode ready.\";\n\n function updateState(nextRods, nextStatusText) {\n state.rods = nextRods;\n statusText = nextStatusText;\n render(elements, state, statusText, updateState);\n }\n\n async function animateToNumber(targetNumber, stepIndex, message) {\n state.currentStepIndex = stepIndex;\n state.rods = numberToState(targetNumber, state.rodCount);\n statusText = message;\n render(elements, state, statusText, updateState);\n await wait(state.speedMs + 50);\n }\n\n elements.loadButton.addEventListener(\"click\", () => {\n try {\n const parsed = parseSequence(elements.sequenceInput.value);\n state.steps = buildSequenceSteps(parsed);\n state.currentStepIndex = -1;\n statusText = `${state.steps.length} step${state.steps.length === 1 ? \"\" : \"s\"} ready to play.`;\n } catch (error) {\n state.steps = [];\n state.currentStepIndex = -1;\n statusText = error.message;\n }\n\n render(elements, state, statusText, updateState);\n });\n\n elements.playButton.addEventListener(\"click\", async () => {\n if (state.steps.length === 0) {\n return;\n }\n\n // Replay starts from a clear abacus once the sequence has already finished.\n if (state.currentStepIndex >= state.steps.length - 1) {\n state.currentStepIndex = -1;\n state.rods = createEmptyState(state.rodCount);\n }\n\n state.isPlaying = true;\n state.playToken += 1;\n const playToken = state.playToken;\n statusText = \"Playing sequence.\";\n render(elements, state, statusText, updateState);\n\n const nextIndex = state.currentStepIndex + 1;\n\n for (let index = nextIndex; index < state.steps.length; index += 1) {\n if (playToken !== state.playToken) {\n break;\n }\n\n const step = state.steps[index];\n await animateToNumber(step.to, index, `Step ${index + 1}: ${step.label}`);\n }\n\n if (playToken === state.playToken) {\n state.isPlaying = false;\n statusText = \"Sequence complete.\";\n render(elements, state, statusText, updateState);\n }\n });\n\n elements.pauseButton.addEventListener(\"click\", () => {\n state.isPlaying = false;\n state.playToken += 1;\n statusText = \"Playback paused.\";\n render(elements, state, statusText, updateState);\n });\n\n elements.nextButton.addEventListener(\"click\", async () => {\n if (state.isPlaying || state.steps.length === 0) {\n return;\n }\n\n const nextIndex = Math.min(state.currentStepIndex + 1, state.steps.length - 1);\n const step = state.steps[nextIndex];\n await animateToNumber(step.to, nextIndex, `Step ${nextIndex + 1}: ${step.label}`);\n statusText = nextIndex === state.steps.length - 1 ? \"Sequence complete.\" : statusText;\n render(elements, state, statusText, updateState);\n });\n\n elements.resetButton.addEventListener(\"click\", () => {\n state.isPlaying = false;\n state.playToken += 1;\n state.rods = createEmptyState(state.rodCount);\n state.currentStepIndex = -1;\n statusText = \"Abacus reset to zero.\";\n render(elements, state, statusText, updateState);\n });\n\n elements.speedInput.addEventListener(\"input\", () => {\n state.speedMs = Number(elements.speedInput.value);\n render(elements, state, statusText, updateState);\n });\n\n render(elements, state, statusText, updateState);\n return state;\n}\n\nif (typeof document !== \"undefined\") {\n setupApp(document);\n}\n",[152],"pulls","branches","forks","envVars",{"_166":148,"_168":148},"connections",{"_166":148,"_167":148},"count","unfilledCount","emptyCount",{"_42":151,"_32":152,"_30":153,"_129":-5,"_40":41,"_39":154,"_130":119,"_37":183,"_13":148,"_33":156,"_34":157,"_24":25,"_132":-5,"_174":184,"_27":185},{"_42":143,"_32":144,"_30":145,"_129":-5,"_40":41,"_39":146,"_130":119,"_37":180,"_13":148,"_33":20,"_34":149,"_24":25,"_132":-5,"_174":181,"_27":182},{"_42":134,"_32":135,"_30":136,"_129":-5,"_40":41,"_39":137,"_130":119,"_37":177,"_13":139,"_33":140,"_34":141,"_24":25,"_132":-5,"_174":178,"_27":179},{"_42":128,"_32":28,"_30":31,"_129":-5,"_40":41,"_39":14,"_130":119,"_37":173,"_13":60,"_33":20,"_34":36,"_24":25,"_132":-5,"_174":175,"_27":176},["D",1777948753641],"children",[],[28],["D",1777948429086],[],[135],["D",1777948332361],[],[144],["D",1777948332392],[],[152],["D",1777947746723],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_76":-5,"_121":223,"_224":225,"_226":227,"_228":25,"_229":25,"_230":25,"_231":119,"_232":-5,"_233":-7,"_234":-7,"_235":148,"_236":25,"_237":25,"_238":-5,"_239":25,"_240":25,"_241":25,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":83,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v7