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,