From b1c683395685892cd6f464cd4b69f95a7f48298f Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 25 May 2026 17:30:21 -0400 Subject: [PATCH] =?UTF-8?q?Sky=20wheel=20`.nw-rx`=20badge=20=E2=80=94=20`.?= =?UTF-8?q?shop-badge`=20parity=20for=20retrograde=20planets.=20User-spec?= =?UTF-8?q?=202026-05-25=20PM:=20"Can=20you=20help=20me=20give=20a=20simil?= =?UTF-8?q?ar=20badge=20to=20.nw-rx=20as=20to=20that=20by=20the=20stack=20?= =?UTF-8?q?of=20=C3=975=20Tithe=20Tokens=20in=20wallet.html's=20Shop=20app?= =?UTF-8?q?let=3F=20One=20commensurately=20scaled=20to=20the=20planet,=20a?= =?UTF-8?q?nd=20containing=20the=20Rx=20symbol=20where=20it=20already=20is?= =?UTF-8?q?,=20slightly=20overlapping=20its=20planet=20and=20along=20the?= =?UTF-8?q?=20same=20degree=20as=20it".=20Mirrors=20the=20wallet=20Shop=20?= =?UTF-8?q?applet's=20`.shop-badge`=20=C3=97N=20quantity=20chip:=20`--secU?= =?UTF-8?q?ser`=20disc=20+=20`--priUser`=20glyph=20+=20bold=20weight.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Implementation** (SVG, not CSS-positioned since `.nw-rx` is an SVG `` child of `.nw-planet-group`): adds a new `` to `_drawPlanets` in `sky-wheel.js` BEFORE the existing `.nw-rx ` 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 ``'s background**: SVG `` doesn't support `background-color` directly; the canonical pattern is a sibling `` or `` underneath. Picked `` 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) --- .../static/apps/gameboard/sky-wheel.js | 27 +++++++++++++++---- src/static_src/scss/_sky.scss | 15 +++++++---- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/apps/gameboard/static/apps/gameboard/sky-wheel.js b/src/apps/gameboard/static/apps/gameboard/sky-wheel.js index 4a9bbc8..03bbdc4 100644 --- a/src/apps/gameboard/static/apps/gameboard/sky-wheel.js +++ b/src/apps/gameboard/static/apps/gameboard/sky-wheel.js @@ -1253,13 +1253,26 @@ const SkyWheel = (() => { .text(PLANET_SYMBOLS[name] || name[0]); let rxLabel = null; + let rxBadge = null; + // Rx-retrograde badge — mirrors the wallet Shop applet's `.shop-badge` + // ×N pattern: --secUser disc + --priUser glyph + bold. Sized at ~70% + // of the planet circle radius + placed slightly outside the planet + // along the same angle so the badge edge overlaps the planet edge. + // User-spec 2026-05-25 PM. if (pdata.retrograde) { + const RX_OFFSET = R.planetR + _r * 0.07; + rxBadge = planetEl.append('circle') + .attr('cx', _cx + RX_OFFSET * Math.cos(ascAngle)) + .attr('cy', _cy + RX_OFFSET * Math.sin(ascAngle)) + .attr('r', _r * 0.035) + .attr('class', 'nw-rx-badge') + .attr('pointer-events', 'none'); rxLabel = planetEl.append('text') - .attr('x', _cx + (R.planetR + _r * 0.055) * Math.cos(ascAngle)) - .attr('y', _cy + (R.planetR + _r * 0.055) * Math.sin(ascAngle)) + .attr('x', _cx + RX_OFFSET * Math.cos(ascAngle)) + .attr('y', _cy + RX_OFFSET * Math.sin(ascAngle)) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') - .attr('font-size', `${_r * 0.040}px`) + .attr('font-size', `${_r * 0.045}px`) .attr('class', 'nw-rx') .attr('pointer-events', 'none') .text('℞'); @@ -1280,9 +1293,13 @@ const SkyWheel = (() => { .attrTween('y', () => t => _cy + R.planetR * Math.sin(interpAngle(t))); if (rxLabel) { + const RX_OFFSET = R.planetR + _r * 0.07; + rxBadge.transition(transition()) + .attrTween('cx', () => t => _cx + RX_OFFSET * Math.cos(interpAngle(t))) + .attrTween('cy', () => t => _cy + RX_OFFSET * Math.sin(interpAngle(t))); rxLabel.transition(transition()) - .attrTween('x', () => t => _cx + (R.planetR + _r * 0.055) * Math.cos(interpAngle(t))) - .attrTween('y', () => t => _cy + (R.planetR + _r * 0.055) * Math.sin(interpAngle(t))); + .attrTween('x', () => t => _cx + RX_OFFSET * Math.cos(interpAngle(t))) + .attrTween('y', () => t => _cy + RX_OFFSET * Math.sin(interpAngle(t))); } tick.transition(transition()) diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index 5e61def..936f748 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -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 `` behind the existing `` 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,