From 9cdd2cda683043af8bff478d5bf014e7bc496085 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 25 May 2026 22:31:52 -0400 Subject: [PATCH] =?UTF-8?q?Sky-wheel=20Aspected=20/=20Unaspected=20mini-po?= =?UTF-8?q?rtal=20=E2=80=94=20new=20`#id=5Fmini=5Ftooltip=5Fportal`=20for?= =?UTF-8?q?=20the=20sky=20tooltip's=20DON|DOFF=20apparatus=20+=20dashboard?= =?UTF-8?q?=20My=20Sky=20applet=20parity=20+=20styling=20polish.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User-spec 2026-05-25 PM ("To the #id_sky_tooltip, whenever it has a DON|DOFF apparatus, we should add a #id_mini_tooltip_portal except, instead of Equipped|Unequipped, this would feature an Aspected|Unaspected toggle"). Mirrors the game-kit / wallet Equipped-Unequipped micro-tooltip pattern — text-swaps "Aspected" / "Unaspected" tied to sky-wheel's `_aspectsVisible` state. **(1) `sky-wheel.js`** — 3 new helpers (`_updateAspectMiniPortal` / `_showAspectMiniPortal` / `_hideAspectMiniPortal` / `_positionAspectMiniPortal`) + element cache (`_miniPortalEl`) + 5 integration points (cache in `_injectTooltipControls`; show in `_activatePlanet` + `_activateAngle`; hide in `_activateElement` + `_activateSign` + `_activateHouse` + `_closeTooltip`; text-swap in `_updateAspectToggleUI`). State derives from existing `_aspectsVisible` global — single source of truth, no parallel tracking. Only the planets + angles rings show the apparatus (per existing UX); the elements/signs/houses rings hide it w. the rest of the DON/DOFF buttons. **(2) Positioning** — mirrors `gameboard.js:285-287`'s right-anchored pattern (was left-aligned + 6px gap in the first draft): pin mini-portal RIGHT edge to main tooltip's right edge, 4px below the tooltip's bottom. Text width changes grow/shrink leftward — same visual logic the Game Kit's Equipped/Unequipped already uses. **(3) z-index** — set to 150 inline via JS for the sky surface (default `#id_mini_tooltip_portal { z-index: 9999 }` from `_gameboard.scss` is universal — too high for the sky tooltip's PRV/NXT buttons, which inherit the tooltip's z-index 200 stacking context). User-reported "make sure its z-index falls behind the NXT button, as now it's in front of PRV". The sky tooltip body itself sits at z-index 200; mini-portal at 150 falls below it where they overlap (they don't — the mini sits below the tooltip body) but lets the absolutely-positioned PRV/NXT btns inside the tooltip render on top. **(4) Styling** — bumped `#id_mini_tooltip_portal` font-size 0.8em → 0.95em + added `padding: 0.35rem 0.75rem` + `border-radius: 0.3rem` per user-spec "a bit bigger both in dimensions and font-size". Universal change (affects game-kit + wallet mini-portals too) — visually closer to the main tooltip's text scale w/o approaching it. **(5) Dashboard parity** — `dashboard/home.html` gains the same `
` scaffold so the My Sky applet (`_applet-my-sky.html`) picks it up. Without this, the applet's sky-wheel rendered the main tooltip but the mini-portal `getElementById` would return null. Now both the standalone /dashboard/sky/ page + the dashboard's My Sky applet host the same mini-portal scaffold; sky-wheel.js caches whichever one is present on init. Tests: 1314/1314 IT+UT total green (76s; pure SCSS + JS + template changes, no test surface — no new conditional or template branch to test directly). Visual verify on /dashboard/sky/: Saturn planet tooltip opens w. DON visible + "Unaspected" mini-portal below-right; click DON → text swaps to "Aspected" + aspect lines draw on wheel; click DOFF → swaps back. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../static/apps/gameboard/sky-wheel.js | 50 +++++++++++++++++++ src/static_src/scss/_gameboard.scss | 8 ++- src/static_src/scss/_sky.scss | 23 +++++---- src/templates/apps/dashboard/home.html | 7 +++ src/templates/apps/dashboard/sky.html | 13 +++++ 5 files changed, 90 insertions(+), 11 deletions(-) diff --git a/src/apps/gameboard/static/apps/gameboard/sky-wheel.js b/src/apps/gameboard/static/apps/gameboard/sky-wheel.js index 03bbdc4..a8b06f7 100644 --- a/src/apps/gameboard/static/apps/gameboard/sky-wheel.js +++ b/src/apps/gameboard/static/apps/gameboard/sky-wheel.js @@ -215,6 +215,10 @@ const SkyWheel = (() => { let _aspectIndex = {}; // planetName → [{partner, type, orb, applying_planet}] let _aspectPlanet = null; // name of planet whose lines are currently drawn + // Polish-8 — aspect mini-portal element ref (Aspected / Unaspected swap + // alongside the DON|DOFF apparatus on the planet + angle tooltips). + let _miniPortalEl = null; + // ── Static asset base path ──────────────────────────────────────────────── let _staticBase = null; @@ -416,6 +420,7 @@ const SkyWheel = (() => { function _closeTooltip() { _clearActive(); if (_tooltipEl) _tooltipEl.style.display = 'none'; + _hideAspectMiniPortal(); } /** @@ -550,6 +555,7 @@ const SkyWheel = (() => { _tooltipEl.querySelector('.nw-asp-doff')?.style.removeProperty('display'); } _updateAspectToggleUI(); + _showAspectMiniPortal(); } /** @@ -682,6 +688,7 @@ const SkyWheel = (() => { _tooltipEl.querySelector('.nw-asp-don')?.style.removeProperty('display'); _tooltipEl.querySelector('.nw-asp-doff')?.style.removeProperty('display'); } + _showAspectMiniPortal(); } /** Lock-activate an element slice by cycle index. */ @@ -789,6 +796,7 @@ const SkyWheel = (() => { _tooltipEl.querySelector('.nw-asp-don')?.style.setProperty('display', 'none'); _tooltipEl.querySelector('.nw-asp-doff')?.style.setProperty('display', 'none'); } + _hideAspectMiniPortal(); } function _activateSign(idx) { @@ -855,6 +863,7 @@ const SkyWheel = (() => { _tooltipEl.querySelector('.nw-asp-don')?.style.setProperty('display', 'none'); _tooltipEl.querySelector('.nw-asp-doff')?.style.setProperty('display', 'none'); } + _hideAspectMiniPortal(); } function _activateHouse(idx) { @@ -897,6 +906,7 @@ const SkyWheel = (() => { _tooltipEl.querySelector('.nw-asp-don')?.style.setProperty('display', 'none'); _tooltipEl.querySelector('.nw-asp-doff')?.style.setProperty('display', 'none'); } + _hideAspectMiniPortal(); } /** Advance the active ring by +1 (NXT) or -1 (PRV). */ @@ -934,6 +944,45 @@ const SkyWheel = (() => { doff.classList.toggle('btn-disabled', !_aspectsVisible); don.textContent = _aspectsVisible ? '×' : 'DON'; doff.textContent = !_aspectsVisible ? '×' : 'DOFF'; + _updateAspectMiniPortal(); + } + + // Polish-8 — aspect mini-portal: text-swaps "Aspected" / "Unaspected" + // alongside the main tooltip, mirroring the game-kit Equipped / Unequipped + // micro-tooltip pattern. Only relevant for planets + angles (rings w. + // DON|DOFF apparatus). State derives from `_aspectsVisible` global + + // whether the currently-active item is the one whose lines are drawn. + function _updateAspectMiniPortal() { + if (!_miniPortalEl) return; + _miniPortalEl.textContent = _aspectsVisible ? 'Aspected' : 'Unaspected'; + } + + function _showAspectMiniPortal() { + if (!_miniPortalEl || !_tooltipEl) return; + _updateAspectMiniPortal(); + _positionAspectMiniPortal(); + _miniPortalEl.classList.add('active'); + } + + function _hideAspectMiniPortal() { + if (!_miniPortalEl) return; + _miniPortalEl.classList.remove('active'); + } + + // Mirror the gameboard's mini-portal positioning (gameboard.js:285-287): + // pin the mini-portal's RIGHT edge to the main tooltip's right edge, + // 4px below the tooltip's bottom. Text width changes grow/shrink + // leftward instead of overflowing the right column. z-index lowered + // to 150 so it falls behind the tooltip's PRV/NXT buttons (which + // inherit the tooltip's z-index 200 stacking context) per user-spec + // 2026-05-25 PM "make sure its z-index falls behind the NXT button". + function _positionAspectMiniPortal() { + if (!_miniPortalEl || !_tooltipEl) return; + const r = _tooltipEl.getBoundingClientRect(); + _miniPortalEl.style.left = ''; + _miniPortalEl.style.right = Math.round(window.innerWidth - r.right) + 'px'; + _miniPortalEl.style.top = (r.bottom + 4) + 'px'; + _miniPortalEl.style.zIndex = '150'; } function _toggleAspects() { @@ -959,6 +1008,7 @@ const SkyWheel = (() => { function _injectTooltipControls() { _tooltipEl = document.getElementById('id_sky_tooltip'); if (!_tooltipEl) return; + _miniPortalEl = document.getElementById('id_mini_tooltip_portal'); _tooltipEl.innerHTML = `` + `` + diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index a39c095..b5e3e70 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -210,8 +210,14 @@ body.page-gameboard { #id_mini_tooltip_portal { position: fixed; z-index: 9999; - font-size: 0.8em; + // Polish-8 — bumped from font-size 0.8em → 0.95em + added padding to + // give the mini-portal a bit more presence per user-spec "a bit bigger + // both in dimensions and font-size". Visually closer to the main + // tooltip's text scale w/o approaching it — still clearly subordinate. + font-size: 0.95em; font-style: italic; + padding: 0.35rem 0.75rem; + border-radius: 0.3rem; width: fit-content; white-space: nowrap; text-align: right; diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss index 936f748..4214892 100644 --- a/src/static_src/scss/_sky.scss +++ b/src/static_src/scss/_sky.scss @@ -417,14 +417,16 @@ html.sky-open .sky-modal-wrap { .nw-outer-ring { fill: none; - stroke: rgba(var(--terUser), 1); + stroke: rgba(var(priYl), 1); stroke-width: 1.5px; } .nw-inner-disc { - fill: rgba(var(--quaUser), 0.6); - stroke: rgba(var(--terUser), 1); + fill: rgba(0, 0, 0, 0); + backdrop-filter: blur(5px); + stroke: rgba(var(--priYl), 1); stroke-width: 0.75px; + // box-shadow: 1px 1px 3px rgba(0, 0, 0, 1); } // Axes (ASC / DSC / MC / IC) @@ -436,8 +438,9 @@ html.sky-open .sky-modal-wrap { .nw-sign--stone, .nw-sign--air, .nw-sign--water { - fill: rgba(var(--priYl), 0.5); - stroke: rgba(var(--terUser), 1); + fill: rgba(0, 0, 0, 0.33); + backdrop-filter: blur(5px); + stroke: rgba(var(--priYl), 1); stroke-width: 0.75px; } @@ -454,10 +457,10 @@ html.sky-open .sky-modal-wrap { .nw-sign-icon--water { fill: rgba(var(--priVt), 1); } // 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.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; } +.nw-house-cusp { stroke: rgba(var(--priYl), 1); stroke-width: 1.2px; } +.nw-house-num { fill: rgba(var(--priYl), 1); } +.nw-house-fill--even { fill: rgba(var(--secGn), 0.75); stroke: rgba(var(--priYl), 1); stroke-width: 0.75px; } +.nw-house-fill--odd { fill: rgba(var(--quiGn), 0.75); stroke: rgba(var(--priYl), 1); stroke-width: 0.75px; } // Planets — base geometry .nw-planet-circle, @@ -509,7 +512,7 @@ html.sky-open .sky-modal-wrap { .nw-sign-group.nw-sign--active, .nw-house-group:hover, .nw-house-group.nw-house--active { - filter: drop-shadow(0 0 5px rgba(var(--ninUser), 0.9)); + filter: drop-shadow(0 0 5px rgba(var(--priLm), 1)); } // Zodiac icon circles — muted by default, full opacity on hover/active diff --git a/src/templates/apps/dashboard/home.html b/src/templates/apps/dashboard/home.html index bb13ab6..21d70d6 100644 --- a/src/templates/apps/dashboard/home.html +++ b/src/templates/apps/dashboard/home.html @@ -23,5 +23,12 @@ + {% comment %} + Polish-8 — aspect mini-portal for the My Sky applet's sky-wheel + (parallel to sky.html's main page). sky-wheel.js text-swaps + "Aspected" / "Unaspected" tied to `_aspectsVisible` whenever the + DON/DOFF apparatus is shown (planets + angles only). + {% endcomment %} +
{% endif %} {% endblock content %} diff --git a/src/templates/apps/dashboard/sky.html b/src/templates/apps/dashboard/sky.html index 43e0007..4f3ce3e 100644 --- a/src/templates/apps/dashboard/sky.html +++ b/src/templates/apps/dashboard/sky.html @@ -97,6 +97,19 @@ +{% comment %} +Polish-8 — aspect mini-portal. Mirrors the game-kit / wallet mini-tooltip- +portal pattern (Equipped / Unequipped / In-Use) but text-swaps "Aspected" / +"Unaspected" tied to the sky-wheel's `_aspectsVisible` state per the +currently-active planet/angle. Only shown when the main `#id_sky_tooltip` +is open AND the active ring is planets or angles (the rings w. DON|DOFF +apparatus); hidden for elements/signs/houses rings + on close. Reuses the +`.token-tooltip.token-tooltip--mini` SCSS chrome already declared in +`_gameboard.scss:210-220` (ID-keyed rule applies globally since the SCSS +bundle is unified via `core.scss`). +{% endcomment %} +
+