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",[68],"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",[76],{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":97,"_17":72,"_51":80,"_52":81,"_54":55,"_56":-5,"_88":98,"_18":99},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":94,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_88":95,"_18":96},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":91,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_88":92,"_18":93},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":87,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_88":89,"_18":90},["D",1777948753641],"children",[],[38],["D",1777948429086],[],[59],["D",1777948332361],[],[68],["D",1777948332392],[],[76],"423b39d0-4829-11f1-ba34-42b51c65c3df",["D",1777947746723],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interactive abacus app.","imageUrl","userId","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_153":149},"org",{"_11":12,"_147":-5,"_148":149,"_110":111,"_150":151,"_152":55},"branch",{"_17":45,"_13":16,"_36":43,"_139":100,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":100,"_13":14,"_48":201,"_102":-5,"_103":55,"_104":105,"_106":105,"_107":108,"_109":-5,"_110":111,"_112":-5,"_113":55,"_114":-5,"_115":-5,"_116":50,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":202,"_134":203,"_136":204,"_138":55},[189,190,191,192],"files",[189,190,191,192],"counts",{"_180":72,"_181":50,"_182":72,"_31":183,"_184":185},[172,173,174,175],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":72,"_51":80,"_52":81,"_54":55,"_56":-5,"_18":179},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_18":178},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":62,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_18":177},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_18":176},[38],[59],[68],[76],"pulls","branches","forks",{"_186":72,"_188":72},"connections",{"_186":72,"_187":72},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":97,"_17":72,"_51":80,"_52":81,"_54":55,"_56":-5,"_88":199,"_18":200},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":94,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_88":197,"_18":198},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":91,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_88":195,"_18":196},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":87,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_88":193,"_18":194},[],[38],[],[59],[],[68],[],[76],["D",1777947746723],{"_11":12,"_153":149},{"_11":12,"_147":-5,"_148":149,"_110":111,"_150":151,"_152":55},{"_17":45,"_13":16,"_36":43,"_139":100,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":14,"_146":12},"ctx",{"_132":-5,"_169":238,"_239":240,"_241":242,"_243":55,"_244":55,"_245":55,"_246":47,"_247":-5,"_248":-7,"_249":-7,"_250":72,"_251":55,"_252":55,"_253":-5,"_254":55,"_255":55,"_256":55,"_257":-5},"ENV",{"_209":210,"_211":212,"_213":16,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code