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

CAST SKY: unify w. My Sky — inline --duoUser felt + scroll-snap wheel, gear NVM, burger reopen glow — TDD

Browse Source 
Replaces the root-level dark Gaussian CAST SKY modal with the my_sky / sky.html
apparatus, mirroring the Sig Select unify (71c0069). Sky data stays seat-bound
(Character.seat), never a pos-circle.

- room.html: the sky overlay moves INTO .room-hex-pane on --duoUser felt
  (has-sky-stage), my_sea-style; rendered through the confirmed state too so
  the burger can reopen the saved wheel. Sky tooltips stay at root.
- _sky_overlay.html: drops .sky-backdrop / .sky-modal-wrap / .sky-modal / header
  + the in-felt NVM; reuses the shared .sky-page form/wheel (.sky-page--room).
  No live preview — the wheel only paints after SAVE SKY (my_sky parity); SAVE
  adds body.sky-saved → the felt flips to scroll-snap (form shunts to page 2,
  ease to the wheel on page 1). saved_sky_json primes the reopen draw. Inert
  STUB hook for the post-character-creation form lock (roadmap step 21).
- _sky.scss: in-room felt fill + open/close (html.sky-open); hides the position
  strip while the felt is up for a clean homogeneous surface.
- _room.scss: html.sky-open pins .room-aperture.is-scrollable (overflow hidden,
  snap none) so the ATLAS/SCROLL/YARN/POST/PULSE reelhouse is unreachable while
  casting; restored the instant the felt closes.
- _room_gear.html + room-views.js: NVM moves into a new .room-menu-sky gear pane
  (→ epic:room, which re-renders DRAW SEA if saved else CAST SKY); syncGear()
  shows it while sky-open.
- _burger.html + _burger.scss + burger-btn.js: the Sky sub-btn goes .active once
  saved (sky_btn_active = sky_confirmed) — concurrent w. a thrice --priTk burger
  pulse (.sky-saved-glow, rhymes w. .flash-inactive); an active click reopens
  the wheel via window.openSkyFelt.
- epic/views.py: sky_btn_active + saved_sky_json ctx off the seat's confirmed
  Character; the acting gamer's WS auto-reload is dropped (SAVE reveals the
  wheel in place; the gear NVM does the nav to DRAW SEA).
- Tests: PickSkyUnifiedFeltTest + PickSeaRenderingTest ITs (930 epic+gameboard
  green); BurgerSpec sky-glow/reopen Jasmine (full suite green); PickSky
  LocalStorageTest + PickSkyDelTest FTs reworked to the post-save flow.

[[project-deck-segment-model]] [[feedback-scss-import-order-specificity]]

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-07 16:54:33 -04:00
parent 75301ca84d
commit 1f874de459
14 changed files with 665 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/templates/apps/gameboard/_partials/_sky_overlay.html
View File

