avalon-vanguard/star-map
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Route between stars, through the crossings a chosen range allows

Browse Source 
The map could say where a star is and what is near it, and nothing about
getting from one to another. This adds the question and the answer: pick a
departure and a destination, choose how far a single crossing may be, and get
the chain — how many jumps, how far in total, and every star on the way, each
one a step you can fly to.

A jump link is not a feature of space. There are no corridors out there; a
link is a question asked of the catalogue, which is why the range is the
user's control rather than a constant. Two facts about that catalogue decide
what the answers look like, and both are stated in the code because they read
as defects otherwise. It is magnitude-limited, so it is dense around the Sun
and thins with distance — within 50 pc a 3 pc range links 99% of it into one
piece, while over the whole 250 pc reach the same range leaves most stars
alone. And a gap in it is a gap in what has been catalogued, not in what is
there.

That is why "no route" is not the end of the answer. Where no chain exists at
the range asked for, the panel says which range would open one — the chain
whose longest hop is as short as possible, found by the same search with the
cost of arriving somewhere being the worst hop taken rather than the sum — and
offers that number as a control to accept.

Departure defaults to wherever the view already is, so one field is usually
enough. Sol to Vega at 3 pc: four jumps, 10 pc, by way of Barnard's Star,
Struve 2398 B and HD 155876. Narrow it to 0.8 pc and it says 2.26 would reach.

The graph is drawn as one buffer of line segments and the route as a second,
brighter one over it, with the graph stepping back while a route is up: near
the Sun the links are a haze, and a thread through a bright cloud is not a
thread. Both fade out with the local layer, since from outside the Galaxy the
graph is a smear.

Two measurements shaped this. Asking the index for each star's neighbours in
turn — sixty-eight thousand sorted lists, thrown away — took eight seconds; the
grid now walks its own cells once and pairs them, which takes a quarter of one.
And the range control emits per pixel dragged, so the rebuild waits for the
hand to settle.

Three defects fixed on the way, all older than the routing:

hud-acquire animated with fill-mode `both`, which leaves its closing keyframe
applied for good — and that keyframe carries a clip-path. Every panel wearing
it has been clipping its own box ever since, so anything that had to escape
one was cut away and could not even be clicked. Nothing had needed to escape
until this panel's dropdown opened upward.

The routing fields returned nothing when typed into before the catalogue
finished loading, and stayed nothing until the next keystroke. The options are
derived from the query and the index together now, so they appear when the
second of the two arrives, whichever that is.

And a link was `3-7` walking one way and `7-3` walking the other, which is two
links to anything comparing them.

