refactor: place 'n − 1 →' text inside borrow box at top

- Keep borrow box at full size (not 70%)
- Use place() to position hint text at top center of box
- Add white text with black stroke for contrast on colored backgrounds
- Gray text when colors are disabled for better visibility
This commit is contained in:
Thomas Hallock 2025-11-08 06:35:52 -06:00
parent b718994dab
commit 232e1a2221
1 changed files with 29 additions and 19 deletions

View File

@ -441,25 +441,35 @@ export function generateSubtractionProblemStackFunction(
let reduced-digit = original-digit - 1
(box(width: ${cellSizeIn}, height: ${cellSizeIn})[
#stack(
dir: ttb,
spacing: 1pt,
// Show the calculation hint with arrow
align(center)[
#box[
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: gray.darken(30%))[#str(original-digit) ]
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: gray.darken(30%), weight: "bold")[1]
#h(2pt)
#text(size: ${(cellSizePt * 0.3).toFixed(1)}pt, fill: gray.darken(30%))[]
]
],
// Show the borrow box
if show-colors {
diagonal-split-box(${(cellSize * 0.7).toFixed(2)}in, source-color, dest-color)
} else {
box(width: ${(cellSize * 0.7).toFixed(2)}in, height: ${(cellSize * 0.7).toFixed(2)}in, stroke: 0.5pt)[]
}
)
// Show the borrow box with hint text at top
#if show-colors {
box(width: ${cellSizeIn}, height: ${cellSizeIn})[
#diagonal-split-box(${cellSizeIn}, source-color, dest-color)
#place(
top + center,
dy: 2pt,
box[
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: white, stroke: 0.3pt + black, weight: "bold")[#str(original-digit) ]
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: white, stroke: 0.3pt + black, weight: "bold")[1]
#h(1pt)
#text(size: ${(cellSizePt * 0.3).toFixed(1)}pt, fill: white, stroke: 0.3pt + black)[]
]
)
]
} else {
box(width: ${cellSizeIn}, height: ${cellSizeIn}, stroke: 0.5pt)[
#place(
top + center,
dy: 2pt,
box[
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: gray.darken(30%), weight: "bold")[#str(original-digit) ]
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: gray.darken(30%), weight: "bold")[1]
#h(1pt)
#text(size: ${(cellSizePt * 0.3).toFixed(1)}pt, fill: gray.darken(30%))[]
]
)
]
}
],)
} else if show-colors {
(box(width: ${cellSizeIn}, height: ${cellSizeIn})[