antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add smooth curved arrow for borrowing hints

Browse Source 
Complete borrowing hints visualization with smooth bezier curve:
- Curve starts near "1" in borrow box (dx: 0.9, dy: 0.15)
- Smooth quadratic bezier with control point for natural flow
- Ends at arrowhead position (0.24, 0.70 relative)
- Small arrowhead (0.35x font size) at (0.96, 0.62)
- White curve on colored backgrounds, gray on plain
- Typst bezier syntax: vertex with relative control point

Visual guide shows "n − 1" with arrow pointing to borrowed 10s box.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-11-08 07:11:18 -06:00
parent b2f875c5a5
commit 112745ce16
2 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/.claude/settings.local.json
View File

@@ -174,11 +174,14 @@
"Bash(git ls-tree:*)",
"Bash(git -C /Users/antialias/projects/soroban-abacus-flashcards show HEAD:apps/web/src/app/icon/route.tsx)",
"Bash(git -C /Users/antialias/projects/soroban-abacus-flashcards show HEAD:apps/web/package.json)",
"Bash(git revert:*)"
"Bash(git revert:*)",
"WebFetch(domain:typst.app)"
],
"deny": [],
"ask": []
},
"enableAllProjectMcpServers": true,
"enabledMcpjsonServers": ["sqlite"]
"enabledMcpjsonServers": [
"sqlite"
]
}

30
apps/web/src/app/create/worksheets/addition/typstHelpers.ts
View File

@@ -453,24 +453,25 @@ export function generateSubtractionProblemStackFunction(
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: white, stroke: 0.3pt + black, weight: "bold")[1]
]
)
// Draw straight line from top of borrow box to center of arrowhead
// Draw curved line using Typst bezier with control point
#place(
top + left,
dx: ${cellSizeIn},
dx: ${(cellSize * 0.9).toFixed(2)}in,
dy: ${(cellSize * 0.15).toFixed(2)}in,
path(
stroke: (paint: white, thickness: 1.5pt),
// Start at top of borrow box
// Start vertex (near the "1" in borrow box)
(0pt, 0pt),
// End at center of arrowhead (moved down significantly)
(${(cellSize * 0.24).toFixed(2)}in, ${(cellSize * 0.75).toFixed(2)}in),
// End vertex adjusted up and left to align with arrowhead (vertex, relative-control-point)
((${(cellSize * 0.24).toFixed(2)}in, ${(cellSize * 0.70).toFixed(2)}in), (${(cellSize * 0.11).toFixed(2)}in, ${(cellSize * -0.5).toFixed(2)}in)),
)
)
// Arrowhead pointing down at the top edge of borrowed 10s box
#place(
top + left,
dx: ${(cellSize * 0.96).toFixed(2)}in,
dy: ${(cellSize * 0.45).toFixed(2)}in,
text(size: ${(cellSizePt * 0.6).toFixed(1)}pt, fill: white)[▼]
dy: ${(cellSize * 0.62).toFixed(2)}in,
text(size: ${(cellSizePt * 0.35).toFixed(1)}pt, fill: white)[▼]
)
]
} else {
@@ -483,24 +484,25 @@ export function generateSubtractionProblemStackFunction(
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: gray.darken(30%), weight: "bold")[1]
]
)
// Draw straight line from top of borrow box to center of arrowhead
// Draw curved line using Typst bezier with control point
#place(
top + left,
dx: ${cellSizeIn},
dx: ${(cellSize * 0.9).toFixed(2)}in,
dy: ${(cellSize * 0.15).toFixed(2)}in,
path(
stroke: (paint: gray.darken(30%), thickness: 1.5pt),
// Start at top of borrow box
// Start vertex (near the "1" in borrow box)
(0pt, 0pt),
// End at center of arrowhead (moved down significantly)
(${(cellSize * 0.24).toFixed(2)}in, ${(cellSize * 0.75).toFixed(2)}in),
// End vertex adjusted up and left to align with arrowhead (vertex, relative-control-point)
((${(cellSize * 0.24).toFixed(2)}in, ${(cellSize * 0.70).toFixed(2)}in), (${(cellSize * 0.11).toFixed(2)}in, ${(cellSize * -0.5).toFixed(2)}in)),
)
)
// Arrowhead pointing down at the top edge of borrowed 10s box
#place(
top + left,
dx: ${(cellSize * 0.96).toFixed(2)}in,
dy: ${(cellSize * 0.45).toFixed(2)}in,
text(size: ${(cellSizePt * 0.6).toFixed(1)}pt, fill: gray.darken(30%))[▼]
dy: ${(cellSize * 0.62).toFixed(2)}in,
text(size: ${(cellSizePt * 0.35).toFixed(1)}pt, fill: gray.darken(30%))[▼]
)
]
}