Jonathan Hvid
66b460c35f
Pure math, no DOM. computeRouteLayout(opts) takes itemCount + viewport width and returns trackWidth, pathD, itemX, itemY, cardSide, midY: - itemX evenly distributes items between padding and viewport-padding, expanding the canvas beyond the viewport when itemCount * minSpacingX exceeds the available width. Single-item case centres the dot. - itemY puts the first item on the centreline; subsequent items alternate +amplitude / -amplitude so the path snakes gently up and down. The route reads as a river rather than a saw-tooth because the cubic-bezier control points use the segment midpoint x — that holds the tangent flat at each milestone. - cardSide alternates 'below' / 'above' starting from 'below' on item 0. Cards hang from their dot via a thin vertical connector in the consuming component. Also adds travelledStopFor(statuses) — the stop position on the path stroke gradient where 'travelled' fades into 'ahead'. Clamps to 0.98 even when every item is shipping so the fade is always visible. 9 unit tests cover itemCount 1/2/3/7/20 plus the travelledStop edge cases (no shipping → 0; all shipping → ≤ 0.98; mixed → exact midpoint). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { computeRouteLayout, travelledStopFor } from '../src/lib/roadmap-layout.js';
|
|
|
|
function isStrictlyIncreasing(xs: number[]): boolean {
|
|
for (let i = 1; i < xs.length; i += 1) if (xs[i] <= xs[i - 1]) return false;
|
|
return true;
|
|
}
|
|
|
|
describe('computeRouteLayout', () => {
|
|
it('1 item — produces a valid single-point M path on the centreline', () => {
|
|
const out = computeRouteLayout({ itemCount: 1, viewportWidth: 1000 });
|
|
expect(out.itemX).toHaveLength(1);
|
|
expect(out.itemY).toEqual([out.midY]);
|
|
expect(out.cardSide).toEqual(['below']);
|
|
expect(out.pathD.startsWith('M ')).toBe(true);
|
|
expect(out.pathD).not.toContain('C ');
|
|
expect(out.trackWidth).toBeGreaterThanOrEqual(1000);
|
|
});
|
|
|
|
it('2 items — itemX strictly increasing, cardSide alternates below/above', () => {
|
|
const out = computeRouteLayout({ itemCount: 2, viewportWidth: 1000 });
|
|
expect(out.itemX).toHaveLength(2);
|
|
expect(isStrictlyIncreasing(out.itemX)).toBe(true);
|
|
expect(out.cardSide).toEqual(['below', 'above']);
|
|
expect(out.pathD.startsWith('M ')).toBe(true);
|
|
expect((out.pathD.match(/C /g) ?? []).length).toBe(1);
|
|
});
|
|
|
|
it('3 items — first card below, then above, then below', () => {
|
|
const out = computeRouteLayout({ itemCount: 3, viewportWidth: 1000 });
|
|
expect(out.cardSide).toEqual(['below', 'above', 'below']);
|
|
expect(isStrictlyIncreasing(out.itemX)).toBe(true);
|
|
// First item on centreline, second above (lower y in svg coords), third below
|
|
expect(out.itemY[0]).toBe(out.midY);
|
|
expect(out.itemY[1]).toBeLessThan(out.midY);
|
|
expect(out.itemY[2]).toBeGreaterThan(out.midY);
|
|
});
|
|
|
|
it('7 items — strictly increasing itemX + correct alternation', () => {
|
|
const out = computeRouteLayout({ itemCount: 7, viewportWidth: 1200 });
|
|
expect(out.itemX).toHaveLength(7);
|
|
expect(isStrictlyIncreasing(out.itemX)).toBe(true);
|
|
expect(out.cardSide).toEqual(['below', 'above', 'below', 'above', 'below', 'above', 'below']);
|
|
expect(out.pathD.startsWith('M ')).toBe(true);
|
|
expect((out.pathD.match(/C /g) ?? []).length).toBe(6);
|
|
});
|
|
|
|
it('20 items — track expands beyond viewport, spacing respects minSpacingX', () => {
|
|
const out = computeRouteLayout({ itemCount: 20, viewportWidth: 800 });
|
|
expect(isStrictlyIncreasing(out.itemX)).toBe(true);
|
|
expect(out.trackWidth).toBeGreaterThan(800);
|
|
// With minSpacing 320 and 20 items, the route should be at least
|
|
// (20 - 1) * 320 + 2 * 60 = 6200px wide
|
|
expect(out.trackWidth).toBeGreaterThanOrEqual(6200);
|
|
});
|
|
|
|
it('trackWidth is never smaller than the viewport width', () => {
|
|
const out = computeRouteLayout({ itemCount: 1, viewportWidth: 2000 });
|
|
expect(out.trackWidth).toBeGreaterThanOrEqual(2000);
|
|
});
|
|
});
|
|
|
|
describe('travelledStopFor', () => {
|
|
it('returns 0 when no items have shipped', () => {
|
|
expect(travelledStopFor(['exploring', 'considering'])).toBe(0);
|
|
expect(travelledStopFor([])).toBe(0);
|
|
});
|
|
|
|
it('returns (lastShippingIndex + 0.5) / itemCount', () => {
|
|
// [shipping, shipping, in_beta, exploring] → lastShipping = 1 → (1.5)/4 = 0.375
|
|
expect(travelledStopFor(['shipping', 'shipping', 'in_beta', 'exploring'])).toBeCloseTo(0.375, 5);
|
|
});
|
|
|
|
it('clamps to 0.98 when every item has shipped', () => {
|
|
expect(travelledStopFor(['shipping', 'shipping', 'shipping'])).toBeCloseTo(0.833, 2);
|
|
// even with 100 items all shipping, clamps to 0.98
|
|
const allShipping = Array(100).fill('shipping') as ('shipping')[];
|
|
expect(travelledStopFor(allShipping)).toBeLessThanOrEqual(0.98);
|
|
});
|
|
});
|