PICK SKY overlay: D3 natal wheel, Character model, PySwiss aspects+tz
PySwiss: - calculate_aspects() in calc.py (conjunction/sextile/square/trine/opposition with orbs) - /api/tz/ endpoint (timezonefinder lat/lon → IANA timezone) - aspects included in /api/chart/ response - timezonefinder==8.2.2 added to requirements - 14 new unit tests (test_calc.py) + 12 new integration tests (TimezoneApiTest, aspect fields) Main app: - Sign, Planet, AspectType, HouseLabel reference models + seeded migrations (0032–0033) - Character model with birth_dt/lat/lon/place, house_system, chart_data, celtic_cross, confirmed_at/retired_at lifecycle (migration 0034) - natus_preview proxy view: calls PySwiss /api/chart/ + optional /api/tz/ auto-resolution, computes planet-in-house distinctions, returns enriched JSON - natus_save view: find-or-create draft Character, confirmed_at on action='confirm' - natus-wheel.js: D3 v7 SVG natal wheel (elements pie, signs, houses, planets, aspects, ASC/MC axes); NatusWheel.draw() / redraw() / clear() - _natus_overlay.html: Nominatim place autocomplete (debounced 400ms), geolocation button with reverse-geocode city name, live chart preview (debounced 300ms), tz auto-fill, NVM / SAVE SKY footer; html.natus-open class toggle pattern - _natus.scss: Gaussian backdrop+modal, two-column form|wheel layout, suggestion dropdown, portrait collapse at 600px, landscape sidebar z-index sink - room.html: include overlay when table_status == SKY_SELECT Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
340
src/templates/apps/gameboard/_partials/_natus_overlay.html
Normal file
340
src/templates/apps/gameboard/_partials/_natus_overlay.html
Normal file
@@ -0,0 +1,340 @@
|
||||
{% 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 #}
|
||||
{# 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="natus-modal">
|
||||
|
||||
<header class="natus-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">
|
||||
|
||||
{# ── Form column ──────────────────────────────────────── #}
|
||||
<div class="natus-form-col">
|
||||
<form id="id_natus_form" autocomplete="off">
|
||||
|
||||
<div class="natus-field">
|
||||
<label for="id_nf_date">Birth date</label>
|
||||
<input id="id_nf_date" name="date" type="date" required>
|
||||
</div>
|
||||
|
||||
<div class="natus-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">
|
||||
<label for="id_nf_place">Birth place</label>
|
||||
<div class="natus-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="natus-suggestions" hidden></div>
|
||||
</div>
|
||||
|
||||
<div class="natus-field natus-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="natus-field">
|
||||
<label for="id_nf_tz">Timezone</label>
|
||||
<input id="id_nf_tz" name="tz" type="text"
|
||||
placeholder="auto-detected from location">
|
||||
<small id="id_nf_tz_hint"></small>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div id="id_natus_status" class="natus-status"></div>
|
||||
</div>
|
||||
|
||||
{# ── Wheel column ─────────────────────────────────────── #}
|
||||
<div class="natus-wheel-col">
|
||||
<svg id="id_natus_svg" class="natus-svg"></svg>
|
||||
</div>
|
||||
|
||||
</div>{# /.natus-modal-body #}
|
||||
|
||||
<footer class="natus-modal-footer">
|
||||
<button type="button" id="id_natus_cancel" class="btn btn-cancel">NVM</button>
|
||||
<button type="button" id="id_natus_confirm" class="btn btn-primary" disabled>
|
||||
Save Sky
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</div>{# /.natus-modal #}
|
||||
</div>{# /.natus-overlay #}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
||||
<script src="{% static 'apps/gameboard/natus-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 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 tzHint = document.getElementById('id_nf_tz_hint');
|
||||
const suggestions = document.getElementById('id_nf_suggestions');
|
||||
|
||||
const PREVIEW_URL = overlay.dataset.previewUrl;
|
||||
const SAVE_URL = overlay.dataset.saveUrl;
|
||||
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;
|
||||
const PLACE_DELAY = 400; // ms — Nominatim polite rate
|
||||
const CHART_DELAY = 300; // ms — chart preview debounce
|
||||
|
||||
// ── Open / Close ──────────────────────────────────────────────────────────
|
||||
|
||||
function openNatus() {
|
||||
document.documentElement.classList.add('natus-open');
|
||||
}
|
||||
|
||||
function closeNatus() {
|
||||
document.documentElement.classList.remove('natus-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(); });
|
||||
|
||||
// ── Status helper ─────────────────────────────────────────────────────────
|
||||
|
||||
function setStatus(msg, type) {
|
||||
statusEl.textContent = msg;
|
||||
statusEl.className = 'natus-status' + (type ? ` natus-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 = 'natus-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);
|
||||
hideSuggestions();
|
||||
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);
|
||||
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(() => {});
|
||||
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
|
||||
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;
|
||||
|
||||
fetch(`${PREVIEW_URL}?${params}`, { credentials: 'same-origin' })
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
||||
return r.json();
|
||||
})
|
||||
.then(data => {
|
||||
_lastChartData = data;
|
||||
|
||||
// Back-fill timezone field from proxy response (first render)
|
||||
if (!tzInput.value && data.timezone) {
|
||||
tzInput.value = data.timezone;
|
||||
tzHint.textContent = 'Auto-detected from coordinates.';
|
||||
}
|
||||
|
||||
setStatus('');
|
||||
confirmBtn.disabled = false;
|
||||
if (svgEl.querySelector('*')) {
|
||||
NatusWheel.redraw(data);
|
||||
} else {
|
||||
NatusWheel.draw(svgEl, data);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
setStatus(`Could not fetch chart: ${err.message}`, 'error');
|
||||
confirmBtn.disabled = true;
|
||||
});
|
||||
}
|
||||
|
||||
// ── 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(() => {
|
||||
setStatus('Sky saved!');
|
||||
setTimeout(closeNatus, 1200);
|
||||
})
|
||||
.catch(err => {
|
||||
setStatus(`Save failed: ${err.message}`, 'error');
|
||||
confirmBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
// ── CSRF ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function _getCsrf() {
|
||||
const m = document.cookie.match(/csrftoken=([^;]+)/);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -67,6 +67,11 @@
|
||||
{% include "apps/gameboard/_partials/_sig_select_overlay.html" %}
|
||||
{% endif %}
|
||||
|
||||
{# Natus (Pick Sky) overlay — natal chart entry #}
|
||||
{% if room.table_status == "SKY_SELECT" %}
|
||||
{% include "apps/gameboard/_partials/_natus_overlay.html" %}
|
||||
{% endif %}
|
||||
|
||||
{% if room.gate_status != "RENEWAL_DUE" and room.table_status != "SIG_SELECT" %}
|
||||
{% include "apps/gameboard/_partials/_table_positions.html" %}
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user