discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

my-sea spread: reversed CROSS card finally reads as reversed — upright cross top points left (270°), reversed points right (90°), 180° apart — TDD-adjacent CSS fix

Browse Source 
The Celtic-Cross crossing card is rotated to lie landscape. Two equal-specificity rules set its rotation: `.sea-pos-cross .sea-card-slot` (upright) and `.sea-pos-cross .sea-card-slot--reversed` (reversed) — both (0,2,0). The upright rule sits LATER in source, so it won the cascade for reversed cross cards too: every crossing card rendered at 90° (top-right) and a reversed card never indicated reversal in the spread (the modal was fine). The inline comment claiming the reversed rule had 'higher specificity' was simply wrong.

Fix (user-spec: reversed cross top points rightward): keep the reversed card at 90° (top-right) and flip the UPRIGHT to 270° (top-left), so the two read 180° apart. The reversed rule is re-specified as `.sea-pos-cross .sea-card-slot.sea-card-slot--reversed` (0,3,0) so it genuinely out-specifies the base rule and wins regardless of source order. [[feedback-scss-import-order-specificity]]

Pure CSS in _card-deck.scss; covers both live draws (_fillSlot) and saved hands (_my_sea_slot.html), which share the .sea-card-slot--reversed/.sea-pos-cross classes. Modal reversal (.stage-card--reversed, 180°) untouched. No tests pin the rotation degrees. Verified in the compiled output.css cascade.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-01 13:59:06 -04:00
parent efbf98ecf2
commit 5b6a1be347
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/static_src/scss/_card-deck.scss
View File

@@ -1676,9 +1676,15 @@ $sea-card-h: 6.5rem;
// not just each character upside-down in place.
.sea-card-slot--reversed { transform: rotate(180deg); }
// Cross-position adds 90° already; reversed cross combines to 270°. Higher
// specificity than the .sea-pos-cross .sea-card-slot rule so it wins.
.sea-pos-cross .sea-card-slot--reversed { transform: rotate(270deg); }
// Reversed crossing card: top toward the RIGHT (90° CW) — 180° from the
// upright cross (270°, top-left) so the reversal is visually unmistakable in
// the spread (the modal indicates it separately). MUST out-specify the
// `.sea-pos-cross .sea-card-slot` rule above — chaining `.sea-card-slot
// .sea-card-slot--reversed` makes this (0,3,0) vs that (0,2,0); the prior
// `.sea-pos-cross .sea-card-slot--reversed` was only (0,2,0) — EQUAL — so the
// later upright rule won the cascade and reversed cross never read as reversed.
// [[feedback-scss-import-order-specificity]]
.sea-pos-cross .sea-card-slot.sea-card-slot--reversed { transform: rotate(90deg); }
// Long Roman numerals (≥ 5 chars: XVIII, XXIII, XXVIII, XXXIII, XXXVIII,
// XLIII, XLVIII) — squeeze horizontally via scaleX so they fit the slot
@@ -1783,7 +1789,12 @@ $_sea-card-glow: 0 0 0.5rem 0.5rem rgba(var(--ninUser), 0.3), 0 0 0.4rem rgba(0,
.sea-pos-label { opacity: 0.6; }
}
.sea-pos-cross .sea-card-slot { transform: rotate(90deg); }
// Upright crossing card lies across with its top toward the LEFT (270° CW),
// so a reversed crossing card (below) reads 180° opposite — top toward the
// RIGHT — instead of looking identical. (Bug pre-2026-06-01: the reversed
// rule lost the cascade and every cross card pointed right, so reversal was
// never indicated. user-spec: reversed cross top points rightward.)
.sea-pos-cross .sea-card-slot { transform: rotate(270deg); }
// Sig card in center slot — compact rank + icon display; tilted CCW so Cover slot peeks through
.sea-sig-card {