Sky-wheel Aspected / Unaspected mini-portal — new #id_mini_tooltip_portal for the sky tooltip's DON|DOFF apparatus + dashboard My Sky applet parity + styling polish.
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 `<div id="id_mini_tooltip_portal" class="token-tooltip token-tooltip--mini">` 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) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -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 =
|
||||
`<button type="button" class="btn btn-equip nw-asp-don">DON</button>` +
|
||||
`<button type="button" class="btn btn-unequip btn-disabled nw-asp-doff">DOFF</button>` +
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -23,5 +23,12 @@
|
||||
<div id="id_tooltip_portal" class="token-tooltip" style="display:none;"></div>
|
||||
<div id="id_sky_tooltip" class="tt" style="display:none;"></div>
|
||||
<div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>
|
||||
{% 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 %}
|
||||
<div id="id_mini_tooltip_portal" class="token-tooltip token-tooltip--mini"></div>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
|
||||
@@ -97,6 +97,19 @@
|
||||
<div id="id_sky_tooltip" class="tt" style="display:none;"></div>
|
||||
<div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>
|
||||
|
||||
{% 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 %}
|
||||
<div id="id_mini_tooltip_portal" class="token-tooltip token-tooltip--mini"></div>
|
||||
|
||||
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
|
||||
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
|
||||
<script src="{% static 'apps/dashboard/note.js' %}"></script>
|
||||
|
||||
Reference in New Issue
Block a user