`
: nothing
}
${this.renderMap(lines, bd)}
${this.renderLegend(lines)}
${
// The map and its key are the deliverable here; the summary is prose
// about what the map shows.
data.summary && !this.hideReadings
? html`
`;
}
private renderMap(
lines: LineSet[],
bd: AstrocartographyResponse['birthDetails'],
) {
return html``;
}
private renderGraticule() {
const meridians = [];
for (let lon = -150; lon <= 150; lon += 30) {
const x = lonToX(lon);
const axis = lon === 0;
meridians.push(
svg``,
);
meridians.push(
svg`${formatLon(lon)}`,
);
}
const parallels = [];
for (let lat = -60; lat <= 60; lat += 30) {
const y = latToY(lat);
const axis = lat === 0;
parallels.push(
svg``,
);
parallels.push(
svg`${formatLat(lat)}`,
);
}
// Tropics and polar circles as dashed climate-band references.
const refs = [TROPIC, -TROPIC, POLAR, -POLAR].map(
(lat) =>
svg``,
);
return svg`${meridians}${parallels}${refs}`;
}
private renderBodyLines(line: LineSet, index: number) {
const color = planetColor(line.planet, index);
// Response symbol first, then the shared table, then the full name. Never a
// truncation: `North Node.slice(0, 2)` labelled a whole map line "No".
const glyph = line.symbol || planetGlyph(line.planet) || line.planet;
const items = [
this.renderMeridian(
line.mc.longitude,
color,
glyph,
line.planet,
'mc',
false,
),
this.renderMeridian(
line.ic.longitude,
color,
glyph,
line.planet,
'ic',
true,
),
this.renderCurve(
line.ascendant.points,
color,
glyph,
line.planet,
'ascendant',
false,
),
this.renderCurve(
line.descendant.points,
color,
glyph,
line.planet,
'descendant',
true,
),
];
return svg`${items}`;
}
private renderMeridian(
lon: number,
color: string,
glyph: string,
planet: string,
angle: string,
dashed: boolean,
) {
const x = lonToX(lon);
// MC label rides the top edge, IC the bottom, so the two meridians of one
// body never stack their glyphs at the same point.
const labelY = angle === 'ic' ? H - 7 : 9;
return svg`${this.t('{{planet}} {{angle}} line', { planet, angle: this.t(ANGLE_LABEL[angle] ?? 'MC') })}${glyph}`;
}
private renderCurve(
points: GeoPoint[],
color: string,
glyph: string,
planet: string,
angle: string,
dashed: boolean,
) {
const segments = toSegments(points ?? []);
if (segments.length === 0) return nothing;
// Label at the sample nearest the equator, the most visible band.
const anchor = (points ?? []).reduce(
(best, p) => (Math.abs(p.latitude) < Math.abs(best.latitude) ? p : best),
points[0] ?? { latitude: 0, longitude: 0 },
);
return svg`
${segments.map(
(pts) =>
svg`${this.t('{{planet}} {{angle}} line', { planet, angle: this.t(ANGLE_LABEL[angle] ?? 'MC') })}`,
)}
${glyph}`;
}
private renderLegend(lines: LineSet[]) {
if (lines.length === 0) return nothing;
return html`
${lines.map((l, i) => {
const color = planetColor(l.planet, i);
return html`
${l.symbol ? html`${l.symbol} ` : nothing}${l.planet}
`;
})}
${this.t('Solid lines are the Ascendant and Midheaven, dashed are the Descendant and IC.')}
`;
}
/**
* The written read of each planetary line. Prose end to end, and the lines it
* describes are already drawn and keyed on the map above, so `hide-readings`
* takes the section whole.
*/
private renderInterpretations(lines: LineSet[]) {
if (lines.length === 0 || this.hideReadings) return nothing;
return html`