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

natus wheel: unified PRV/NXT cycle merging planets & angles; drop degree from classic element contribs; tt-planet-sym larger; tt-sign-type italic — TDD

Browse Source 
- _chartItems merges _planetItems + _angleItems sorted by degree desc;
  _stepCycle dispatches to _activatePlanet or _activateAngle via unified list
- T15g/h/i: angle↔planet boundary navigation & wrap; T9n/T9w updated for merged cycle
- classic element contrib rows: removed @ deg° (pdata/inDeg lookup dropped)
- .tt-planet-sym 1.2→1.8rem; .tt-house-of/.tt-house-type 0.6em→0.7rem;
  .tt-sign-type added alongside .tt-house-type selector, font-style: italic

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-26 18:42:47 -04:00
parent 5655342d9f
commit c78ecb61bf
4 changed files with 141 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/apps/gameboard/static/apps/gameboard/natus-wheel.js
View File

@@ -159,11 +159,12 @@ const NatusWheel = (() => {
let _activeRing = null; // 'planets' | 'elements' | 'signs' | 'houses' | 'angles' | null let _activeRing = null; // 'planets' | 'elements' | 'signs' | 'houses' | 'angles' | null
let _activeIdx = null; // index within the active ring's sorted list let _activeIdx = null; // index within the active ring's sorted list
let _planetItems = []; // [{name, degree}] sorted by ecliptic degree ascending let _planetItems = []; // [{name, degree}] sorted by ecliptic degree descending
let _elementItems = []; // [{key}] in ELEMENT_ORDER let _elementItems = []; // [{key}] in ELEMENT_ORDER
let _signItems = []; // [{name, symbol, element}] in SIGNS order let _signItems = []; // [{name, symbol, element}] in SIGNS order
let _houseItems = []; // [{num, label}] houses 1–12 let _houseItems = []; // [{num, label}] houses 1–12
let _angleItems = []; // [{name, label, house}] — ASC and MC let _angleItems = []; // [{name, deg}] — ASC and MC
let _chartItems = []; // [{type, name, deg}] planets+angles merged, degree desc
// Tooltip DOM refs — set by _injectTooltipControls() on each draw(). // Tooltip DOM refs — set by _injectTooltipControls() on each draw().
let _tooltipEl = null; let _tooltipEl = null;
@@ -321,6 +322,10 @@ const NatusWheel = (() => {
{ name: 'ASC', deg: data.houses.asc }, { name: 'ASC', deg: data.houses.asc },
{ name: 'MC', deg: data.houses.mc }, { name: 'MC', deg: data.houses.mc },
]; ];
_chartItems = [
..._planetItems.map(p => ({ type: 'planet', name: p.name, deg: p.degree })),
..._angleItems.map(a => ({ type: 'angle', name: a.name, deg: a.deg })),
].sort((a, b) => b.deg - a.deg);
} }
/** Clear all active-lock classes and reset cycle state. */ /** Clear all active-lock classes and reset cycle state. */
@@ -640,9 +645,7 @@ const NatusWheel = (() => {
if (contribs.length) { if (contribs.length) {
bodyHtml += '<div class="tt-el-contribs">'; bodyHtml += '<div class="tt-el-contribs">';
contribs.forEach(c => { contribs.forEach(c => {
const pdata = (_currentData.planets || {})[c.planet] || {}; bodyHtml += `<div class="tt-asp-row">${_pSym(c.planet)} <span class="tt-dim">in</span> ${_signIcon(c.sign)} +1</div>`;
const inDeg = pdata.degree !== undefined ? _inSignDeg(pdata.degree).toFixed(1) : '?';
bodyHtml += `<div class="tt-asp-row">${_pSym(c.planet)} @ ${inDeg}° ${_signIcon(c.sign)} +1</div>`;
}); });
bodyHtml += '</div>'; bodyHtml += '</div>';
} else { } else {
@@ -666,7 +669,7 @@ const NatusWheel = (() => {
}); });
} else { } else {
const psyms = st.planets.map(p => _pSym(p.planet)).join(' '); const psyms = st.planets.map(p => _pSym(p.planet)).join(' ');
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${_signIcon(st.sign)} : ${psyms}</div>`; bodyHtml += `<div class="tt-asp-row tt-el-planet-row"><span class="tt-dim">in</span> ${_signIcon(st.sign)} : ${psyms}</div>`;
} }
}); });
bodyHtml += '</div>'; bodyHtml += '</div>';
@@ -697,7 +700,7 @@ const NatusWheel = (() => {
pd.signs.forEach(sign => { pd.signs.forEach(sign => {
const planets = bySign[sign] || []; const planets = bySign[sign] || [];
const psyms = planets.map(p => _pSym(p.planet)).join(' '); const psyms = planets.map(p => _pSym(p.planet)).join(' ');
bodyHtml += `<div class="tt-asp-row tt-el-planet-row">${_signIcon(sign)} : ${psyms}</div>`; bodyHtml += `<div class="tt-asp-row tt-el-planet-row"><span class="tt-dim">in</span> ${_signIcon(sign)} : ${psyms}</div>`;
}); });
}); });
bodyHtml += '</div>'; bodyHtml += '</div>';
@@ -771,7 +774,7 @@ const NatusWheel = (() => {
`<span class="tt-sign-icon-wrap tt-sign-icon-wrap--${elKey}">${iconSvg}</span>` + `<span class="tt-sign-icon-wrap tt-sign-icon-wrap--${elKey}">${iconSvg}</span>` +
`</div>` + `</div>` +
`<div class="tt-sign-meta">` + `<div class="tt-sign-meta">` +
`<span>${modality} ${sign.element}</span>` + `<span class="tt-sign-type">${modality} ${sign.element}</span>` +
vecImg + vecImg +
`</div>` + `</div>` +
`<div class="tt-sign-section-header">Planets</div>` + `<div class="tt-sign-section-header">Planets</div>` +
@@ -831,9 +834,18 @@ const NatusWheel = (() => {
/** Advance the active ring by +1 (NXT) or -1 (PRV). */ /** Advance the active ring by +1 (NXT) or -1 (PRV). */
function _stepCycle(dir) { function _stepCycle(dir) {
if (_activeRing === 'planets') { if (_activeRing === 'planets' || _activeRing === 'angles') {
_activeIdx = (_activeIdx + dir + _planetItems.length) % _planetItems.length; const currentName = _activeRing === 'planets'
_activatePlanet(_activeIdx); ? _planetItems[_activeIdx].name
: _activeIdx; // angles use name string as _activeIdx
const pos = _chartItems.findIndex(c => c.name === currentName);
if (pos === -1) return;
const next = _chartItems[(pos + dir + _chartItems.length) % _chartItems.length];
if (next.type === 'planet') {
_activatePlanet(_planetItems.findIndex(p => p.name === next.name));
} else {
_activateAngle(next.name);
}
} else if (_activeRing === 'elements') { } else if (_activeRing === 'elements') {
_activeIdx = (_activeIdx + dir + _elementItems.length) % _elementItems.length; _activeIdx = (_activeIdx + dir + _elementItems.length) % _elementItems.length;
_activateElement(_activeIdx); _activateElement(_activeIdx);

66
src/static/tests/NatusWheelSpec.js
View File

@@ -232,8 +232,10 @@ describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
}); });
// ── T9n ── PRV cycles counterclockwise (to higher ecliptic degree) ──────── // ── T9n ── PRV cycles counterclockwise (to higher ecliptic degree) ────────
// CONJUNCTION_CHART merged sorted desc: ASC(180)→Mars(132)→MC(90)→Sun(66.7)→Venus(63.3)
// PRV from Sun (pos 3) → MC (pos 2, 90°) — angles and planets share the cycle.
it("T9n: clicking PRV from Sun shows Mars (previous planet counterclockwise = higher degree)", () => { it("T9n: clicking PRV from Sun shows MC (next higher ecliptic degree in merged cycle)", () => {
const sun = svgEl2.querySelector("[data-planet='Sun']"); const sun = svgEl2.querySelector("[data-planet='Sun']");
expect(sun).not.toBeNull("expected [data-planet='Sun']"); expect(sun).not.toBeNull("expected [data-planet='Sun']");
@@ -242,24 +244,25 @@ describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
const prvBtn = tooltipEl.querySelector(".nw-tt-prv"); const prvBtn = tooltipEl.querySelector(".nw-tt-prv");
prvBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); prvBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Mars"); expect(tooltipEl.textContent).toContain("Midheaven");
const mars = svgEl2.querySelector("[data-planet='Mars']"); const mc = svgEl2.querySelector("[data-angle='MC']");
expect(mars.classList.contains("nw-planet--active")).toBe(true); expect(mc.classList.contains("nw-angle--active")).toBe(true);
expect(sun.classList.contains("nw-planet--active")).toBe(false);
}); });
// ── T9w ── NXT wraps clockwise from the last (lowest-degree) planet ─────── // ── T9w ── NXT wraps clockwise from the lowest-degree item ───────────────
// Venus(63.3°) is lowest; NXT wraps to ASC(180°) — the highest-degree item.
it("T9w: cycling NXT from Venus (lowest degree) wraps clockwise to Mars (highest degree)", () => { it("T9w: cycling NXT from Venus (lowest degree) wraps clockwise to ASC (highest degree)", () => {
// Venus is idx 2 (lowest degree = furthest clockwise); NXT wraps to idx 0 = Mars
const venus = svgEl2.querySelector("[data-planet='Venus']"); const venus = svgEl2.querySelector("[data-planet='Venus']");
venus.dispatchEvent(new MouseEvent("click", { bubbles: true })); venus.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt"); const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt");
nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Mars"); expect(tooltipEl.textContent).toContain("Ascendant");
const mars = svgEl2.querySelector("[data-planet='Mars']"); const asc = svgEl2.querySelector("[data-angle='ASC']");
expect(mars.classList.contains("nw-planet--active")).toBe(true); expect(asc.classList.contains("nw-angle--active")).toBe(true);
}); });
}); });
@@ -952,4 +955,47 @@ describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML; const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
expect(bodyHtml).toContain("ASC"); expect(bodyHtml).toContain("ASC");
}); });
// T15g — NXT from a planet steps into an angle when angle is next by degree
// ANGLE_CHART sorted descending: Mars(188)→Moon(97)→MC(90)→Sun(8)→ASC(0)
// Moon is idx 1; NXT steps to MC (idx 2).
it("T15g: clicking NXT from Moon (97°) activates MC (90°, next clockwise)", () => {
const moonGroup = svgEl.querySelector("[data-planet='Moon']");
expect(moonGroup).not.toBeNull("expected [data-planet='Moon']");
moonGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt");
nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Midheaven");
const mcGroup = svgEl.querySelector("[data-angle='MC']");
expect(mcGroup.classList.contains("nw-angle--active")).toBe(true);
expect(moonGroup.classList.contains("nw-planet--active")).toBe(false);
});
// T15h — PRV from an angle steps back into a planet
it("T15h: clicking PRV from MC (90°) activates Moon (97°, previous counterclockwise)", () => {
const mcGroup = svgEl.querySelector("[data-angle='MC']");
mcGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const prvBtn = tooltipEl.querySelector(".nw-tt-prv");
prvBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const moonGroup = svgEl.querySelector("[data-planet='Moon']");
expect(moonGroup.classList.contains("nw-planet--active")).toBe(true);
expect(mcGroup.classList.contains("nw-angle--active")).toBe(false);
});
// T15i — NXT from ASC (lowest degree, 0°) wraps to Mars (highest degree, 188°)
it("T15i: NXT from ASC (0°, lowest) wraps clockwise to Mars (188°, highest)", () => {
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt");
nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Mars");
const marsGroup = svgEl.querySelector("[data-planet='Mars']");
expect(marsGroup.classList.contains("nw-planet--active")).toBe(true);
});
}); });

10
src/static_src/scss/_natus.scss
View File

@@ -535,7 +535,7 @@ body[class*="-light"] {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.tt-planet-sym { .tt-planet-sym {
font-size: 1.2rem; font-size: 1.8rem;
opacity: 0.85; opacity: 0.85;
} }
.tt-angle-sym { .tt-angle-sym {
@@ -608,7 +608,7 @@ body[class*="-light"] {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.tt-house-of { .tt-house-of {
font-size: 0.6em; font-size: 0.7rem;
font-weight: 700; font-weight: 700;
margin-right: 0.15em; margin-right: 0.15em;
opacity: 0.9; opacity: 0.9;
@@ -619,12 +619,14 @@ body[class*="-light"] {
opacity: 1; opacity: 1;
flex-shrink: 0; flex-shrink: 0;
} }
.tt-house-type { .tt-house-type,
.tt-sign-type {
display: block; display: block;
font-size: 0.6em; font-size: 0.7rem;
font-weight: 400; font-weight: 400;
opacity: 0.7; opacity: 0.7;
margin-top: 0.1em; margin-top: 0.1em;
font-style: italic;
} }
.tt-house-planets { .tt-house-planets {
display: flex; display: flex;

66
src/static_src/tests/NatusWheelSpec.js
View File

@@ -232,8 +232,10 @@ describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
}); });
// ── T9n ── PRV cycles counterclockwise (to higher ecliptic degree) ──────── // ── T9n ── PRV cycles counterclockwise (to higher ecliptic degree) ────────
// CONJUNCTION_CHART merged sorted desc: ASC(180)→Mars(132)→MC(90)→Sun(66.7)→Venus(63.3)
// PRV from Sun (pos 3) → MC (pos 2, 90°) — angles and planets share the cycle.
it("T9n: clicking PRV from Sun shows Mars (previous planet counterclockwise = higher degree)", () => { it("T9n: clicking PRV from Sun shows MC (next higher ecliptic degree in merged cycle)", () => {
const sun = svgEl2.querySelector("[data-planet='Sun']"); const sun = svgEl2.querySelector("[data-planet='Sun']");
expect(sun).not.toBeNull("expected [data-planet='Sun']"); expect(sun).not.toBeNull("expected [data-planet='Sun']");
@@ -242,24 +244,25 @@ describe("NatusWheel — tick lines, raise, and cycle navigation", () => {
const prvBtn = tooltipEl.querySelector(".nw-tt-prv"); const prvBtn = tooltipEl.querySelector(".nw-tt-prv");
prvBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); prvBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Mars"); expect(tooltipEl.textContent).toContain("Midheaven");
const mars = svgEl2.querySelector("[data-planet='Mars']"); const mc = svgEl2.querySelector("[data-angle='MC']");
expect(mars.classList.contains("nw-planet--active")).toBe(true); expect(mc.classList.contains("nw-angle--active")).toBe(true);
expect(sun.classList.contains("nw-planet--active")).toBe(false);
}); });
// ── T9w ── NXT wraps clockwise from the last (lowest-degree) planet ─────── // ── T9w ── NXT wraps clockwise from the lowest-degree item ───────────────
// Venus(63.3°) is lowest; NXT wraps to ASC(180°) — the highest-degree item.
it("T9w: cycling NXT from Venus (lowest degree) wraps clockwise to Mars (highest degree)", () => { it("T9w: cycling NXT from Venus (lowest degree) wraps clockwise to ASC (highest degree)", () => {
// Venus is idx 2 (lowest degree = furthest clockwise); NXT wraps to idx 0 = Mars
const venus = svgEl2.querySelector("[data-planet='Venus']"); const venus = svgEl2.querySelector("[data-planet='Venus']");
venus.dispatchEvent(new MouseEvent("click", { bubbles: true })); venus.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt"); const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt");
nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Mars"); expect(tooltipEl.textContent).toContain("Ascendant");
const mars = svgEl2.querySelector("[data-planet='Mars']"); const asc = svgEl2.querySelector("[data-angle='ASC']");
expect(mars.classList.contains("nw-planet--active")).toBe(true); expect(asc.classList.contains("nw-angle--active")).toBe(true);
}); });
}); });
@@ -952,4 +955,47 @@ describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML; const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
expect(bodyHtml).toContain("ASC"); expect(bodyHtml).toContain("ASC");
}); });
// T15g — NXT from a planet steps into an angle when angle is next by degree
// ANGLE_CHART sorted descending: Mars(188)→Moon(97)→MC(90)→Sun(8)→ASC(0)
// Moon is idx 1; NXT steps to MC (idx 2).
it("T15g: clicking NXT from Moon (97°) activates MC (90°, next clockwise)", () => {
const moonGroup = svgEl.querySelector("[data-planet='Moon']");
expect(moonGroup).not.toBeNull("expected [data-planet='Moon']");
moonGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt");
nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Midheaven");
const mcGroup = svgEl.querySelector("[data-angle='MC']");
expect(mcGroup.classList.contains("nw-angle--active")).toBe(true);
expect(moonGroup.classList.contains("nw-planet--active")).toBe(false);
});
// T15h — PRV from an angle steps back into a planet
it("T15h: clicking PRV from MC (90°) activates Moon (97°, previous counterclockwise)", () => {
const mcGroup = svgEl.querySelector("[data-angle='MC']");
mcGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const prvBtn = tooltipEl.querySelector(".nw-tt-prv");
prvBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const moonGroup = svgEl.querySelector("[data-planet='Moon']");
expect(moonGroup.classList.contains("nw-planet--active")).toBe(true);
expect(mcGroup.classList.contains("nw-angle--active")).toBe(false);
});
// T15i — NXT from ASC (lowest degree, 0°) wraps to Mars (highest degree, 188°)
it("T15i: NXT from ASC (0°, lowest) wraps clockwise to Mars (188°, highest)", () => {
const ascGroup = svgEl.querySelector("[data-angle='ASC']");
ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
const nxtBtn = tooltipEl.querySelector(".nw-tt-nxt");
nxtBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(tooltipEl.textContent).toContain("Mars");
const marsGroup = svgEl.querySelector("[data-planet='Mars']");
expect(marsGroup.classList.contains("nw-planet--active")).toBe(true);
});
}); });