fix(engine): render card suit glyphs as SVG paths instead of text
The user's first post-migration screenshot showed near-invisible suit glyphs on every card — the rank rendered at correct size but the ♠ ♥ ♦ ♣ marks were tiny dots regardless of the requested 20px / 64px font-size. Root cause: the bundled FiraMono in svg_loader::shared_fontdb doesn't carry usable Unicode suit glyphs (U+2660-2666). usvg silently fell back to a substitute rendering at default size, producing the "tofu" effect. Fixes by replacing the `<text>` glyph rendering with inline SVG paths. `suit_path_d(suit)` returns a single closed-perimeter path authored in a 32 × 32 logical box, then face_svg wraps it in two `<g transform>` blocks (top-left small + bottom-right rotated large). Path-based rendering bypasses the font system entirely — same bytes on every machine, no fontdb dependency, no substitution risk. Same path data renders correctly whether filled (♥ ♠) or outlined (♦ ♣ — the always-on color-blind glyph differentiation from the design system). Knock-on changes that must land in this commit per the migration plan's lockstep rule: - `EXPECTED` in tests/card_face_svg_pin.rs rebaselined: 52 face hashes change (text → path), 5 back hashes unchanged (back_svg untouched). The bootstrap pattern in the test handled the rebaseline cleanly — empty EXPECTED, re-run, paste, re-run. - assets/cards/faces/*.png regenerated (the 52 face PNGs). - solitaire_engine/assets/themes/default/*_*.svg regenerated (the 52 theme face SVGs that production rasterises at startup). Both rendering paths must agree. Workspace clippy + cargo test --workspace clean. Pin test passes against the new hashes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -2,15 +2,24 @@
|
||||
<rect x="1" y="1" width="254" height="382" rx="16" ry="16"
|
||||
fill="#1a1a1a" stroke="#d0d0d0" stroke-width="2"/>
|
||||
|
||||
<!-- Top-left rank + small suit glyph. -->
|
||||
<!-- Top-left rank in JetBrains-Mono-styled FiraMono (rank digits
|
||||
and letters render correctly in FiraMono; only the suit glyphs
|
||||
needed to escape to paths). -->
|
||||
<text x="14" y="44" font-family="Fira Mono" font-size="36" font-weight="700"
|
||||
fill="#d0d0d0">K</text>
|
||||
<text x="14" y="68" font-family="Fira Mono" font-size="20"
|
||||
fill="#d0d0d0">♠</text>
|
||||
|
||||
<!-- Bottom-right large suit glyph, rotated 180° about its own
|
||||
baseline anchor so the glyph reads upside-down. -->
|
||||
<text x="242" y="350" font-family="Fira Mono" font-size="64"
|
||||
text-anchor="end" fill="#d0d0d0"
|
||||
transform="rotate(180 242 332)">♠</text>
|
||||
<!-- Top-left small suit glyph at (14, 50), 20 × 20.
|
||||
`suit_path_d` is authored in a 32-unit box, so scale 0.625
|
||||
lands the visible glyph at 20 px. -->
|
||||
<g transform="translate(14 50) scale(0.625)">
|
||||
<path d="M16,4 C 9,9 2,14 2,21 C 2,25 5,28 9,28 C 13,28 14,26 14,24 L 13,30 L 19,30 L 18,24 C 18,26 19,28 23,28 C 27,28 30,25 30,21 C 30,14 23,9 16,4 Z" fill="#d0d0d0"/>
|
||||
</g>
|
||||
|
||||
<!-- Bottom-right large suit glyph, 64 × 64, rotated 180° so it
|
||||
reads upside-down (the convention for inverted-corner
|
||||
indicators). The transform pipeline lands the glyph's visible
|
||||
bottom-right at (242, 350) and visible top-left at (178, 286). -->
|
||||
<g transform="translate(242 350) rotate(180) scale(2)">
|
||||
<path d="M16,4 C 9,9 2,14 2,21 C 2,25 5,28 9,28 C 13,28 14,26 14,24 L 13,30 L 19,30 L 18,24 C 18,26 19,28 23,28 C 27,28 30,25 30,21 C 30,14 23,9 16,4 Z" fill="#d0d0d0"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 757 B After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user