945d110171
Symmetry (user-spec): Sky Select leaves the burger sea btn lit while the sky felt is up; Sea Select now mirrors it — openSea disables ONLY id_text_btn, no longer id_sky_btn, so a revisited Sea Select keeps the completed sky one click away. An adversarial pass flagged that the two felts are equal-z (z-index:5) siblings and neither open path drops the other's open-class, so leaving the sky btn lit and clicking it from inside the sea felt would DOUBLE-OPEN (sea paints over sky → confusing no-op) — the same latent stack already reachable in the sky->sea direction on a both-complete reload. Fixed in BOTH directions: openSea now closes the sky felt first + openSky closes the sea felt first (each exposes its close on window: closeSeaFelt / closeSkyFelt), so clicking the other phase's lit btn performs a clean SWAP. The text-btn disable/restore chain stays correct across the swap (closeSky restores text, openSea re-disables + recaches it). Glow: the glow-handoff pulse ease-OUT now runs ~2.8s (was ~1.4s) — moved the cycle to 3.2s with the bright peak at 12.5%, keeping the ease-IN swell at ~0.4s (user asked for a longer linger). [[feedback-felt-aperture-fill-covers-felt]] [[feedback-inline-partial-script-defer-for-later-partial]] Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
692 lines
30 KiB
HTML
692 lines
30 KiB
HTML
{% load static %}
|
|
{# 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-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 %}{% if current_slot %}?seat={{ current_slot }}{% endif %}"
|
|
data-delete-url="{% url 'epic:sky_delete' room.id %}{% if current_slot %}?seat={{ current_slot }}{% endif %}"
|
|
data-sea-partial-url="{% url 'epic:sea_partial' room.id %}{% if current_slot %}?seat={{ current_slot }}{% endif %}"
|
|
data-user-seat-role="{{ user_seat_role }}">
|
|
|
|
<div class="sky-modal-body">
|
|
|
|
{# ── Form column ──────────────────────────────────────── #}
|
|
<div class="sky-form-col">
|
|
|
|
{# 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_date">Birth date</label>
|
|
<input id="id_nf_date" name="date" type="date" required>
|
|
</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>
|
|
|
|
<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 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>
|
|
|
|
</form>
|
|
|
|
<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>
|
|
|
|
</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>
|
|
|
|
</div>{# /.sky-modal-body #}
|
|
|
|
</div>{# /.sky-page--room #}
|
|
|
|
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
|
|
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
|
|
const overlay = document.getElementById('id_sky_overlay');
|
|
const form = document.getElementById('id_sky_form');
|
|
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');
|
|
const latInput = document.getElementById('id_nf_lat');
|
|
const lonInput = document.getElementById('id_nf_lon');
|
|
const tzInput = document.getElementById('id_nf_tz');
|
|
const suggestions = document.getElementById('id_nf_suggestions');
|
|
|
|
const PREVIEW_URL = overlay.dataset.previewUrl;
|
|
const SAVE_URL = overlay.dataset.saveUrl;
|
|
const DELETE_URL = overlay.dataset.deleteUrl;
|
|
const NOMINATIM = 'https://nominatim.openstreetmap.org/search';
|
|
const USER_AGENT = 'EarthmanRPG/1.0 (https://earthmanrpg.me)';
|
|
|
|
let _lastChartData = null;
|
|
let _placeDebounce = null;
|
|
let _chartDebounce = null;
|
|
// Bumped on every clear so an in-flight schedulePreview() resolving after
|
|
// DEL doesn't paint the wheel back & re-inject the DEL btn.
|
|
let _fetchSeq = 0;
|
|
const PLACE_DELAY = 400; // ms — Nominatim polite rate
|
|
const CHART_DELAY = 300; // ms — chart preview debounce
|
|
|
|
// 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.
|
|
const _preloadReady = SkyWheel.preload();
|
|
|
|
// ── localStorage persistence ──────────────────────────────────────────────
|
|
// Key scoped to room so multiple rooms don't clobber each other.
|
|
|
|
const LS_KEY = 'sky-form:' + SAVE_URL;
|
|
|
|
function _saveForm() {
|
|
const data = {
|
|
date: document.getElementById('id_nf_date').value,
|
|
time: document.getElementById('id_nf_time').value,
|
|
place: placeInput.value,
|
|
lat: latInput.value,
|
|
lon: lonInput.value,
|
|
tz: tzInput.value,
|
|
};
|
|
try { localStorage.setItem(LS_KEY, JSON.stringify(data)); } catch (_) {}
|
|
}
|
|
|
|
function _restoreForm() {
|
|
let data;
|
|
try { data = JSON.parse(localStorage.getItem(LS_KEY) || 'null'); } catch (_) {}
|
|
if (!data) return;
|
|
if (data.date) document.getElementById('id_nf_date').value = data.date;
|
|
if (data.time) document.getElementById('id_nf_time').value = data.time;
|
|
if (data.place) placeInput.value = data.place;
|
|
if (data.lat) latInput.value = data.lat;
|
|
if (data.lon) lonInput.value = data.lon;
|
|
if (data.tz) { tzInput.value = data.tz; }
|
|
}
|
|
|
|
// ── Open / Close ──────────────────────────────────────────────────────────
|
|
|
|
// While the felt is up the burger Text sub-btn must be inert: its swipe
|
|
// machine (room-views.js) would otherwise drive DOWN into the reelhouse — but
|
|
// the aperture is scroll-locked, so the page half-loads a carousel view it
|
|
// can't actually reach (confusing UX). We toggle #id_text_btn OFF on open and
|
|
// restore its server-set baseline on close.
|
|
let _textBtnWasActive = false;
|
|
function _disableTextBtn() {
|
|
const tb = document.getElementById('id_text_btn');
|
|
if (!tb) return;
|
|
_textBtnWasActive = tb.classList.contains('active');
|
|
tb.classList.remove('active');
|
|
}
|
|
function _restoreTextBtn() {
|
|
const tb = document.getElementById('id_text_btn');
|
|
if (tb && _textBtnWasActive) tb.classList.add('active');
|
|
}
|
|
|
|
function openSky() {
|
|
// Clean SWAP, not a double-open: if the sea felt is up (its lit sky btn was
|
|
// just clicked) close it first. Both felts are z-5 siblings that otherwise
|
|
// stack; neither open path drops the other's open-class on its own. Mirrored
|
|
// by openSea closing the sky felt (user-spec 2026-06-08).
|
|
if (document.documentElement.classList.contains('sea-open') && window.closeSeaFelt) {
|
|
window.closeSeaFelt();
|
|
}
|
|
document.documentElement.classList.add('sky-open');
|
|
_disableTextBtn();
|
|
// 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 SAVE re-enables (no draw
|
|
// until saved — my_sky parity).
|
|
if (!svgEl.querySelector('*') && _formReady()) {
|
|
schedulePreview();
|
|
}
|
|
}
|
|
|
|
function closeSky() {
|
|
document.documentElement.classList.remove('sky-open');
|
|
_restoreTextBtn();
|
|
hideSuggestions();
|
|
if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
|
|
}
|
|
|
|
const pickSkyBtn = document.getElementById('id_pick_sky_btn');
|
|
if (pickSkyBtn) pickSkyBtn.addEventListener('click', openSky);
|
|
if (cancelBtn) cancelBtn.addEventListener('click', closeSky);
|
|
|
|
// ── Status helper ─────────────────────────────────────────────────────────
|
|
|
|
function setStatus(msg, type) {
|
|
statusEl.textContent = msg;
|
|
statusEl.className = 'sky-status' + (type ? ` sky-status--${type}` : '');
|
|
}
|
|
|
|
// ── Nominatim place search ────────────────────────────────────────────────
|
|
|
|
placeInput.addEventListener('input', () => {
|
|
clearTimeout(_placeDebounce);
|
|
const q = placeInput.value.trim();
|
|
if (q.length < 3) { hideSuggestions(); return; }
|
|
_placeDebounce = setTimeout(() => fetchPlaces(q), PLACE_DELAY);
|
|
});
|
|
|
|
placeInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') hideSuggestions();
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!placeInput.contains(e.target) && !suggestions.contains(e.target)) {
|
|
hideSuggestions();
|
|
}
|
|
});
|
|
|
|
function fetchPlaces(query) {
|
|
fetch(`${NOMINATIM}?format=json&q=${encodeURIComponent(query)}&limit=6`, {
|
|
headers: { 'User-Agent': USER_AGENT },
|
|
})
|
|
.then(r => r.json())
|
|
.then(results => {
|
|
if (!results.length) { hideSuggestions(); return; }
|
|
renderSuggestions(results);
|
|
})
|
|
.catch(() => hideSuggestions());
|
|
}
|
|
|
|
function renderSuggestions(results) {
|
|
suggestions.innerHTML = '';
|
|
results.forEach(place => {
|
|
const item = document.createElement('button');
|
|
item.type = 'button';
|
|
item.className = 'sky-suggestion-item';
|
|
item.textContent = place.display_name;
|
|
item.addEventListener('click', () => selectPlace(place));
|
|
suggestions.appendChild(item);
|
|
});
|
|
suggestions.hidden = false;
|
|
}
|
|
|
|
function hideSuggestions() {
|
|
suggestions.hidden = true;
|
|
suggestions.innerHTML = '';
|
|
}
|
|
|
|
function selectPlace(place) {
|
|
placeInput.value = place.display_name;
|
|
latInput.value = parseFloat(place.lat).toFixed(4);
|
|
lonInput.value = parseFloat(place.lon).toFixed(4);
|
|
tzInput.value = '';
|
|
hideSuggestions();
|
|
_saveForm();
|
|
schedulePreview();
|
|
}
|
|
|
|
// ── Geolocation ───────────────────────────────────────────────────────────
|
|
|
|
geoBtn.addEventListener('click', () => {
|
|
if (!navigator.geolocation) {
|
|
setStatus('Geolocation not supported by this browser.', 'error');
|
|
return;
|
|
}
|
|
setStatus('Requesting device location…');
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => {
|
|
latInput.value = pos.coords.latitude.toFixed(4);
|
|
lonInput.value = pos.coords.longitude.toFixed(4);
|
|
tzInput.value = '';
|
|
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latInput.value}&lon=${lonInput.value}`, {
|
|
headers: { 'User-Agent': USER_AGENT },
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => { placeInput.value = _cityName(data.address) || data.display_name || ''; })
|
|
.catch(() => {})
|
|
.finally(() => _saveForm());
|
|
setStatus('');
|
|
schedulePreview();
|
|
},
|
|
() => setStatus('Location access denied.', 'error'),
|
|
);
|
|
});
|
|
|
|
// Build a "City, State, Country" string from a Nominatim address object.
|
|
// Prefers the most specific incorporated place name available.
|
|
function _cityName(addr) {
|
|
if (!addr) return '';
|
|
const city = addr.city || addr.town || addr.village || addr.hamlet || addr.municipality || '';
|
|
const region = addr.state || addr.county || addr.state_district || '';
|
|
const country = addr.country || '';
|
|
return [city, region, country].filter(Boolean).join(', ');
|
|
}
|
|
|
|
// ── Debounced chart preview ───────────────────────────────────────────────
|
|
|
|
// Trigger on date / time / tz changes (coords come via selectPlace / geolocation)
|
|
form.addEventListener('input', (e) => {
|
|
if (e.target === placeInput) return; // place triggers via selectPlace
|
|
_saveForm();
|
|
clearTimeout(_chartDebounce);
|
|
_chartDebounce = setTimeout(schedulePreview, CHART_DELAY);
|
|
});
|
|
|
|
function _formReady() {
|
|
return document.getElementById('id_nf_date').value &&
|
|
latInput.value && lonInput.value;
|
|
}
|
|
|
|
function schedulePreview() {
|
|
if (!_formReady()) return;
|
|
const date = document.getElementById('id_nf_date').value;
|
|
const time = document.getElementById('id_nf_time').value || '12:00';
|
|
const lat = latInput.value;
|
|
const lon = lonInput.value;
|
|
const tz = tzInput.value.trim(); // optional — proxy resolves if blank
|
|
|
|
const params = new URLSearchParams({ date, time, lat, lon });
|
|
if (tz) params.set('tz', tz);
|
|
|
|
setStatus('Calculating…');
|
|
confirmBtn.disabled = true;
|
|
|
|
const seq = ++_fetchSeq;
|
|
|
|
fetch(`${PREVIEW_URL}?${params}`, { credentials: 'same-origin' })
|
|
.then(r => {
|
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
|
return r.json();
|
|
})
|
|
.then(data => {
|
|
// Stale fetch — DEL ran (or another preview superseded). Bail before
|
|
// we paint the wheel & re-inject the DEL btn against cleared state.
|
|
if (seq !== _fetchSeq) return;
|
|
|
|
_lastChartData = data;
|
|
|
|
// Back-fill timezone field from proxy response (first render)
|
|
if (!tzInput.value && data.timezone) {
|
|
tzInput.value = data.timezone;
|
|
}
|
|
|
|
setStatus('');
|
|
confirmBtn.disabled = false;
|
|
// 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();
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if (seq !== _fetchSeq) return;
|
|
setStatus(`Could not fetch chart: ${err.message}`, 'error');
|
|
confirmBtn.disabled = true;
|
|
});
|
|
}
|
|
|
|
function _skySaved() {
|
|
return document.body.classList.contains('sky-saved');
|
|
}
|
|
|
|
// ── Save ──────────────────────────────────────────────────────────────────
|
|
|
|
confirmBtn.addEventListener('click', () => {
|
|
if (!_lastChartData) return;
|
|
confirmBtn.disabled = true;
|
|
setStatus('Saving…');
|
|
|
|
const payload = {
|
|
birth_dt: `${document.getElementById('id_nf_date').value}T${document.getElementById('id_nf_time').value || '12:00'}:00`,
|
|
birth_lat: parseFloat(latInput.value),
|
|
birth_lon: parseFloat(lonInput.value),
|
|
birth_place: placeInput.value,
|
|
house_system: _lastChartData.house_system || 'O',
|
|
chart_data: _lastChartData,
|
|
action: 'confirm',
|
|
};
|
|
|
|
fetch(SAVE_URL, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': _getCsrf() },
|
|
body: JSON.stringify(payload),
|
|
})
|
|
.then(r => {
|
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
|
return r.json();
|
|
})
|
|
.then(data => {
|
|
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');
|
|
confirmBtn.disabled = false;
|
|
});
|
|
});
|
|
|
|
// ── 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();
|
|
if (!wasSaved) {
|
|
// First reveal: pin to the form section so the wheel slides in from above
|
|
// (the form "shunts down"), then begin the post-save cascade. #id_sky_btn
|
|
// activation + the burger glow ride the cascade (not the save instant) so
|
|
// they land WITH the table-hex reveal — see _cascadeFeltOut.
|
|
const formCol = overlay.querySelector('.sky-form-col');
|
|
if (formCol) overlay.scrollTop = formCol.offsetTop;
|
|
_scrollApertureToTop();
|
|
_startSaveCascade();
|
|
} else {
|
|
// Re-assert (WS re-fire / reopen-from-saved): keep the reopen affordance
|
|
// live; no cascade (the table-hex already advanced on the first save).
|
|
const skyBtn = document.getElementById('id_sky_btn');
|
|
if (skyBtn) skyBtn.classList.add('active');
|
|
_scrollApertureToTop();
|
|
}
|
|
}
|
|
|
|
// ── Post-save cascade ───────────────────────────────────────────────────────
|
|
// After SAVE the gamer lingers on the freshly-drawn wheel ~3s; THEN the felt
|
|
// eases OUT to reveal the table-hex, the burger glow fires (your sky now lives
|
|
// in the burger fan), and 3s later the DRAW SEA btn eases IN — with the sea
|
|
// overlay injected so it's live with no reload. Each beat is its own timer.
|
|
const _CASCADE_LINGER = 3000, _FELT_FADE = 500, _SEA_DELAY = 3000;
|
|
|
|
function _startSaveCascade() {
|
|
setTimeout(_cascadeFeltOut, _CASCADE_LINGER);
|
|
}
|
|
|
|
function _cascadeFeltOut() {
|
|
overlay.classList.add('sky-page--cascade-out'); // CSS fades the felt out
|
|
setTimeout(() => {
|
|
document.documentElement.classList.remove('sky-open');
|
|
overlay.classList.remove('sky-page--cascade-out');
|
|
_restoreTextBtn();
|
|
if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
|
|
// CAST SKY is stale → ease it out; light the burger reopen affordance +
|
|
// fire the glow, all concurrent with the table-hex reveal.
|
|
const skyPhaseBtn = document.getElementById('id_pick_sky_btn');
|
|
if (skyPhaseBtn) skyPhaseBtn.classList.add('hex-phase-btn--out');
|
|
const skyBtn = document.getElementById('id_sky_btn');
|
|
if (skyBtn) skyBtn.classList.add('active');
|
|
if (window.pulseSkyGlow) window.pulseSkyGlow();
|
|
setTimeout(_cascadeDrawSeaIn, _SEA_DELAY);
|
|
}, _FELT_FADE);
|
|
}
|
|
|
|
function _cascadeDrawSeaIn() {
|
|
const seaPhaseBtn = document.getElementById('id_pick_sea_btn');
|
|
if (seaPhaseBtn) seaPhaseBtn.classList.remove('hex-phase-btn--out'); // eases in
|
|
_injectSeaOverlay();
|
|
}
|
|
|
|
// Fetch + inject the DRAW SEA overlay so it's live without a reload. The sea
|
|
// partial carries its own inline <script> (openSea binding on #id_pick_sea_btn
|
|
// + SeaDeal.reinit) — innerHTML won't execute it, so each <script> is re-
|
|
// created. Idempotent + best-effort (a gear NVM / refresh recovers via the
|
|
// server-rendered confirmed overlay).
|
|
function _injectSeaOverlay() {
|
|
const url = overlay.dataset.seaPartialUrl;
|
|
const container = document.getElementById('id_sea_inject');
|
|
if (!url || !container || container.dataset.injected) return;
|
|
fetch(url, { credentials: 'same-origin' })
|
|
.then((r) => { if (!r.ok) throw new Error(r.status); return r.text(); })
|
|
.then((html) => {
|
|
container.dataset.injected = '1';
|
|
const tpl = document.createElement('template');
|
|
tpl.innerHTML = html;
|
|
Array.prototype.slice.call(tpl.content.childNodes).forEach((node) => {
|
|
if (node.nodeName === 'SCRIPT') {
|
|
const s = document.createElement('script');
|
|
if (node.src) s.src = node.src;
|
|
else s.textContent = node.textContent;
|
|
container.appendChild(s);
|
|
} else {
|
|
container.appendChild(node);
|
|
}
|
|
});
|
|
})
|
|
.catch(() => { /* transient — server render recovers on next load */ });
|
|
}
|
|
|
|
// 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) ──────────────────────────────────────
|
|
// Two cases:
|
|
// • This browser captured the chart (the gamer saved via the felt) → the
|
|
// save .then() already ran the cascade; this WS re-fire is idempotent
|
|
// (re-asserts the saved state, no second cascade, no reload).
|
|
// • No captured chart (a direct POST confirm, or another browser of the same
|
|
// seat) → the cascade can't run, so reload to land on the server-rendered
|
|
// DRAW SEA hex (the pre-cascade behaviour, preserved for these paths).
|
|
function _onSkyConfirmed() {
|
|
if (_lastChartData) {
|
|
_activateSavedState();
|
|
} else {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
// ── DEL btn — JS-injected after the wheel paints; absent on a blank modal
|
|
// CAST SKY's wheel is a live preview; un-saved data lives only in LS_KEY.
|
|
// The btn is created lazily after the first SkyWheel.draw so a blank modal
|
|
// can never offer a DEL action against a non-existent wheel; clearing the
|
|
// SVG removes the btn from the DOM entirely (re-injected on next preview).
|
|
|
|
let _delBtn = null;
|
|
function _ensureDelBtn() {
|
|
if (_delBtn) return;
|
|
const wheelCol = document.querySelector('.sky-wheel-col');
|
|
if (!wheelCol) return;
|
|
_delBtn = document.createElement('button');
|
|
_delBtn.type = 'button';
|
|
_delBtn.id = 'id_sky_delete_btn';
|
|
_delBtn.className = 'btn btn-danger';
|
|
_delBtn.textContent = 'DEL';
|
|
wheelCol.appendChild(_delBtn);
|
|
_delBtn.addEventListener('click', () => {
|
|
if (!window.showGuard) return;
|
|
window.showGuard(_delBtn, 'Forget sky?', () => {
|
|
// 1. Invalidate any in-flight preview so its .then() can't paint the
|
|
// wheel back & re-inject this btn after we've cleared.
|
|
_fetchSeq++;
|
|
// 2. Cancel pending debounces so a typed-just-before-DEL keystroke
|
|
// can't fire schedulePreview after the clear.
|
|
clearTimeout(_chartDebounce);
|
|
clearTimeout(_placeDebounce);
|
|
// 3. Server purge — drops any Character (draft or confirmed) on this
|
|
// seat, so a refresh after SAVE-then-DEL doesn't rehydrate state
|
|
// from the durable Character row.
|
|
fetch(DELETE_URL, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'X-CSRFToken': _getCsrf() },
|
|
}).catch(() => {});
|
|
// 4. Client DOM/state reset.
|
|
while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
|
|
form.reset();
|
|
latInput.value = '';
|
|
lonInput.value = '';
|
|
tzInput.value = '';
|
|
_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();
|
|
_delBtn = null;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── CSRF ──────────────────────────────────────────────────────────────────
|
|
|
|
function _getCsrf() {
|
|
const m = document.cookie.match(/csrftoken=([^;]+)/);
|
|
return m ? m[1] : '';
|
|
}
|
|
|
|
// ── 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;
|
|
// Exposed so openSea can close the sky felt for a clean felt-swap when a user
|
|
// clicks the lit sky btn from inside the sea felt (user-spec 2026-06-08).
|
|
window.closeSkyFelt = closeSky;
|
|
|
|
// ── 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.
|
|
const MY_SEAT_ROLE = overlay.dataset.userSeatRole;
|
|
|
|
window.addEventListener('room:sky_confirmed', function (e) {
|
|
if (MY_SEAT_ROLE && e.detail.seat_role && e.detail.seat_role !== MY_SEAT_ROLE) return;
|
|
_onSkyConfirmed();
|
|
});
|
|
|
|
_restoreForm();
|
|
|
|
if (_savedSky) {
|
|
_lastChartData = _savedSky;
|
|
document.body.classList.add('sky-saved');
|
|
confirmBtn.disabled = false;
|
|
_preloadReady.then(() => {
|
|
if (!svgEl.querySelector('*')) SkyWheel.draw(svgEl, _savedSky);
|
|
_ensureDelBtn();
|
|
});
|
|
}
|
|
|
|
// Reload-into-open: the SIG_SELECT → SKY_SELECT transition (sig-select.js's
|
|
// CAST SKY click) drops a sessionStorage flag then reloads here, so the felt
|
|
// OPENS on arrival — one click yields the form instead of the old click→reload
|
|
// →click-again. Read once + clear so a later manual refresh doesn't re-open.
|
|
try {
|
|
if (sessionStorage.getItem('sky-autoopen') === '1') {
|
|
sessionStorage.removeItem('sky-autoopen');
|
|
openSky();
|
|
}
|
|
} catch (_) { /* sessionStorage unavailable — non-fatal */ }
|
|
|
|
// ── 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>
|