@@ -1,11 +1,14 @@
{% load static %}
{# CAST SKY overlay — natal chart entry + D3 wheel preview #}
{# Included in room.html when table_status == "SKY_SELECT" #}
{# Opens when user clicks #id_pick_sky_btn; html.sky-open controls #}
{# visibility via CSS — backdrop-filter blur + centred modal. #}
{# CAST SKY felt — natal chart entry + D3 wheel, unified with the my_sky / #}
{# sky.html apparatus (2026-06-07). Renders INSIDE .room-hex-pane on edge-to- #}
{# edge --duoUser felt (no dark Gaussian backdrop / modal), my_sea-style. The #}
{# .sky-page wrapper REUSES sky.html's dashboard form/wheel rules; the #}
{# .sky-page--room modifier scopes the in-room fill + open/close visibility. #}
{# Opens when the user clicks #id_pick_sky_btn (html.sky-open). Pre-save the #}
{# form shows alone; on SAVE the felt flips into scroll-snap (form shunts down, #}
{# wheel takes page 1). NVM lives in the room gear menu (not on the felt). #}
<div class="sky-backdrop"></div>
<div class="sky-overlay"
<div class="sky-page sky-page--room"
id="id_sky_overlay"
data-preview-url="{% url 'epic:sky_preview' room.id %}"
data-save-url="{% url 'epic:sky_save' room.id %}"
@@ -13,98 +16,84 @@
data-sea-partial-url="{% url 'epic:sea_partial' room.id %}"
data-user-seat-role="{{ user_seat_role }}">
<div class="sky-modal-wrap">
<div class="sky-modal">
<div class="sky-modal-body">
<header class="sky-modal-header">
<h2>SKY <span>SELECT</span></h2>
<p>Enter your birth details to generate your natal chart.</p>
</header>
{# ── Form column ──────────────────────────────────────── #}
<div class="sky-form-col">
<div class="sky-modal-body">
{# form-main scrolls independently; confirm btn stays pinned below it #}
<div class="sky-form-main">
<form id="id_sky_form" autocomplete="off">
{# ── Form column ──────────────────────────────────────── #}
<div class="sky-form-col">
<div class="sky-field">
<label for="id_nf_date">Birth date</label>
<input id="id_nf_date" name="date" type="date" required>
</div>
{# form-main scrolls independently; confirm btn stays pinned below it #}
<div class="sky-form-main">
<form id="id_sky_form" autocomplete="off">
<div class="sky-field">
<label for="id_nf_time">Birth time</label>
<input id="id_nf_time" name="time" type="time" value="12:00">
<small>Local time at birth place. Use 12:00 if unknown.</small>
</div>
<div class="sky-field">
<label for="id_nf_date">Birth date</label>
<input id="id_nf_date" name="date" type="date" required>
<div class="sky-field sky-place-field">
<label for="id_nf_place">Birth place</label>
<div class="sky-place-wrap">
<input id="id_nf_place" name="place" type="text"
placeholder="Start typing a city…"
autocomplete="off">
<button type="button" id="id_nf_geolocate"
class="btn btn-secondary btn-sm"
title="Use device location">
<i class="fa-solid fa-location-crosshairs"></i>
</button>
</div>
<div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
</div>
<div class="sky-field">
<label for="id_nf_time">Birth time</label>
<input id="id_nf_time" name="time" type="time" value="12:00">
<small>Local time at birth place. Use 12:00 if unknown.</small>
<div class="sky-field sky-coords">
<div>
<label>Latitude</label>
<input id="id_nf_lat" name="lat" type="text"
placeholder="—" readonly tabindex="-1">
</div>
<div class="sky-field sky-place-field">
<label for="id_nf_place">Birth place</label>
<div class="sky-place-wrap">
<input id="id_nf_place" name="place" type="text"
placeholder="Start typing a city…"
autocomplete="off">
<button type="button" id="id_nf_geolocate"
class="btn btn-secondary btn-sm"
title="Use device location">
<i class="fa-solid fa-location-crosshairs"></i>
</button>
</div>
<div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
<div>
<label>Longitude</label>
<input id="id_nf_lon" name="lon" type="text"
placeholder="—" readonly tabindex="-1">
</div>
</div>
<div class="sky-field sky-coords">
<div>
<label>Latitude</label>
<input id="id_nf_lat" name="lat" type="text"
placeholder="—" readonly tabindex="-1">
</div>
<div>
<label>Longitude</label>
<input id="id_nf_lon" name="lon" type="text"
placeholder="—" readonly tabindex="-1">
</div>
</div>
<div class="sky-field">
<label for="id_nf_tz">Timezone</label>
<input id="id_nf_tz" name="tz" type="text"
placeholder="auto-detected from coordinates"
readonly tabindex="-1">
</div>
<div class="sky-field">
<label for="id_nf_tz">Timezone</label>
<input id="id_nf_tz" name="tz" type="text"
placeholder="auto-detected from coordinates"
readonly tabindex="-1">
</div>
</form>
</form>
<div id="id_sky_status" class="sky-status"></div>
</div>{# /.sky-form-main #}
<div id="id_sky_status" class="sky-status"></div>
</div>{# /.sky-form-main #}
<button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
Save Sky
</button>
<button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
Save Sky
</button>
</div>
</div>
{# ── Wheel column ─────────────────────────────────────── #}
{# DEL btn is JS-injected after the wheel paints (see the SAVE #}
{# success handler) — keeping it out of the template means a #}
{# pre-save form can never show a DEL action against a non- #}
{# existent wheel. #}
<div class="sky-wheel-col">
<svg id="id_sky_svg" class="sky-svg"></svg>
</div>
{# ── Wheel column ─────────────────────────────────────── #}
{# DEL btn is JS-injected after the wheel paints (see schedule #}
{# Preview success handler) — keeping it out of the template #}
{# means a blank CAST SKY modal can never show a DEL action #}
{# against a non-existent wheel. #}
<div class="sky-wheel-col">
<svg id="id_sky_svg" class="sky-svg"></svg>
</div>
</div>{# /.sky-modal-body #}
</div>{# /.sky-modal-body #}
</div>{# /.sky-modal #}
{# NVM: circle btn centered on the top-right corner of the modal #}
<button type="button" id="id_sky_cancel" class="btn btn-cancel btn-sm">NVM</button>
</div>{# /.sky-modal-wrap #}
</div>{# /.sky-overlay #}
</div>{# /.sky-page--room #}
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
@@ -117,6 +106,8 @@
const svgEl = document.getElementById('id_sky_svg');
const statusEl = document.getElementById('id_sky_status');
const confirmBtn = document.getElementById('id_sky_confirm');
// NVM now lives in the room gear menu (the felt refactor dropped the in-modal
// cancel btn) — guarded everywhere so a null lookup never throws.
const cancelBtn = document.getElementById('id_sky_cancel');
const geoBtn = document.getElementById('id_nf_geolocate');
const placeInput = document.getElementById('id_nf_place');
@@ -142,7 +133,7 @@
// Preload zodiac SVG icons eagerly — they'll be cached before any draw() call.
// To swap an icon, replace the .svg file in zodiac-signs/ and hard-refresh.
SkyWheel.preload();
const _preloadReady = SkyWheel.preload();
// ── localStorage persistence ──────────────────────────────────────────────
// Key scoped to room so multiple rooms don't clobber each other.
@@ -177,8 +168,12 @@
function openSky() {
document.documentElement.classList.add('sky-open');
// Re-sync the room gear to the sky NVM pane (room-views.js owns the gear
// pane-swap; sky-open toggles outside any scroll/view event it watches).
if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
// If the wheel is empty but the form has enough data (restored from
// localStorage), kick off a fresh preview so the animation plays.
// localStorage), kick off a fresh preview so SAVE re-enables (no draw
// until saved — my_sky parity).
if (!svgEl.querySelector('*') && _formReady()) {
schedulePreview();
}
@@ -187,12 +182,12 @@
function closeSky() {
document.documentElement.classList.remove('sky-open');
hideSuggestions();
if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
}
const pickSkyBtn = document.getElementById('id_pick_sky_btn');
if (pickSkyBtn) pickSkyBtn.addEventListener('click', openSky);
cancelBtn.addEventListener('click', closeSky);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSky(); });
if (cancelBtn) cancelBtn.addEventListener('click', closeSky);
// ── Status helper ─────────────────────────────────────────────────────────
@@ -347,12 +342,18 @@
setStatus('');
confirmBtn.disabled = false;
if (svgEl.querySelector('*')) {
SkyWheel.redraw(data);
} else {
SkyWheel.draw(svgEl, data);
// my_sky parity — pre-save the form shows ALONE on the felt; the wheel
// only paints AFTER SAVE SKY (_activateSavedState). _lastChartData is
// captured above so SAVE has the chart payload + can reveal the wheel.
// Once saved, live edits re-draw in place (the wheel page stays live).
if (_skySaved()) {
if (svgEl.querySelector('*')) {
SkyWheel.redraw(data);
} else {
SkyWheel.draw(svgEl, data);
}
_ensureDelBtn();
}
_ensureDelBtn();
})
.catch(err => {
if (seq !== _fetchSeq) return;
@@ -361,6 +362,10 @@
});
}
function _skySaved() {
return document.body.classList.contains('sky-saved');
}
// ── Save ──────────────────────────────────────────────────────────────────
confirmBtn.addEventListener('click', () => {
@@ -389,10 +394,13 @@
return r.json();
})
.then(data => {
if (!data.confirmed) {
setStatus('Sky saved!');
}
// Confirmed state is driven by the room:sky_confirmed WS event
setStatus('Sky saved!');
// my_sky parity — reveal the wheel on the felt instead of reloading.
// The form shunts to page 2; the wheel slides in as page 1 and we ease
// to it. The gamer lingers on their saved wheel; the gear NVM returns
// to the hex (which the server re-renders with DRAW SEA — the save
// already set confirmed_at, so `sky_confirmed` is true server-side).
_activateSavedState();
})
.catch(err => {
setStatus(`Save failed: ${err.message}`, 'error');
@@ -400,16 +408,64 @@
});
});
// ── Sky confirmed → close sky & reload to land on hex w. DRAW SEA ──────
//
// The gamer should witness the table hex (now showing DRAW SEA in place of
// CAST SKY) before opting into the sea overlay. We reload the room page —
// the server-side template will re-render with `sky_confirmed=True` so the
// hex's btn flips automatically, and the user clicks DRAW SEA to continue.
// ── Reveal the saved wheel on the felt (no reload) ────────────────────────
// Adds body.sky-saved so _sky.scss flips the felt into scroll-snap (wheel
// page 1 via .sky-wheel-col order:-1, form page 2), draws the wheel from the
// captured chart, injects DEL, then pins to the form section + eases to the
// wheel so the reveal animates in (mirrors sky.html's _activateSavedState).
function _activateSavedState() {
if (!_lastChartData) return;
const wasSaved = document.body.classList.contains('sky-saved');
document.body.classList.add('sky-saved');
if (svgEl.querySelector('*')) {
SkyWheel.redraw(_lastChartData);
} else {
SkyWheel.draw(svgEl, _lastChartData);
}
_ensureDelBtn();
// The sky now lives in the burger fan: light its Sky sub-btn so it's a live
// reopen affordance immediately (server also renders it active after any
// reload). No-op if the burger isn't on this surface.
const skyBtn = document.getElementById('id_sky_btn');
if (skyBtn) skyBtn.classList.add('active');
if (!wasSaved) {
// First reveal: pin to the form section so the wheel slides in from above
// (the form "shunts down") rather than hard-cutting into place.
const formCol = overlay.querySelector('.sky-form-col');
if (formCol) overlay.scrollTop = formCol.offsetTop;
// Cue the burger thrice (--priTk) — "your sky lives here now". One-shot
// per save; the burger-btn.js load pulse covers the post-reload hex.
if (window.pulseSkyGlow) window.pulseSkyGlow();
}
_scrollApertureToTop();
}
// Ease the felt's scroll back to the wheel page (top) after a save —
// ease-out cubic, ~280ms. No-op if already at the top.
function _scrollApertureToTop() {
if (overlay.scrollTop === 0) return;
const start = overlay.scrollTop;
const startTime = performance.now();
const DURATION = 280;
const ease = (t) => { const u = 1 - t; return 1 - u * u * u; };
function step(now) {
const t = Math.min(1, (now - startTime) / DURATION);
overlay.scrollTop = Math.max(0, start * (1 - ease(t)));
if (t < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
// ── Sky confirmed (self-targeted WS) ──────────────────────────────────────
// The acting gamer's own SAVE .then() already revealed the wheel; the WS
// event just re-asserts the saved state (idempotent). No reload — the gamer
// lingers on the saved wheel; the gear NVM does the navigation back to the
// hex (now DRAW SEA). A second browser of the same seat with no captured
// chart no-ops here (rare) and reconciles on its next load.
function _onSkyConfirmed() {
closeSky();
window.location.reload();
_activateSavedState();
}
// ── DEL btn — JS-injected after the wheel paints; absent on a blank modal
@@ -456,6 +512,9 @@
_lastChartData = null;
confirmBtn.disabled = true;
setStatus('');
// Drop the saved state so the felt returns to form-alone (wheel page
// collapses, scroll-snap disengages) — the seat's Character was purged.
document.body.classList.remove('sky-saved');
try { localStorage.removeItem(LS_KEY); } catch (_) {}
if (_delBtn) {
_delBtn.remove();
@@ -472,10 +531,19 @@
return m ? m[1] : '';
}
// ── Restore persisted form data ────────────────────────────────────────────
// Called after all functions are defined. Wheel draw is deferred to
// openSky() so the animation plays when the modal opens, not silently
// in the background on page load.
// ── Reopen affordance ──────────────────────────────────────────────────────
// Exposed so the burger fan's #id_sky_btn (active once the sky is saved) can
// reopen the saved wheel. burger-btn.js calls window.openSkyFelt().
window.openSkyFelt = openSky;
// ── Restore persisted form data + prime a saved (confirmed) wheel ───────────
// Pre-save the wheel draw is deferred to openSky (form shows alone). Once the
// sky is confirmed the server hands us the saved chart (saved_sky_json) so the
// felt is primed in its saved state — body.sky-saved engages the scroll-snap
// and the wheel is drawn ready, so the burger reopen lands straight on it
// (mirrors My Sky's saved-on-load draw).
const _savedSky = {{ saved_sky_json|default:"null"|safe }};
// WS: server broadcasts sky_confirmed when any gamer confirms their sky.
// Only act when the event's seat_role matches this browser's seat.
@@ -487,5 +555,27 @@
});
_restoreForm();
if (_savedSky) {
_lastChartData = _savedSky;
document.body.classList.add('sky-saved');
confirmBtn.disabled = false;
_preloadReady.then(() => {
if (!svgEl.querySelector('*')) SkyWheel.draw(svgEl, _savedSky);
_ensureDelBtn();
});
}
// ── STUB: lock the form once character creation completes ───────────────────
// Character creation ends after DRAW SEA → the Voronoi map (roadmap step 21),
// which isn't built yet. When it lands the server will flag the finished state
// and the re-opened sky becomes READ-ONLY (view your wheel, can't re-cast). For
// now this is an inert hook — `_skyLocked` is always false until that phase
// exists. TODO: drive `_skyLocked` from a server ctx flag + lock the gear DEL.
const _skyLocked = false;
if (_skyLocked) {
form.querySelectorAll('input').forEach((el) => { el.disabled = true; });
confirmBtn.disabled = true;
}
})();
</script>