troytt
/
diablo2-web
1
0
Fork 0
Code Issues 12 Pull Requests Packages Projects Releases Wiki Activity

fix(ui): align Private Stash header and gold text inside TradeStash.dc6 recessed boxes (#493) #494

Merged
troytt merged 1 commits from fix/stash-text-align into main 2026-09-27 05:55:33 +00:00
Conversation 0 Commits 1 Files Changed 2 +165 -3
troytt commented 2026-09-27 05:55:32 +00:00
Owner
Copy Link

Fixes #493

Summary

  • Root Cause:
    1. D2FontRenderer.drawText uses ctx.textBaseline = 'alphabetic' (where y is the glyph baseline, not the top edge). Passing oy + 26 for the top header and oy + 48 for the gold readout placed the first line on top of the upper gold frame (relY = 15..26 vs box relY = 24..38) and the second line on the stone divider between the two boxes (relY = 39..48 vs box relY = 49..65), leaving the bottom dark recess completely empty.
    2. The top recessed box in Panel\TradeStash.dc6 (public/ui/stash-bg.png) is split by a vertical divider at relX = 94..96 into a left 20×15 icon socket (relX = 74..93) and a right 151×15 text compartment (relX = 97..247, center ox + 172). Drawing 私人储物箱 (Private Stash) in fontexocet10 (~168.25px wide) centered at ox + 160 caused 私 to land inside the left square socket and 人 to straddle the relX = 94..96 vertical divider.
  • Fix:
    • Exported canonical TradeStash.dc6 header recess geometry constants (STASH_HEADER_ICON_SOCKET, STASH_HEADER_TOP_RECESS, STASH_HEADER_BOTTOM_RECESS) in src/ui/world-panels.ts.
    • Centered 私人储物箱 (Private Stash) inside the top-right recess (x = ox + 172, y = oy + 35, font: 'font8' width ~129.8px < 151px) so it never crosses the relX = 94..96 divider.
    • Centered 储物箱金币: <amount> inside the bottom full-width recess (x = ox + 160, y = oy + 61, font: 'font8').
  • Verification:
    • Added unit tests in tests/stash.test.ts (8. Stash Header Recessed Boxes & Text Alignment Parity (Issue #493)).
    • Verified pixel-exact visual alignment in Headless Chromium.
Fixes #493 ## Summary - **Root Cause**: 1. `D2FontRenderer.drawText` uses `ctx.textBaseline = 'alphabetic'` (where `y` is the glyph baseline, not the top edge). Passing `oy + 26` for the top header and `oy + 48` for the gold readout placed the first line on top of the upper gold frame (`relY = 15..26` vs box `relY = 24..38`) and the second line on the stone divider between the two boxes (`relY = 39..48` vs box `relY = 49..65`), leaving the bottom dark recess completely empty. 2. The top recessed box in `Panel\TradeStash.dc6` (`public/ui/stash-bg.png`) is split by a vertical divider at `relX = 94..96` into a left `20×15` icon socket (`relX = 74..93`) and a right `151×15` text compartment (`relX = 97..247`, center `ox + 172`). Drawing `私人储物箱 (Private Stash)` in `fontexocet10` (`~168.25px` wide) centered at `ox + 160` caused `私` to land inside the left square socket and `人` to straddle the `relX = 94..96` vertical divider. - **Fix**: - Exported canonical `TradeStash.dc6` header recess geometry constants (`STASH_HEADER_ICON_SOCKET`, `STASH_HEADER_TOP_RECESS`, `STASH_HEADER_BOTTOM_RECESS`) in `src/ui/world-panels.ts`. - Centered `私人储物箱 (Private Stash)` inside the top-right recess (`x = ox + 172, y = oy + 35`, `font: 'font8'` width `~129.8px < 151px`) so it never crosses the `relX = 94..96` divider. - Centered `储物箱金币: <amount>` inside the bottom full-width recess (`x = ox + 160, y = oy + 61`, `font: 'font8'`). - **Verification**: - Added unit tests in `tests/stash.test.ts` (`8. Stash Header Recessed Boxes & Text Alignment Parity (Issue #493)`). - Verified pixel-exact visual alignment in Headless Chromium.
troytt added 1 commit 2026-09-27 05:55:32 +00:00
troytt merged commit d2358ede37 into main 2026-09-27 05:55:33 +00:00
troytt deleted branch fix/stash-text-align 2026-09-27 05:55:33 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#494
No description provided.
Delete Branch "fix/stash-text-align"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?