Verified: build clean, 571/571 unit, 9/9 end-to-end including two new specs —
one plotting Sol to Sirius, one narrowing the range until there is no route and
accepting the one it names — design detector clean, screenshots at 1440x900
and 390x844.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jxMkwA2rbicdGxHosecYi
This commit is contained in:
Senrokai
2026-08-20 18:39:22 +02:00
co-authored by Claude Fable 5
parent a6b30e84f0
commit 68a919bd84
10 changed files with 1005 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/hud/hud-dock.component.spec.ts
+5 -1
View File
@@ -67,6 +67,10 @@ describe('HudDockComponent', () => {
fixture.componentRef.setInput('display', DEFAULT_HUD_DISPLAY);
fixture.detectChanges();
expect(tabNames()).toEqual(['Search', 'Readout', 'Display']);
fixture.componentRef.setInput('routing', true);
fixture.detectChanges();
expect(tabNames()).toEqual(['Search', 'Readout', 'Routes', 'Display']);
});
it('opens the default tab on mount and renders the readout from its inputs', () => {
@@ -134,7 +138,7 @@ describe('HudDockComponent', () => {
fixture.componentRef.setInput('defaultTab', 'display');
fixture.detectChanges();
const pressed = [...host().querySelectorAll('[aria-pressed]')].map((b) => `${b.textContent?.trim()}=${b.getAttribute('aria-pressed')}`);
expect(pressed).toEqual(['Labels=true', 'Orbits=true', 'Grid=false', 'Deep sky=true', 'Sky=true', 'Systems=true']);
expect(pressed).toEqual(['Labels=true', 'Orbits=true', 'Grid=false', 'Deep sky=true', 'Sky=true', 'Systems=true', 'Jump links=false']);
});
it('opens the search on "/" from anywhere but a text field', () => {
src/app/features/hud/hud-dock.component.ts
+38 -5
View File
@@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, computed, ElementRef, HostListener, inject, input, OnInit, output, signal, viewChild } from '@angular/core';
import { SearchComponent } from '../search/search.component';
import { RouteRequest, RouteResult, RoutesPanelComponent, RouteStarOption } from './routes-panel.component';
export interface HudReadout {
readonly label: string;
@@ -22,9 +23,11 @@ export interface HudDisplay {
readonly sky: boolean;
/** The rings on stars known to host planets. */
readonly systems: boolean;
/** The graph of crossings within the range the Routes panel is set to. */
readonly jumpLinks: boolean;
}
export const DEFAULT_HUD_DISPLAY: HudDisplay = { labels: true, orbits: true, grid: true, deepSky: true, sky: true, systems: true };
export const DEFAULT_HUD_DISPLAY: HudDisplay = { labels: true, orbits: true, grid: true, deepSky: true, sky: true, systems: true, jumpLinks: false };
const DISPLAY_LAYERS: readonly { key: keyof HudDisplay; label: string }[] = [
{ key: 'labels', label: 'Labels' },
@@ -32,12 +35,13 @@ const DISPLAY_LAYERS: readonly { key: keyof HudDisplay; label: string }[] = [
{ key: 'grid', label: 'Grid' },
{ key: 'deepSky', label: 'Deep sky' },
{ key: 'sky', label: 'Sky' },
{ key: 'systems', label: 'Systems' }
{ key: 'systems', label: 'Systems' },
{ key: 'jumpLinks', label: 'Jump links' }
];
export type DockTab = 'search' | 'readout' | 'display';
export type DockTab = 'search' | 'readout' | 'routes' | 'display';
const TAB_LABELS: Record<DockTab, string> = { search: 'Search', readout: 'Readout', display: 'Display' };
const TAB_LABELS: Record<DockTab, string> = { search: 'Search', readout: 'Readout', routes: 'Routes', display: 'Display' };
/** Tailwind's `sm` breakpoint: below it the dock is a bare tab strip and its panel is a sheet. */
const WIDE_VIEWPORT = '(min-width: 640px)';
@@ -64,7 +68,7 @@ function isWideViewport(): boolean {
@Component({
selector: 'app-hud-dock',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [SearchComponent],
imports: [RoutesPanelComponent, SearchComponent],
host: { class: 'pointer-events-none fixed inset-x-2 bottom-2 z-20 block font-body sm:inset-x-6 sm:bottom-6' },
template: `
<!-- The column is transparent to the pointer and each surface in it opts back in: it is as
@@ -102,6 +106,19 @@ function isWideViewport(): boolean {
}
</section>
}
@case ('routes') {
<section id="dock-panel-routes" role="tabpanel" aria-labelledby="dock-tab-routes" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-xl px-4 py-3">
<app-routes-panel
[result]="routeResult()"
[options]="routeOptions()"
[currentStar]="currentStar()"
(queryChange)="routeQuery.emit($event)"
(routeRequested)="routeRequested.emit($event)"
(starSelected)="onRouteStarSelected($event)"
(rangeChange)="jumpRangeChange.emit($event)"
/>
</section>
}
@case ('display') {
<section id="dock-panel-display" role="tabpanel" aria-labelledby="dock-tab-display" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg px-4 py-3">
<p class="type-label text-muted">Layers</p>
@@ -166,14 +183,25 @@ export class HudDockComponent implements OnInit {
readonly display = input<HudDisplay | null>(null);
/** Which panel is open on a wide viewport when the dock mounts. */
readonly defaultTab = input<DockTab | null>(null);
/** Routing: what the scene found, what it offers for the fields, and where the view is. */
readonly routeResult = input<RouteResult | null>(null);
readonly routeOptions = input<readonly RouteStarOption[]>([]);
readonly currentStar = input<RouteStarOption | null>(null);
/** Present makes the Routes tab available; absent means this surface cannot route. */
readonly routing = input(false);
readonly displayChange = output<HudDisplay>();
readonly routeQuery = output<string>();
readonly routeRequested = output<RouteRequest>();
readonly routeStarSelected = output<number>();
readonly jumpRangeChange = output<number>();
readonly layers = DISPLAY_LAYERS;
readonly hasDerived = computed(() => this.readouts().some((readout) => readout.derived));
readonly tabs = computed<readonly DockTab[]>(() => [
'search',
...(this.title() ? (['readout'] as const) : []),
...(this.routing() ? (['routes'] as const) : []),
...(this.display() ? (['display'] as const) : [])
]);
@@ -205,6 +233,11 @@ export class HudDockComponent implements OnInit {
}
}
/** A step on a plotted route was chosen: fly there, and leave the route up to walk it from. */
onRouteStarSelected(starId: number): void {
this.routeStarSelected.emit(starId);
}
onPicked(): void {
// A result was chosen: the thing to look at is now the scene, so hand the panel back to the
// readout where there is one, and fold the sheet away where there is not. On a narrow
src/app/features/hud/routes-panel.component.ts
+227
View File
@@ -0,0 +1,227 @@
import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
import { formatParsecs } from '../../shared/format/quantity';
/** A star offered for one of the two fields, as the panel needs to show it. */
export interface RouteStarOption {
readonly id: number;
readonly name: string;
readonly subtitle: string;
}
/** What the scene worked out, once it has been asked. */
export interface RouteResult {
/** The chain, departure first. Empty when there is no route at the range asked for. */
readonly stars: readonly { id: number; name: string }[];
readonly totalPc: number;
/** The shortest range that would open a route, where none was found at the one asked for. */
readonly neededRangePc: number | null;
}
export interface RouteRequest {
readonly fromId: number;
readonly toId: number;
readonly rangePc: number;
}
/** Which end of the journey a query is for. */
type Field = 'from' | 'to';
/**
* Departure, destination, range, and the chain between them.
*
* The one genuinely two-sided tool in the instrument, and the reason the range lives here
* rather than beside the layer toggle that draws the graph: the number that decides which
* crossings are possible is the same number in both places, and a control is easier to trust
* where its consequence is printed.
*
* Presentational. It knows how to ask; the scene knows the catalogue and does the walking.
*/
@Component({
selector: 'app-routes-panel',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="flex flex-col gap-3">
<div class="grid gap-2 sm:grid-cols-2">
@for (field of fields; track field) {
<div class="relative">
<label [for]="'route-' + field" class="type-label text-muted">{{ field === 'from' ? 'Departure' : 'Destination' }}</label>
<input
[id]="'route-' + field"
type="text"
autocomplete="off"
[value]="text(field)"
[placeholder]="field === 'from' ? 'From this system' : 'Search a star'"
(input)="onInput(field, $event)"
(keydown.escape)="closeOptions()"
class="hud-surface mt-1 w-full px-2.5 py-1.5 text-sm text-text caret-accent placeholder:text-muted focus:border-accent focus:outline-none"
/>
@if (open() === field && options().length) {
<ul class="hud-surface absolute bottom-full left-0 z-10 mb-1 max-h-48 w-full overflow-y-auto divide-y divide-border/25">
@for (option of options(); track option.id) {
<li>
<button
type="button"
(click)="choose(field, option)"
class="flex w-full items-baseline gap-3 px-2.5 py-1.5 text-left transition-colors hover:bg-accent/8 focus-visible:bg-accent/12 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
>
<span class="min-w-0 flex-1 truncate text-sm text-text">{{ option.name }}</span>
<span class="type-label shrink-0 truncate text-muted">{{ option.subtitle }}</span>
</button>
</li>
}
</ul>
}
</div>
}
</div>
<div class="flex items-center gap-3">
<label for="route-range" class="type-label shrink-0 text-muted">Jump range</label>
<input
id="route-range"
type="range"
[min]="minRangePc"
[max]="maxRangePc"
step="0.1"
[value]="rangePc()"
(input)="onRange($event)"
class="h-1 min-w-0 flex-1 appearance-none rounded-none bg-border accent-accent"
/>
<output for="route-range" class="w-20 shrink-0 text-right text-sm text-accent tabular-nums">{{ rangeLabel() }}</output>
</div>
<div class="flex items-center gap-3">
<button
type="button"
[disabled]="!canPlot()"
(click)="plot()"
class="type-label border border-border/60 px-3 py-1.5 text-muted transition-colors enabled:hover:border-accent/70 enabled:hover:text-accent disabled:opacity-40 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
>
Plot route
</button>
@if (result(); as plotted) {
@if (plotted.stars.length) {
<p data-testid="route-summary" class="text-sm text-text tabular-nums">
{{ plotted.stars.length - 1 }} {{ plotted.stars.length === 2 ? 'jump' : 'jumps' }} <span class="text-muted">·</span> {{ format(plotted.totalPc) }}
</p>
} @else {
<p data-testid="route-summary" class="text-sm text-muted">
No route at this range.
@if (plotted.neededRangePc !== null) {
<button
type="button"
(click)="raiseTo(plotted.neededRangePc)"
class="text-accent underline decoration-accent/40 underline-offset-2 hover:decoration-accent focus-visible:outline-1 focus-visible:outline-accent"
>
{{ format(plotted.neededRangePc) }} would reach.
</button>
} @else {
Nothing in the catalogue bridges the gap.
}
</p>
}
}
</div>
@if (result()?.stars?.length) {
<ol data-testid="route-steps" class="hud-surface divide-y divide-border/25">
@for (step of result()!.stars; track step.id; let i = $index) {
<li>
<button
type="button"
(click)="starSelected.emit(step.id)"
class="flex w-full items-baseline gap-3 px-2.5 py-1.5 text-left transition-colors hover:bg-accent/8 focus-visible:bg-accent/12 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
>
<span class="type-label w-6 shrink-0 text-muted tabular-nums">{{ i + 1 }}</span>
<span class="min-w-0 flex-1 truncate text-sm text-text">{{ step.name }}</span>
</button>
</li>
}
</ol>
}
</div>
`
})
export class RoutesPanelComponent {
/** Whatever the scene found for the last query it was given. */
readonly result = input<RouteResult | null>(null);
/** Matches for the field currently being typed into, ranked by the scene. */
readonly options = input<readonly RouteStarOption[]>([]);
/** The star the view is currently inside, offered as the departure without typing. */
readonly currentStar = input<RouteStarOption | null>(null);
readonly queryChange = output<string>();
readonly routeRequested = output<RouteRequest>();
readonly starSelected = output<number>();
/** The graph is drawn at whatever range this panel is set to, so the scene follows it. */
readonly rangeChange = output<number>();
readonly fields: readonly Field[] = ['from', 'to'];
/** A tenth of a parsec is finer than the catalogue's own distances are known to. */
readonly minRangePc = 0.5;
/** Beyond this the graph is a solid sheet of lines and every pair of stars is connected. */
readonly maxRangePc = 8;
readonly rangePc = signal(3);
readonly open = signal<Field | null>(null);
private readonly chosen = signal<Record<Field, RouteStarOption | null>>({ from: null, to: null });
private readonly typed = signal<Record<Field, string>>({ from: '', to: '' });
/** Departure falls back to wherever the view already is, so one field is usually enough. */
private readonly departure = computed(() => this.chosen().from ?? this.currentStar());
readonly canPlot = computed(() => this.departure() !== null && this.chosen().to !== null);
readonly rangeLabel = computed(() => formatParsecs(this.rangePc()));
text(field: Field): string {
return this.chosen()[field]?.name ?? this.typed()[field];
}
format(distancePc: number): string {
return formatParsecs(distancePc);
}
onInput(field: Field, event: Event): void {
const value = (event.target as HTMLInputElement).value;
this.typed.update((current) => ({ ...current, [field]: value }));
// Typing over a chosen star un-chooses it: the field says what it will be searched for.
this.chosen.update((current) => ({ ...current, [field]: null }));
this.open.set(field);
this.queryChange.emit(value);
}
choose(field: Field, option: RouteStarOption): void {
this.chosen.update((current) => ({ ...current, [field]: option }));
this.closeOptions();
}
closeOptions(): void {
this.open.set(null);
this.queryChange.emit('');
}
onRange(event: Event): void {
const value = Number((event.target as HTMLInputElement).value);
this.rangePc.set(value);
this.rangeChange.emit(value);
}
raiseTo(rangePc: number): void {
// Rounded up to the control's own step, so the number shown is one it can actually hold —
// and up rather than down, since down would land just short of the crossing it names.
const stepped = Math.min(this.maxRangePc, Math.ceil(rangePc * 10) / 10);
this.rangePc.set(stepped);
this.rangeChange.emit(stepped);
this.plot();
}
plot(): void {
const from = this.departure();
const to = this.chosen().to;
if (from && to) {
this.routeRequested.emit({ fromId: from.id, toId: to.id, rangePc: this.rangePc() });
}
}
}