feat: Dockside calculator with live result bar and weight-based costs - #121
Conversation
Adds three self-contained HTML mock-ups (A Dockside, B Market Board, C Clear Water) and the visual board comparing them, so they survive beyond the session that made them. No direction is chosen yet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ErLEY8gicR3Wg7Q1yXAVaC
Rebuilds the calculator on the chosen Dockside mock-up (direction A): tap tiles for what you have and what you're making, +/- steppers for every number, and a live result bar pinned to the bottom instead of a Calculate button. Processing and shipping can each be charged per lb of incoming weight (the starting fish, spread over the finished pounds) or outgoing weight (the finished product). Both choices are always visible, with a line showing what the charge comes to per finished lb, and the result bar breaks the total into fish, processing and shipping. The math now comes from calcEngine, extended with shippingWeightType (default outgoing, so earlier results are unchanged) and a per-part breakdown, test first. Because the result is computed live from what is on screen, a saved calculation can no longer pair new inputs with an old result. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ErLEY8gicR3Wg7Q1yXAVaC
The Dockside number boxes are text inputs, so parseFloat got common
entries silently wrong: "$4.50" priced at $0.00/lb, and "1,000" lbs
became "buy 2.4 lbs ... makes 1,000 lbs".
- Add parseAmount (lib/numberInput.js, test first): accepts "$4.50",
"1,000", "42%", "100 lbs" and a decimal comma ("4,50"); returns NaN
for anything else instead of guessing.
- Text that isn't a number marks its box invalid (red border,
aria-invalid) and the result bar says to use numbers, rather than
counting it as 0 or falling back to 100% yield.
- Steppers, hints, the saved payload and the weight-mode sentence all
use the parsed values.
- Set scroll-padding-bottom to the pinned bar's height while the
calculator is shown, so tabbed-to controls are never hidden behind it
(WCAG 2.4.11). Removed again when leaving the page.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ErLEY8gicR3Wg7Q1yXAVaC
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reachedNext included review available in 24 minutes. View limit detailsLimit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Review configuration: ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (11)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Resolve against the Dockside calculator (#121): keep main's live result bar and re-apply this PR's fixes on top of it. Bundled reference yields get from/to so the forms list offline, the API only replaces them when it sends usable conversions, and a yield at or below 0 or above 100 shows 'Enter a yield above 0 and up to 100%' instead of a price (0 used to fall back to 100%). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PnPh61Aps5neY87hh1pu9T
Summary
Rebuilds the calculator screen on Dockside, direction A of the three mock-ups (now saved in
docs/design-mockups/). It follows #118, which was the accessibility pass.Dockside is built for people using the app one-handed on a dock or mid-service:
Math:
calcEngine.jsgainsshippingWeightTypeand a per-partbreakdown, with tests. Shipping defaults to outgoing, so existing results don't change. Because the answer is computed from what's on screen, Save can no longer pair edited inputs with an old result, a bug onmain.Found in browser testing and fixed here (
dbdf0bc)$4.50priced at $0.00/lb, and1,000lbs showed "buy 2.4 lbs … makes 1,000 lbs". The newparseAmount(lib/numberInput.js, written test first) accepts$4.50,1,000,42%,100 lbsand4,50. Anything else marks the box invalid (red border,aria-invalid), and the bar says "Use numbers only". It never counts as 0 or falls back to 100% yield.scroll-padding-bottomnow tracks the bar's height, and it's removed when you leave the calculator.Commits
bdf7dd0docs: save the three mock-ups and the visual boardea16d1efeat: Dockside calculator with processing and shipping weight basisdbdf0bcfix: read typed amounts safely and keep focus clear of the result barTest plan
npm run lint: 0 errors (the same 2 warnings asmain)npm test: 2298 passed, including newcalcEngineweight-basis/breakdown tests and 25parseAmountcases. Two files don't load in the sandbox (bcrypt,exceljsnot installed); they run in CI.npm run buildpasses/api/fish-datashape):$4.50→ $10.71;1,000lbs → 2381.0;42%works;abcor4x2→ no answer, box marked.Not in this PR
main).docs/DESIGN_SYSTEM.md: the calculator is unusable offline if/api/fish-datafails, andFooter.jsx/InstallPrompt.jsxare unused.🤖 Generated with Claude Code
https://claude.ai/code/session_01ErLEY8gicR3Wg7Q1yXAVaC
Generated by Claude Code