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

Sky wheel .nw-rx badge — .shop-badge parity for retrograde planets. User-spec 2026-05-25 PM: "Can you help me give a similar badge to .nw-rx as to that by the stack of ×5 Tithe Tokens in wallet.html's Shop applet? One commensurately scaled to the planet, and containing the Rx symbol where it already is, slightly overlapping its planet and along the same degree as it". Mirrors the wallet Shop applet's .shop-badge ×N quantity chip: --secUser disc + --priUser glyph + bold weight.

Browse Source 
**Implementation** (SVG, not CSS-positioned since `.nw-rx` is an SVG `<text>` child of `.nw-planet-group`): adds a new `<circle class="nw-rx-badge">` to `_drawPlanets` in `sky-wheel.js` BEFORE the existing `.nw-rx <text>` so the text stacks on top of the disc. Both share the same center coords + animate together via a shared `attrTween` on the planet's degree interpolation. Geometry tuned to the user's "commensurately scaled / slightly overlapping" spec: `RX_OFFSET = R.planetR + _r * 0.07` (radial position along the same angle as the planet — keeps badge on the same degree per the user's "along the same degree as it"); `r = _r * 0.035` (70% of the planet circle radius — "commensurately scaled"). Net: badge center sits `_r * 0.07` outside the planet center; badge edge intrudes `~_r * 0.015` past the planet edge — a thin overlap rather than a flush tangent. Glyph font-size bumped from `_r * 0.040 → _r * 0.045` to read better inside the larger disc.

**SCSS** (`_sky.scss`): new `.nw-rx-badge { fill: rgba(var(--secUser), 1); stroke: rgba(var(--priUser), 0.6); stroke-width: 0.5px; }` — light disc w. a thin dark outline to separate it from same-color planet-element rings (gold-greens, etc.) when an Rx planet lands on a matching-color band. `.nw-rx` glyph rule simplified: `fill --priUser`, drops the prior `stroke --priUser` (now unnecessary — the disc gives the glyph its own clean substrate), gains `font-weight: 900` to match the `.shop-badge` text weight contract.

**Why a new SVG element rather than reusing the existing `<text>`'s background**: SVG `<text>` doesn't support `background-color` directly; the canonical pattern is a sibling `<rect>` or `<circle>` underneath. Picked `<circle>` to match the round `.shop-badge` chrome (1.5rem rounded square ≈ disc at the rendered size).

Tests: 198/198 gameboard ITs+UTs green (23s; no test surface — pure SVG render + SCSS change). Visual verify 2026-05-25 PM via Claudezilla on `/dashboard/sky/`: Pluto + Jupiter + Saturn (today's retrograde planets) all carry the cream-disc Rx badge w. dark `R` glyph, slightly overlapping their planet circles along the same angle. No Jasmine spec run — the change is pure DOM-shape augmentation w/o behavioral logic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-25 17:30:21 -04:00
parent 1839a375fe
commit b1c6833956
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/static_src/scss/_sky.scss
View File

@@ -436,7 +436,7 @@ html.sky-open .sky-modal-wrap {
.nw-sign--stone,
.nw-sign--air,
.nw-sign--water {
fill: rgba(var(--priYl), 0.25);
fill: rgba(var(--priYl), 0.5);
stroke: rgba(var(--terUser), 1);
stroke-width: 0.75px;
}
@@ -456,13 +456,13 @@ html.sky-open .sky-modal-wrap {
// House ring — uniform --priGn bg
.nw-house-cusp { stroke: rgba(var(--terUser), 1); stroke-width: 1.2px; }
.nw-house-num { fill: rgba(var(--ninUser), 1); }
.nw-house-fill--even { fill: rgba(var(--secGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
.nw-house-fill--odd { fill: rgba(var(--quiGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
.nw-house-fill--even { fill: rgba(var(--secGn), 0.75); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
.nw-house-fill--odd { fill: rgba(var(--quiGn), 0.75); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
// Planets — base geometry
.nw-planet-circle,
.nw-planet-circle--rx { stroke-width: 1px; }
.nw-planet-label { stroke-width: 0.4px; paint-order: stroke fill; }
.nw-planet-label { stroke-width: 1px; paint-order: stroke fill; }
// Per-planet circle: fill = ternary, border = senary
.nw-planet--au { fill: rgba(var(--terAu), 1); stroke: rgba(var(--sixAu), 1); } // Sun
@@ -487,7 +487,12 @@ html.sky-open .sky-modal-wrap {
.nw-planet-label--u { fill: rgba(var(--sixU), 1); stroke: rgba(var(--sixU), 0.6); }
.nw-planet-label--np { fill: rgba(var(--sixNp), 1); stroke: rgba(var(--sixNp), 0.6); }
.nw-planet-label--pu { fill: rgba(var(--sixPu), 1); stroke: rgba(var(--sixPu), 0.6); }
.nw-rx { fill: rgba(var(--terUser), 1); }
// Rx retrograde badge — mirrors the wallet Shop applet's `.shop-badge` (×N
// quantity chip): --secUser disc + --priUser glyph + bold. User-spec 2026-
// 05-25 PM. Drawn as an SVG `<circle>` behind the existing `<text>` so the
// pair scales w. the chart (font-size + circle radius both keyed off `_r`).
.nw-rx-badge { fill: rgba(var(--secUser), 1); stroke: rgba(var(--priUser), 0.6); stroke-width: 0.5px; }
.nw-rx { fill: rgba(var(--priUser), 1); stroke: none; font-weight: 900; }
// Hover and active-lock glow — planet, element, sign, house groups
.nw-planet-group,