rename natus → sky across the codebase — natal chart abstraction is now sky throughout, since chart inputs aren't birthday-gated
Some checks failed
ci/woodpecker/push/pyswiss Pipeline was successful
ci/woodpecker/push/main Pipeline failed

Mechanical rename: 5 files (sky-wheel.js, _sky.scss, _sky_overlay.html, SkyWheelSpec.js x2), 24 in-place edits across templates/views/urls/SCSS/JS/tests/CLAUDE.md. URL names epic:natus_save → epic:sky_save (epic namespaced, no clash w. dashboard:sky_save), JS module NatusWheel → SkyWheel, DOM ids id_natus_* → id_sky_*, BEM classes natus-* → sky-*, dashboard sky_natus_data/sky_natus_preview collapsed to sky_data/sky_preview_data. No DB migration needed (User.sky_chart_data + GameEvent.SKY_SAVED already used sky-prefix). 778 ITs + Jasmine green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-04 20:36:15 -04:00
parent 19b7828ea9
commit cc2a3f3526
29 changed files with 338 additions and 338 deletions

View File

@@ -10,22 +10,22 @@
{% if not request.user.sky_chart_data %}
<div id="id_applet_sky_form_wrap">
<form id="id_natus_form" autocomplete="off">
<form id="id_sky_form" autocomplete="off">
<div class="natus-field">
<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="natus-field">
<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="natus-field natus-place-field">
<div class="sky-field sky-place-field">
<label for="id_nf_place">Birth place</label>
<div class="natus-place-wrap">
<div class="sky-place-wrap">
<input id="id_nf_place" name="place" type="text"
placeholder="Start typing a city…"
autocomplete="off">
@@ -35,10 +35,10 @@
<i class="fa-solid fa-location-crosshairs"></i>
</button>
</div>
<div id="id_nf_suggestions" class="natus-suggestions" hidden></div>
<div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
</div>
<div class="natus-field natus-coords">
<div class="sky-field sky-coords">
<div>
<label>Latitude</label>
<input id="id_nf_lat" name="lat" type="text"
@@ -51,7 +51,7 @@
</div>
</div>
<div class="natus-field">
<div class="sky-field">
<label for="id_nf_tz">Timezone</label>
<input id="id_nf_tz" name="tz" type="text"
placeholder="auto-detected from location">
@@ -60,15 +60,15 @@
</form>
<div id="id_natus_status" class="natus-status"></div>
<div id="id_sky_status" class="sky-status"></div>
<button type="button" id="id_natus_confirm" class="btn btn-primary" disabled>
<button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
Save Sky
</button>
</div>
{% endif %}
<svg id="id_my_sky_svg" class="natus-svg"
<svg id="id_my_sky_svg" class="sky-svg"
{% if not request.user.sky_chart_data %}style="display:none;"{% endif %}></svg>
{% if request.user.sky_chart_data %}
{{ request.user.sky_chart_data|json_script:"id_my_sky_data" }}
@@ -76,7 +76,7 @@
</section>
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/natus-wheel.js' %}"></script>
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
<script>
(function () {
'use strict';
@@ -87,24 +87,24 @@
{% if request.user.sky_chart_data %}
// Sky already saved — fetch fresh enriched data from server then draw.
fetch('{% url "sky_natus_data" %}')
fetch('{% url "sky_data" %}')
.then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
.then(function (data) {
NatusWheel.preload().then(function () { NatusWheel.draw(svgEl, data); });
SkyWheel.preload().then(function () { SkyWheel.draw(svgEl, data); });
})
.catch(function () {
// Fallback: draw from inline stale data if endpoint fails.
var stale = JSON.parse(document.getElementById('id_my_sky_data').textContent);
NatusWheel.preload().then(function () { NatusWheel.draw(svgEl, stale); });
SkyWheel.preload().then(function () { SkyWheel.draw(svgEl, stale); });
});
{% else %}
// No sky saved yet — wire up the entry form.
const formWrap = document.getElementById('id_applet_sky_form_wrap');
const form = document.getElementById('id_natus_form');
const statusEl = document.getElementById('id_natus_status');
const confirmBtn = document.getElementById('id_natus_confirm');
const form = document.getElementById('id_sky_form');
const statusEl = document.getElementById('id_sky_status');
const confirmBtn = document.getElementById('id_sky_confirm');
const geoBtn = document.getElementById('id_nf_geolocate');
const placeInput = document.getElementById('id_nf_place');
const latInput = document.getElementById('id_nf_lat');
@@ -117,7 +117,7 @@
const SAVE_URL = section.dataset.saveUrl;
const NOMINATIM = 'https://nominatim.openstreetmap.org/search';
const USER_AGENT = 'EarthmanRPG/1.0 (https://earthmanrpg.me)';
const LS_KEY = 'natus-form:dashboard:sky';
const LS_KEY = 'sky-form:dashboard:sky';
let _lastChartData = null;
let _placeDebounce = null;
@@ -125,7 +125,7 @@
const PLACE_DELAY = 400;
const CHART_DELAY = 300;
NatusWheel.preload();
SkyWheel.preload();
// ── localStorage persistence ──────────────────────────────────────────────
@@ -158,7 +158,7 @@
function setStatus(msg, type) {
statusEl.textContent = msg;
statusEl.className = 'natus-status' + (type ? ` natus-status--${type}` : '');
statusEl.className = 'sky-status' + (type ? ` sky-status--${type}` : '');
}
// ── Nominatim place search ────────────────────────────────────────────────
@@ -197,7 +197,7 @@
results.forEach(place => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'natus-suggestion-item';
item.className = 'sky-suggestion-item';
item.textContent = place.display_name;
item.addEventListener('click', () => selectPlace(place));
suggestions.appendChild(item);
@@ -331,7 +331,7 @@
.then(data => {
formWrap.style.display = 'none';
svgEl.style.display = '';
NatusWheel.preload().then(() => NatusWheel.draw(svgEl, _lastChartData));
SkyWheel.preload().then(() => SkyWheel.draw(svgEl, _lastChartData));
Note.handleSaveResponse(data);
})
.catch(err => {

View File

@@ -21,7 +21,7 @@
{% include "apps/applets/_partials/_gear.html" with menu_id="id_dash_applet_menu" %}
</div>
<div id="id_tooltip_portal" class="token-tooltip" style="display:none;"></div>
<div id="id_natus_tooltip" class="tt" style="display:none;"></div>
<div id="id_natus_tooltip_2" class="tt" 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>
{% endif %}
{% endblock content %}

View File

@@ -6,33 +6,33 @@
{% block content %}
<div class="sky-page"
id="id_natus_overlay"
id="id_sky_overlay"
data-preview-url="{% url 'sky_preview' %}"
data-save-url="{% url 'sky_save' %}">
<div class="natus-modal-body sky-body">
<div class="sky-modal-body sky-body">
{# ── Form column ─────────────────────────────────────────────────── #}
<div class="natus-form-col">
<div class="natus-form-main">
<form id="id_natus_form" autocomplete="off">
<div class="sky-form-col">
<div class="sky-form-main">
<form id="id_sky_form" autocomplete="off">
<div class="natus-field">
<div class="sky-field">
<label for="id_nf_date">Birth date</label>
<input id="id_nf_date" name="date" type="date" required
{% if saved_birth_date %}value="{{ saved_birth_date }}"{% endif %}>
</div>
<div class="natus-field">
<div class="sky-field">
<label for="id_nf_time">Birth time</label>
<input id="id_nf_time" name="time" type="time"
value="{{ saved_birth_time|default:'12:00' }}">
<small>Local time at birth place. Use 12:00 if unknown.</small>
</div>
<div class="natus-field natus-place-field">
<div class="sky-field sky-place-field">
<label for="id_nf_place">Birth place</label>
<div class="natus-place-wrap">
<div class="sky-place-wrap">
<input id="id_nf_place" name="place" type="text"
placeholder="Start typing a city…"
autocomplete="off"
@@ -43,10 +43,10 @@
<i class="fa-solid fa-location-crosshairs"></i>
</button>
</div>
<div id="id_nf_suggestions" class="natus-suggestions" hidden></div>
<div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
</div>
<div class="natus-field natus-coords">
<div class="sky-field sky-coords">
<div>
<label>Latitude</label>
<input id="id_nf_lat" name="lat" type="text"
@@ -61,7 +61,7 @@
</div>
</div>
<div class="natus-field">
<div class="sky-field">
<label for="id_nf_tz">Timezone</label>
<input id="id_nf_tz" name="tz" type="text"
placeholder="auto-detected from location"
@@ -71,38 +71,38 @@
</form>
<div id="id_natus_status" class="natus-status"></div>
</div>{# /.natus-form-main #}
<div id="id_sky_status" class="sky-status"></div>
</div>{# /.sky-form-main #}
<button type="button" id="id_natus_confirm" class="btn btn-primary" disabled>
<button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
Save Sky
</button>
</div>
{# ── Wheel column ────────────────────────────────────────────────── #}
<div class="natus-wheel-col">
<svg id="id_natus_svg" class="natus-svg"></svg>
<div class="sky-wheel-col">
<svg id="id_sky_svg" class="sky-svg"></svg>
</div>
</div>{# /.natus-modal-body #}
</div>{# /.sky-modal-body #}
</div>{# /.sky-page #}
{# Planet hover tooltip — position:fixed escapes any overflow:hidden ancestor #}
<div id="id_natus_tooltip" class="tt" style="display:none;"></div>
<div id="id_natus_tooltip_2" class="tt" 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>
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/natus-wheel.js' %}"></script>
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
<script src="{% static 'apps/dashboard/note.js' %}"></script>
<script>
(function () {
'use strict';
const overlay = document.getElementById('id_natus_overlay');
const form = document.getElementById('id_natus_form');
const svgEl = document.getElementById('id_natus_svg');
const statusEl = document.getElementById('id_natus_status');
const confirmBtn = document.getElementById('id_natus_confirm');
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');
const geoBtn = document.getElementById('id_nf_geolocate');
const placeInput = document.getElementById('id_nf_place');
const latInput = document.getElementById('id_nf_lat');
@@ -122,13 +122,13 @@
const PLACE_DELAY = 400;
const CHART_DELAY = 300;
const _preloadReady = NatusWheel.preload();
const _preloadReady = SkyWheel.preload();
// ── Status helper ───────────────────────────────────────────────────────
function setStatus(msg, type) {
statusEl.textContent = msg;
statusEl.className = 'natus-status' + (type ? ` natus-status--${type}` : '');
statusEl.className = 'sky-status' + (type ? ` sky-status--${type}` : '');
}
// ── Nominatim place search ──────────────────────────────────────────────
@@ -167,7 +167,7 @@
results.forEach(place => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'natus-suggestion-item';
item.className = 'sky-suggestion-item';
item.textContent = place.display_name;
item.addEventListener('click', () => selectPlace(place));
suggestions.appendChild(item);
@@ -262,9 +262,9 @@
setStatus('');
confirmBtn.disabled = false;
if (svgEl.querySelector('*')) {
NatusWheel.redraw(data);
SkyWheel.redraw(data);
} else {
NatusWheel.draw(svgEl, data);
SkyWheel.draw(svgEl, data);
}
})
.catch(err => {
@@ -321,7 +321,7 @@
if (_savedSky) {
_lastChartData = _savedSky;
confirmBtn.disabled = false;
NatusWheel.draw(svgEl, _savedSky);
SkyWheel.draw(svgEl, _savedSky);
} else if (_formReady()) {
schedulePreview();
}

View File

@@ -1,48 +1,48 @@
{% load static %}
{# PICK 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.natus-open controls #}
{# Opens when user clicks #id_pick_sky_btn; html.sky-open controls #}
{# visibility via CSS — backdrop-filter blur + centred modal. #}
<div class="natus-backdrop"></div>
<div class="natus-overlay"
id="id_natus_overlay"
data-preview-url="{% url 'epic:natus_preview' room.id %}"
data-save-url="{% url 'epic:natus_save' room.id %}"
<div class="sky-backdrop"></div>
<div class="sky-overlay"
id="id_sky_overlay"
data-preview-url="{% url 'epic:sky_preview' room.id %}"
data-save-url="{% url 'epic:sky_save' room.id %}"
data-sea-partial-url="{% url 'epic:sea_partial' room.id %}"
data-user-seat-role="{{ user_seat_role }}">
<div class="natus-modal-wrap">
<div class="natus-modal">
<div class="sky-modal-wrap">
<div class="sky-modal">
<header class="natus-modal-header">
<header class="sky-modal-header">
<h2>PICK <span>SKY</span></h2>
<p>Enter your birth details to generate your natal chart.</p>
</header>
<div class="natus-modal-body">
<div class="sky-modal-body">
{# ── Form column ──────────────────────────────────────── #}
<div class="natus-form-col">
<div class="sky-form-col">
{# form-main scrolls independently; confirm btn stays pinned below it #}
<div class="natus-form-main">
<form id="id_natus_form" autocomplete="off">
<div class="sky-form-main">
<form id="id_sky_form" autocomplete="off">
<div class="natus-field">
<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="natus-field">
<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="natus-field natus-place-field">
<div class="sky-field sky-place-field">
<label for="id_nf_place">Birth place</label>
<div class="natus-place-wrap">
<div class="sky-place-wrap">
<input id="id_nf_place" name="place" type="text"
placeholder="Start typing a city…"
autocomplete="off">
@@ -52,10 +52,10 @@
<i class="fa-solid fa-location-crosshairs"></i>
</button>
</div>
<div id="id_nf_suggestions" class="natus-suggestions" hidden></div>
<div id="id_nf_suggestions" class="sky-suggestions" hidden></div>
</div>
<div class="natus-field natus-coords">
<div class="sky-field sky-coords">
<div>
<label>Latitude</label>
<input id="id_nf_lat" name="lat" type="text"
@@ -68,7 +68,7 @@
</div>
</div>
<div class="natus-field">
<div class="sky-field">
<label for="id_nf_tz">Timezone</label>
<input id="id_nf_tz" name="tz" type="text"
placeholder="auto-detected from location">
@@ -77,42 +77,42 @@
</form>
<div id="id_natus_status" class="natus-status"></div>
</div>{# /.natus-form-main #}
<div id="id_sky_status" class="sky-status"></div>
</div>{# /.sky-form-main #}
<button type="button" id="id_natus_confirm" class="btn btn-primary" disabled>
<button type="button" id="id_sky_confirm" class="btn btn-primary" disabled>
Save Sky
</button>
</div>
{# ── Wheel column ─────────────────────────────────────── #}
<div class="natus-wheel-col">
<svg id="id_natus_svg" class="natus-svg"></svg>
<div class="sky-wheel-col">
<svg id="id_sky_svg" class="sky-svg"></svg>
</div>
</div>{# /.natus-modal-body #}
</div>{# /.sky-modal-body #}
</div>{# /.natus-modal #}
</div>{# /.sky-modal #}
{# NVM: circle btn centered on the top-right corner of the modal #}
<button type="button" id="id_natus_cancel" class="btn btn-cancel btn-sm">NVM</button>
<button type="button" id="id_sky_cancel" class="btn btn-cancel btn-sm">NVM</button>
</div>{# /.natus-modal-wrap #}
</div>{# /.natus-overlay #}
</div>{# /.sky-modal-wrap #}
</div>{# /.sky-overlay #}
<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
<script src="{% static 'apps/gameboard/natus-wheel.js' %}"></script>
<script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>
<script>
(function () {
'use strict';
const overlay = document.getElementById('id_natus_overlay');
const form = document.getElementById('id_natus_form');
const svgEl = document.getElementById('id_natus_svg');
const statusEl = document.getElementById('id_natus_status');
const confirmBtn = document.getElementById('id_natus_confirm');
const cancelBtn = document.getElementById('id_natus_cancel');
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');
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');
@@ -134,12 +134,12 @@
// 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.
NatusWheel.preload();
SkyWheel.preload();
// ── localStorage persistence ──────────────────────────────────────────────
// Key scoped to room so multiple rooms don't clobber each other.
const LS_KEY = 'natus-form:' + SAVE_URL;
const LS_KEY = 'sky-form:' + SAVE_URL;
function _saveForm() {
const data = {
@@ -167,8 +167,8 @@
// ── Open / Close ──────────────────────────────────────────────────────────
function openNatus() {
document.documentElement.classList.add('natus-open');
function openSky() {
document.documentElement.classList.add('sky-open');
// If the wheel is empty but the form has enough data (restored from
// localStorage), kick off a fresh preview so the animation plays.
if (!svgEl.querySelector('*') && _formReady()) {
@@ -176,21 +176,21 @@
}
}
function closeNatus() {
document.documentElement.classList.remove('natus-open');
function closeSky() {
document.documentElement.classList.remove('sky-open');
hideSuggestions();
}
const pickSkyBtn = document.getElementById('id_pick_sky_btn');
if (pickSkyBtn) pickSkyBtn.addEventListener('click', openNatus);
cancelBtn.addEventListener('click', closeNatus);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNatus(); });
if (pickSkyBtn) pickSkyBtn.addEventListener('click', openSky);
cancelBtn.addEventListener('click', closeSky);
overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSky(); });
// ── Status helper ─────────────────────────────────────────────────────────
function setStatus(msg, type) {
statusEl.textContent = msg;
statusEl.className = 'natus-status' + (type ? ` natus-status--${type}` : '');
statusEl.className = 'sky-status' + (type ? ` sky-status--${type}` : '');
}
// ── Nominatim place search ────────────────────────────────────────────────
@@ -229,7 +229,7 @@
results.forEach(place => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'natus-suggestion-item';
item.className = 'sky-suggestion-item';
item.textContent = place.display_name;
item.addEventListener('click', () => selectPlace(place));
suggestions.appendChild(item);
@@ -333,9 +333,9 @@
setStatus('');
confirmBtn.disabled = false;
if (svgEl.querySelector('*')) {
NatusWheel.redraw(data);
SkyWheel.redraw(data);
} else {
NatusWheel.draw(svgEl, data);
SkyWheel.draw(svgEl, data);
}
})
.catch(err => {
@@ -383,7 +383,7 @@
});
});
// ── Sky confirmed → close natus & reload to land on hex w. PICK SEA ──────
// ── Sky confirmed → close sky & reload to land on hex w. PICK SEA ──────
//
// The gamer should witness the table hex (now showing PICK SEA in place of
// PICK SKY) before opting into the sea overlay. We reload the room page —
@@ -391,7 +391,7 @@
// hex's btn flips automatically, and the user clicks PICK SEA to continue.
function _onSkyConfirmed() {
closeNatus();
closeSky();
window.location.reload();
}
@@ -404,7 +404,7 @@
// ── Restore persisted form data ────────────────────────────────────────────
// Called after all functions are defined. Wheel draw is deferred to
// openNatus() so the animation plays when the modal opens, not silently
// openSky() so the animation plays when the modal opens, not silently
// in the background on page load.
// WS: server broadcasts sky_confirmed when any gamer confirms their sky.

View File

@@ -72,14 +72,14 @@
{% include "apps/gameboard/_partials/_sig_select_overlay.html" %}
{% endif %}
{# Natus (Pick Sky) overlay — natal chart entry #}
{# Sky (Pick Sky) overlay — natal chart entry #}
{% if room.table_status == "SKY_SELECT" and not sky_confirmed %}
{% include "apps/gameboard/_partials/_natus_overlay.html" %}
{% include "apps/gameboard/_partials/_sky_overlay.html" %}
{% endif %}
{# Natus tooltip: sibling of .natus-overlay, not inside .natus-modal-wrap (which has transform) #}
{# Sky tooltip: sibling of .sky-overlay, not inside .sky-modal-wrap (which has transform) #}
{% if room.table_status == "SKY_SELECT" and not sky_confirmed %}
<div id="id_natus_tooltip" class="tt" style="display:none;"></div>
<div id="id_natus_tooltip_2" class="tt" 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>
{% endif %}
{# Sea (Pick Sea) overlay — Celtic Cross spread entry #}