@inventure71/paddockjs 4.1.0 → 4.3.0

package/src/app/gridWalk/gridWalkCamera.js

@@ -0,0 +1,88 @@
+export function gridWalkOrientation(width, height, previous = null) {
+  const ratio = width / Math.max(1, height);
+  if (previous === 'horizontal' && ratio >= 0.92) return previous;
+  if (previous === 'vertical' && ratio <= 1.08) return previous;
+  return ratio >= 1 ? 'horizontal' : 'vertical';
+}
+
+function gridAxes(cars) {
+  const heading = cars[0].heading;
+  const cos = Math.cos(heading);
+  const sin = Math.sin(heading);
+  const along = cars.map((car) => car.x * cos + car.y * sin);
+  const across = cars.map((car) => -car.x * sin + car.y * cos);
+  return { heading, cos, sin, along, across };
+}
+
+// A camera has one position along the original grid. Selection, orientation and
+// container sizing never introduce a second axis or a different framing mode.
+export function gridWalkCameraFrame({ cars, selectedId, width, height, orientation, bannerSize = 0, area,
+  position = null }) {
+  const { heading, cos, sin, along, across } = gridAxes(cars);
+  const horizontal = orientation === 'horizontal';
+  area ??= { left: 16, top: width < 600 ? 144 : 82, right: width - 16, bottom: height - 16 - bannerSize };
+  const availableWidth = Math.max(1, area.right - area.left);
+  const availableHeight = Math.max(1, area.bottom - area.top);
+  const crossSpan = Math.max(...across) - Math.min(...across);
+  const spacing = cars.length > 1 ? (Math.max(...along) - Math.min(...along)) / (cars.length - 1) : 96;
+  const scale = Math.max(0.05, Math.min(
+    (horizontal ? availableWidth : availableHeight) / (spacing * 2 + 180),
+    (horizontal ? availableHeight : availableWidth) / (crossSpan + (horizontal ? 180 : 210)), 2.4,
+  ));
+  const selected = Math.max(0, cars.findIndex((car) => car.id === selectedId));
+  const minPosition = Math.min(...along) - spacing;
+  const maxPosition = Math.max(...along) + spacing;
+  const activePosition = Math.max(minPosition, Math.min(maxPosition, position ?? along[selected]));
+  const cross = (Math.min(...across) + Math.max(...across)) / 2;
+  const center = { x: activePosition * cos - cross * sin, y: activePosition * sin + cross * cos };
+  const rotation = (horizontal ? 0 : -Math.PI / 2) - heading;
+  const rcos = Math.cos(rotation);
+  const rsin = Math.sin(rotation);
+  const frame = {
+    rotation, scale, center, position: activePosition, minPosition, maxPosition, orientation, area,
+    x: area.left + availableWidth / 2 - (center.x * rcos - center.y * rsin) * scale,
+    y: area.top + availableHeight / 2 - (center.x * rsin + center.y * rcos) * scale,
+  };
+  frame.visibleIds = cars.filter((car) => isGridPointVisible(frame, car)).map((car) => car.id);
+  return frame;
+}
+
+export function isGridPointVisible(frame, car, margin = 24) {
+  const point = projectGridPoint(frame, car);
+  const { area } = frame;
+  return point.x >= area.left + margin && point.x <= area.right - margin &&
+    point.y >= area.top + margin && point.y <= area.bottom - margin;
+}
+
+export function projectGridPoint(frame, point) {
+  const cos = Math.cos(frame.rotation);
+  const sin = Math.sin(frame.rotation);
+  return { x: frame.x + (point.x * cos - point.y * sin) * frame.scale,
+    y: frame.y + (point.x * sin + point.y * cos) * frame.scale };
+}
+
+export class GridWalkCamera {
+  constructor(cars) { this.cars = cars; this.position = null; }
+
+  update(input) {
+    this.frame = gridWalkCameraFrame({ ...input, cars: this.cars, position: this.position });
+    this.position = this.frame.position;
+    return this.frame;
+  }
+
+  pan(delta) {
+    if (!this.frame || !Number.isFinite(delta) || !delta) return false;
+    const sign = this.frame.orientation === 'horizontal' ? -1 : 1;
+    const position = Math.max(this.frame.minPosition, Math.min(this.frame.maxPosition,
+      this.position + sign * delta / this.frame.scale));
+    if (position === this.position) return false;
+    this.position = position;
+    return true;
+  }
+
+  focus(id) {
+    const index = this.cars.findIndex((car) => car.id === id);
+    if (index < 0) return;
+    this.position = gridAxes(this.cars).along[index];
+  }
+}

package/src/app/gridWalk/gridWalkControls.js

@@ -0,0 +1,24 @@
+export class GridWalkControls {
+  constructor(element, { onSelect, onMove }, signal) {
+    this.element = element.querySelector('[data-grid-header]');
+    this.navigation = element.querySelector('[data-grid-navigation]');
+    this.jump = element.querySelector('[data-grid-jump]');
+    this.status = element.querySelector('[data-grid-status]');
+    this.element.addEventListener('click', (event) => {
+      const button = event.target.closest('button');
+      if (button?.hasAttribute('data-grid-next')) onMove(1);
+      else if (button?.hasAttribute('data-grid-previous')) onMove(-1);
+    }, { signal });
+    this.jump.addEventListener('change', () => onSelect(this.jump.value), { signal });
+  }
+
+  update(session, selectedId) {
+    this.element.hidden = !session.active || session.clearing;
+    this.navigation.hidden = !session.active || session.clearing;
+    this.jump.value = selectedId;
+    const status = session.clearing ? 'Crew clearing the grid' : session.view === 'grid-walk'
+      ? session.hasRaced ? 'Race paused · original starting grid' : 'Explore the starting grid'
+      : session.hasRaced ? 'Race in progress' : '';
+    if (this.status.textContent !== status) this.status.textContent = status;
+  }
+}

package/src/app/gridWalk/gridWalkCrew.js

@@ -0,0 +1,246 @@
+import { Container, Graphics } from 'pixi.js';
+
+const WALKER_SHIRTS = [0xd7dee5, 0x345b78, 0xb65a43, 0x70937d, 0xc4a564, 0x5c617d];
+const WALKER_SKIN = [0xefc7a5, 0xd9a17b, 0xa56b48, 0x754b37];
+
+// Cosmetic variation has its own generator. It never consumes race randomness.
+function crowdRandom(cars, seed = 2166136261) {
+  for (const car of cars) {
+    for (const letter of String(car.id)) seed = Math.imul(seed ^ letter.charCodeAt(0), 16777619);
+  }
+  return () => {
+    seed = Math.imul(seed ^ (seed >>> 16), 2246822507);
+    seed = Math.imul(seed ^ (seed >>> 13), 3266489909);
+    return ((seed ^= seed >>> 16) >>> 0) / 4294967296;
+  };
+}
+
+function createWalker(random) {
+  const person = new Container();
+  const shirt = WALKER_SHIRTS[Math.floor(random() * WALKER_SHIRTS.length)];
+  const skin = WALKER_SKIN[Math.floor(random() * WALKER_SKIN.length)];
+  const feet = [-3, 3].map((y) => {
+    const foot = new Graphics().roundRect(-6, -1.5, 7, 3, 1).fill(0x202932);
+    foot.y = y;
+    person.addChild(foot);
+    return foot;
+  });
+  const arms = [-6, 6].map((y) => {
+    const arm = new Graphics().roundRect(-4, -1.5, 8, 3, 1.5).fill(skin);
+    arm.y = y;
+    person.addChild(arm);
+    return arm;
+  });
+  person.addChild(new Graphics()
+    .ellipse(-1, 1, 9, 7).fill({ color: 0x10151a, alpha: 0.12 })
+    .roundRect(-5, -5, 10, 10, 3).fill(shirt)
+    .circle(4, 0, 3.2).fill(skin)
+    .arc(4, 0, 3.2, -Math.PI / 2, Math.PI / 2).stroke({ color: 0x473b33, width: 1.5 }));
+  return { person, feet, arms };
+}
+
+function walkingRoute(cars, offset) {
+  const points = cars.map((car) => ({
+    x: car.x - Math.sin(car.heading) * (offset - (car.gridOffset ?? 0)),
+    y: car.y + Math.cos(car.heading) * (offset - (car.gridOffset ?? 0)),
+  }));
+  const coreLength = points.slice(1).reduce((length, point, index) =>
+    length + Math.hypot(point.x - points[index].x, point.y - points[index].y), 0);
+  return { points, coreLength, frontHeading: cars[0].heading, rearHeading: cars.at(-1).heading,
+    before: 0, after: 0, segments: [], length: 0 };
+}
+
+function extendRoute(route, before, after) {
+  // Panning can introduce tiny floating-point differences in inverse projection.
+  before = before > route.before + 0.001 ? before : route.before;
+  after = after > route.after + 0.001 ? after : route.after;
+  if (before === route.before && after === route.after) return 0;
+  const first = route.points[0];
+  const last = route.points.at(-1);
+  const points = [
+    { x: first.x + Math.cos(route.frontHeading) * before,
+      y: first.y + Math.sin(route.frontHeading) * before },
+    ...route.points,
+    { x: last.x - Math.cos(route.rearHeading) * after,
+      y: last.y - Math.sin(route.rearHeading) * after },
+  ];
+  const segments = [];
+  let length = 0;
+  for (let index = 1; index < points.length; index += 1) {
+    const start = points[index - 1];
+    const dx = points[index].x - start.x;
+    const dy = points[index].y - start.y;
+    const distance = Math.hypot(dx, dy);
+    if (!distance) continue;
+    segments.push({ x: start.x, y: start.y, dx: dx / distance, dy: dy / distance,
+      start: length, end: length + distance, heading: Math.atan2(dy, dx) });
+    length += distance;
+  }
+  const shift = before - route.before;
+  Object.assign(route, { before, after, segments, length });
+  return shift;
+}
+
+function createMechanics(cars, people) {
+  const random = crowdRandom(cars, 0x6d656368);
+  const teams = [];
+  const slots = [[-25, -23], [24, -24], [-27, 24], [25, 24], [0, -27], [0, 28]];
+  for (const car of cars) {
+    const team = new Container();
+    team.position.set(car.x, car.y);
+    team.rotation = car.heading;
+    // Shuffle working positions so teams differ in both size and arrangement.
+    const positions = slots.map((slot) => [...slot]);
+    for (let index = positions.length - 1; index > 0; index -= 1) {
+      const other = Math.floor(random() * (index + 1));
+      [positions[index], positions[other]] = [positions[other], positions[index]];
+    }
+    const count = 2 + Math.floor(random() * 4);
+    for (const [slotX, slotY] of positions.slice(0, count)) {
+      const x = slotX + (random() - 0.5) * 5;
+      const y = slotY + (random() - 0.5) * 3;
+      const kneeling = random() < 0.4;
+      const working = random() < 0.7;
+      const person = new Graphics()
+        .roundRect(-5, -4, kneeling ? 8 : 10, 8, 2).fill(0xd9dfe6)
+        .circle(kneeling ? 2 : 4, 0, 3).fill(0xf0cbb1)
+        .moveTo(0, -4).lineTo(working ? 6 : -3, -7)
+        .moveTo(0, 4).lineTo(working ? 6 : -3, 7)
+        .stroke({ color: 0x9aa9b8, width: 2 });
+      person.position.set(x, y);
+      person.rotation = (y < 0 ? Math.PI / 2 : -Math.PI / 2) + (random() - 0.5) * 0.45;
+      people.push({ person, x, y, phase: random() * Math.PI * 2,
+        amplitude: working ? (kneeling ? 0.45 : 1.2) : 0.2, cadence: 500 + random() * 450 });
+      team.addChild(person);
+    }
+    const equipmentX = random() < 0.5 ? -36 : 22;
+    team.addChild(new Graphics().roundRect(equipmentX, -39, 18, 8, 2).fill(0x39444f)
+      .circle(equipmentX + 4, -30, 2).circle(equipmentX + 14, -30, 2).fill(0x10151a));
+    teams.push(team);
+  }
+  return teams;
+}
+
+export class GridWalkCrew {
+  constructor(worldLayer, cars) {
+    this.container = new Container();
+    this.container.eventMode = 'none';
+    this.people = [];
+    this.walkers = [];
+    this.lastElapsed = null;
+    this.ambientElapsed = 0;
+    this.heading = cars[0]?.heading ?? 0;
+    for (const team of createMechanics(cars, this.people)) this.container.addChild(team);
+    this.lanes = [];
+    if (cars.length) {
+      const random = crowdRandom(cars);
+      for (const side of [-1, 1]) {
+        const route = walkingRoute(cars, side * 95);
+        // Keep a modest density even for unusually long host-supplied grids.
+        const spacing = Math.max(150, route.coreLength / 32);
+        const lane = { route, side, spacing, speed: 16 + random() * 3,
+          phase: random() * spacing, walkers: [], random };
+        this.lanes.push(lane);
+        this.extendLane(lane, spacing, spacing);
+      }
+    }
+    worldLayer.addChild(this.container);
+    this.render({ active: true, motion: false, elapsed: 0, clearing: false, clearProgress: 0 });
+  }
+
+  updateCamera(frame, width, height) {
+    const cos = Math.cos(frame.rotation);
+    const sin = Math.sin(frame.rotation);
+    const along = { x: Math.cos(this.heading), y: Math.sin(this.heading) };
+    const corners = [];
+    // Include controls/banner space too: people are still visible behind HTML.
+    for (const pan of [frame.minPosition, frame.maxPosition]) {
+      const shift = pan - frame.position;
+      for (const x of [0, width]) for (const y of [0, height]) {
+        const dx = (x - frame.x) / frame.scale;
+        const dy = (y - frame.y) / frame.scale;
+        corners.push({ x: dx * cos + dy * sin + shift * along.x,
+          y: -dx * sin + dy * cos + shift * along.y });
+      }
+    }
+    const margin = 14 + 24 / frame.scale;
+    for (const lane of this.lanes) {
+      const { route } = lane;
+      const front = route.points[0];
+      const rear = route.points.at(-1);
+      const before = Math.max(...corners.map((point) => (point.x - front.x) * Math.cos(route.frontHeading) +
+        (point.y - front.y) * Math.sin(route.frontHeading))) + margin;
+      const after = Math.max(...corners.map((point) => -(point.x - rear.x) * Math.cos(route.rearHeading) -
+        (point.y - rear.y) * Math.sin(route.rearHeading))) + margin;
+      this.extendLane(lane, before, after);
+    }
+  }
+
+  extendLane(lane, before, after) {
+    const { route, spacing, random, side } = lane;
+    const leading = Math.ceil(Math.max(before, route.before) / spacing - 1e-10) * spacing;
+    const count = Math.ceil((route.coreLength + leading + Math.max(after, route.after)) / spacing - 1e-10);
+    const trailing = count * spacing - route.coreLength - leading;
+    // Whole traffic slots extend the route without changing its moving pattern.
+    const shift = extendRoute(route, leading, trailing);
+    if (!shift && lane.walkers.length === count) return;
+    const occupied = new Set();
+    for (const walker of lane.walkers) {
+      walker.distance += shift;
+      // A person just across the old wrap seam still keeps their world pose.
+      // Locate occupied slots from current positions rather than their birth order.
+      occupied.add((Math.round((walker.distance - lane.phase) / spacing) + count) % count);
+    }
+    const newSlots = [];
+    for (let slot = 0; slot < count; slot += 1) if (!occupied.has(slot)) newSlots.push(slot);
+    for (const slot of newSlots) {
+      const phase = random() * Math.PI * 2;
+      const cadence = 3000 + random() * 5000;
+      const amplitude = 12 + random() * 8;
+      const wobble = Math.sin(this.ambientElapsed / cadence + phase) * amplitude;
+      // Broad offsets hide the coverage cells: neighbors can walk close together
+      // or farther apart, while bounded pace changes prevent long empty stretches.
+      const distance = slot * spacing + lane.phase + (random() - 0.5) * spacing * 0.56 + wobble;
+      const walker = { ...createWalker(random), route, side, phase, cadence, amplitude, wobble,
+        lane, lateral: (random() - 0.5) * 30, distance: (distance + route.length) % route.length };
+      lane.walkers.push(walker);
+      this.walkers.push(walker);
+      this.container.addChild(walker.person);
+    }
+  }
+
+  render({ active, motion, elapsed, clearing, clearProgress }) {
+    const delta = active && motion && this.lastElapsed !== null ? Math.max(0, elapsed - this.lastElapsed) : 0;
+    this.lastElapsed = elapsed;
+    this.container.visible = active;
+    if (!active) return;
+    this.ambientElapsed += delta;
+    this.container.alpha = clearing ? 1 - clearProgress : 1;
+    for (const { person, x, y, phase, amplitude, cadence } of this.people) {
+      person.position.set(x + Math.sin(this.ambientElapsed / cadence + phase) * amplitude,
+        y + (clearing ? Math.sign(y) * clearProgress * 100 : 0));
+    }
+    for (const lane of this.lanes) lane.phase = (lane.phase + delta / 1000 * lane.speed) % lane.spacing;
+    for (const walker of this.walkers) {
+      const { person, route, side, feet, arms, phase, lane, cadence, amplitude } = walker;
+      // Individual speed variation is bounded in space, so traffic cannot slowly
+      // collapse into groups followed by long empty stretches after repeated laps.
+      const wobble = Math.sin(this.ambientElapsed / cadence + phase) * amplitude;
+      walker.distance = (walker.distance + delta / 1000 * lane.speed + wobble - walker.wobble +
+        route.length) % route.length;
+      walker.wobble = wobble;
+      const segment = route.segments.find((part) => walker.distance < part.end) ?? route.segments.at(-1);
+      const progress = walker.distance - segment.start;
+      const sway = Math.sin(this.ambientElapsed / (cadence * 0.8) + phase) * 3;
+      const exit = walker.lateral + sway + (clearing ? side * clearProgress * 100 : 0);
+      person.position.set(segment.x + segment.dx * progress + segment.dy * exit,
+        segment.y + segment.dy * progress - segment.dx * exit);
+      person.rotation = segment.heading;
+      const stride = Math.sin(this.ambientElapsed / 155 + phase) * 2.4;
+      feet[0].x = arms[1].x = stride;
+      feet[1].x = arms[0].x = -stride;
+    }
+  }
+
+  destroy() { this.container.destroy({ children: true }); }
+}

package/src/app/gridWalk/gridWalkLabels.js

@@ -0,0 +1,104 @@
+import { projectGridPoint } from './gridWalkCamera.js';
+
+const GAP = 8;
+
+// Pack a row/column as a group. Independent edge clamping stacks labels at the
+// viewport boundary; packing keeps their order and gives every box real space.
+export function packGridLabels(items, start, end) {
+  const ordered = [...items].sort((a, b) => a.anchor - b.anchor);
+  if (!ordered.length) return [];
+  let cursor = start;
+  const packed = ordered.map((item) => {
+    const position = Math.max(cursor, Math.min(end - item.size, item.anchor - item.size / 2));
+    cursor = position + item.size + GAP;
+    return { ...item, position };
+  });
+  cursor = end;
+  for (let index = packed.length - 1; index >= 0; index -= 1) {
+    const item = packed[index];
+    item.position = Math.min(item.position, cursor - item.size);
+    cursor = item.position - GAP;
+  }
+  return packed;
+}
+
+export class GridWalkLabels {
+  constructor(element, cars, onSelect, signal) {
+    this.element = element;
+    this.cars = new Map(cars.map((car) => [car.id, car]));
+    this.buttons = [...element.querySelectorAll('[data-grid-entry]')];
+    this.lines = new Map([...element.querySelectorAll('[data-grid-connector]')].map((line) => [line.dataset.gridConnector, line]));
+    element.querySelector('[data-grid-labels]').addEventListener('click', (event) => {
+      const button = event.target.closest('[data-grid-entry]');
+      if (button) onSelect(button.dataset.gridEntry);
+    }, { signal });
+  }
+
+  update(frame, selectedId, fallback) {
+    const horizontal = frame.orientation === 'horizontal';
+    const { area } = frame;
+    const length = horizontal ? area.right - area.left : area.bottom - area.top;
+    const middle = horizontal ? (area.top + area.bottom) / 2 : (area.left + area.right) / 2;
+    const focused = this.buttons.find((button) => button === this.element.ownerDocument.activeElement);
+    const candidates = [];
+    for (const button of this.buttons) {
+      const id = button.dataset.gridEntry;
+      button.hidden = !frame.visibleIds.includes(id);
+      button.setAttribute('aria-pressed', String(id === selectedId));
+      this.lines.get(id).toggleAttribute('hidden', button.hidden);
+      if (!button.hidden) {
+        const car = this.cars.get(id);
+        const point = projectGridPoint(frame, car);
+        candidates.push({ button, id, point, side: car.gridOffset < 0 ? -1 : 1,
+          anchor: horizontal ? point.x : point.y });
+      }
+    }
+    for (const side of [-1, 1]) {
+      let lane = candidates.filter((item) => item.side === side);
+      const width = horizontal ? Math.min(180, Math.max(112, (length - GAP * (lane.length - 1)) / Math.max(1, lane.length)))
+        : Math.min(128, (area.right - area.left - GAP) / 2);
+      for (const item of lane) {
+        item.button.style.width = `${width}px`;
+        item.size = horizontal ? width : item.button.offsetHeight;
+      }
+      // Keep text readable when more cars are visible than the labels can fit.
+      // The choice depends on camera geometry, never the selected entry.
+      const center = horizontal ? (area.left + area.right) / 2 : (area.top + area.bottom) / 2;
+      while (lane.reduce((sum, item) => sum + item.size, 0) + GAP * (lane.length - 1) > length) {
+        const farthest = lane.reduce((a, b) => Math.abs(a.anchor - center) > Math.abs(b.anchor - center) ? a : b);
+        farthest.button.hidden = true;
+        this.lines.get(farthest.id).setAttribute('hidden', '');
+        lane = lane.filter((item) => item !== farthest);
+      }
+      for (const item of packGridLabels(lane, horizontal ? area.left : area.top, horizontal ? area.right : area.bottom)) {
+        const height = item.button.offsetHeight;
+        const crossSize = horizontal ? height : width;
+        const crossStart = horizontal ? area.top : area.left;
+        const crossEnd = horizontal ? area.bottom : area.right;
+        const minCross = side < 0 ? crossStart : middle + GAP / 2;
+        const maxCross = side < 0 ? middle - GAP / 2 : crossEnd;
+        if (crossSize > maxCross - minCross) {
+          item.button.hidden = true;
+          this.lines.get(item.id).setAttribute('hidden', '');
+          continue;
+        }
+        const desired = (horizontal ? item.point.y : item.point.x) + side * (horizontal ? 55 : 80) - crossSize / 2;
+        const cross = Math.max(minCross, Math.min(maxCross - crossSize, desired));
+        const x = horizontal ? item.position : cross;
+        const y = horizontal ? cross : item.position;
+        item.button.style.transform = `translate(${x.toFixed(2)}px, ${y.toFixed(2)}px)`;
+        const line = this.lines.get(item.id);
+        line.setAttribute('x1', item.point.x.toFixed(2));
+        line.setAttribute('y1', item.point.y.toFixed(2));
+        line.setAttribute('x2', Math.max(x, Math.min(x + width, item.point.x)).toFixed(2));
+        line.setAttribute('y2', Math.max(y, Math.min(y + height, item.point.y)).toFixed(2));
+      }
+    }
+    if (focused?.hidden) this.focus(selectedId, fallback);
+  }
+
+  isVisible(id) { return this.buttons.some((button) => button.dataset.gridEntry === id && !button.hidden); }
+  focus(id, fallback) {
+    (this.buttons.find((button) => button.dataset.gridEntry === id && !button.hidden) ?? fallback)?.focus({ preventScroll: true });
+  }
+}

package/src/app/gridWalk/gridWalkLayout.js

@@ -0,0 +1,46 @@
+// Owns overlay geometry and restoration of any Race chrome it covers.
+export class GridWalkLayout {
+  constructor({ element, panel, canvasHost, root }) {
+    Object.assign(this, { element, panel, canvasHost, root });
+    this.coveredTowers = new Map();
+  }
+
+  update(active) {
+    this.active = active;
+    this.syncCoveredTowers();
+  }
+
+  measure(bannerSize) {
+    const canvas = this.canvasHost.getBoundingClientRect();
+    const header = this.element.querySelector('[data-grid-header]').getBoundingClientRect();
+    return { left: 16, right: canvas.width - 16,
+      top: Math.max(16, header.bottom - canvas.top + 12), bottom: canvas.height - 16 - bannerSize };
+  }
+
+  syncCoveredTowers() {
+    const canvas = this.canvasHost.getBoundingClientRect();
+    for (const tower of this.root.querySelectorAll('[data-timing-tower]')) {
+      const rect = tower.getBoundingClientRect();
+      const covered = this.active && rect.width > 0 && rect.height > 0 &&
+        rect.right > canvas.left && rect.left < canvas.right && rect.bottom > canvas.top && rect.top < canvas.bottom;
+      if (covered && !this.coveredTowers.has(tower)) {
+        this.coveredTowers.set(tower, tower.hasAttribute('inert'));
+        tower.classList.add('is-grid-walk-covered');
+        tower.setAttribute('inert', '');
+      } else if (!covered && this.coveredTowers.has(tower)) {
+        tower.classList.remove('is-grid-walk-covered');
+        if (!this.coveredTowers.get(tower)) tower.removeAttribute('inert');
+        this.coveredTowers.delete(tower);
+      }
+      if (covered && !tower.hasAttribute('inert')) tower.setAttribute('inert', '');
+    }
+  }
+
+  destroy() {
+    for (const [tower, wasInert] of this.coveredTowers) {
+      tower.classList.remove('is-grid-walk-covered');
+      if (!wasInert) tower.removeAttribute('inert');
+    }
+    this.coveredTowers.clear();
+  }
+}

package/src/app/gridWalk/gridWalkNavigation.js

@@ -0,0 +1,99 @@
+// Every input becomes a displacement on the camera's one permitted screen axis.
+export class GridWalkNavigation {
+  constructor({ host, surface = host, isEnabled, getOrientation, onPan, onHome, onSelect }, signal) {
+    this.host = host;
+    this.surface = surface;
+    this.isEnabled = isEnabled;
+    this.getOrientation = getOrientation;
+    this.onPan = onPan;
+    this.canvas = host.querySelector('canvas');
+    this.originalAttributes = new Map(['tabindex', 'aria-label'].map((name) => [name, this.canvas.getAttribute(name)]));
+    const options = { signal, capture: true };
+    const isSceneTarget = (event) => event.target === host || host.contains?.(event.target) ||
+      Boolean(event.target.closest?.('[data-grid-entry]'));
+    surface.addEventListener('pointerdown', (event) => {
+      if (!this.enabled || !isSceneTarget(event) || event.button !== 0 || this.gesture) return;
+      this.suppressClick = false;
+      this.gesture = { id: event.pointerId, x: event.clientX, y: event.clientY, moved: false,
+        entry: event.target.closest?.('[data-grid-entry]')?.dataset.gridEntry ?? null };
+      surface.setPointerCapture(event.pointerId);
+    }, options);
+    surface.addEventListener('pointermove', (event) => {
+      const gesture = this.gesture;
+      if (!gesture || gesture.id !== event.pointerId) return;
+      const delta = this.horizontal ? event.clientX - gesture.x : event.clientY - gesture.y;
+      if (!gesture.moved && Math.abs(delta) < 6) return;
+      if (!delta) return;
+      gesture.moved = true;
+      host.dataset.gridDragging = 'true';
+      this.onPan(delta);
+      gesture.x = event.clientX;
+      gesture.y = event.clientY;
+    }, options);
+    surface.addEventListener('pointerup', (event) => {
+      const gesture = this.gesture;
+      if (!gesture || gesture.id !== event.pointerId) return;
+      this.cancel();
+      this.suppressClick = true;
+      if (!gesture.moved && gesture.entry && this.enabled) onSelect(gesture.entry);
+    }, options);
+    surface.addEventListener('click', (event) => {
+      if (!this.suppressClick) return;
+      this.suppressClick = false;
+      if (!this.enabled || !event.detail || (!isSceneTarget(event) && event.target !== surface)) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }, options);
+    for (const name of ['pointercancel', 'lostpointercapture']) surface.addEventListener(name, () => this.cancel(), options);
+    surface.addEventListener('wheel', (event) => {
+      if (!this.enabled || !isSceneTarget(event) || !event.cancelable || event.defaultPrevented || event.ctrlKey || event.metaKey) return;
+      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? (this.horizontal ? host.clientWidth : host.clientHeight) : 1;
+      // A wheel travels front to back in both compositions. A trackpad's
+      // horizontal gesture is accepted only by a horizontal camera.
+      const delta = this.horizontal ? Math.abs(event.deltaX) > Math.abs(event.deltaY) ? -event.deltaX : event.deltaY : -event.deltaY;
+      if (!Number.isFinite(delta) || !delta || !this.onPan(delta * unit)) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }, { ...options, passive: false });
+    surface.addEventListener('keydown', (event) => {
+      if (!this.enabled || !isSceneTarget(event) || event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return;
+      const keys = this.horizontal ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];
+      if (event.key !== 'Home' && !keys.includes(event.key)) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (event.key === 'Home') onHome();
+      else this.onPan(event.key === keys[0] ? 80 : -80);
+    }, options);
+  }
+
+  get enabled() { return this.isEnabled(); }
+  get horizontal() { return this.getOrientation() === 'horizontal'; }
+
+  selectOnRelease(id, event) {
+    event?.preventDefault?.();
+    if (this.gesture) this.gesture.entry = id;
+  }
+
+  sync() {
+    for (const [name, original] of this.originalAttributes) {
+      const value = this.enabled ? name === 'tabindex' ? '0' : 'Starting grid. Drag, scroll or use arrow keys along the grid. Home returns to the selected entry.' : original;
+      if (value == null) this.canvas.removeAttribute(name);
+      else this.canvas.setAttribute(name, value);
+    }
+  }
+
+  destroy() {
+    this.cancel();
+    for (const [name, original] of this.originalAttributes) {
+      if (original == null) this.canvas.removeAttribute(name);
+      else this.canvas.setAttribute(name, original);
+    }
+  }
+
+  cancel() {
+    const id = this.gesture?.id;
+    this.gesture = null;
+    delete this.host.dataset.gridDragging;
+    if (id != null && this.surface.hasPointerCapture(id)) this.surface.releasePointerCapture(id);
+  }
+}

package/src/app/gridWalk/gridWalkProjectBanner.js

@@ -0,0 +1,43 @@
+import { queryRaceDataPanelBindings } from '../domBindings.js';
+import { renderRaceData } from '../banners/raceDataBannerController.js';
+
+// Grid Walk composes the real Race project banner, including its sizing,
+// enabled/muted policy and presenter. Only its navigation action is an anchor.
+export class GridWalkProjectBanner {
+  constructor(element, onClose, signal) {
+    this.bindings = queryRaceDataPanelBindings(element);
+    this.element = this.bindings.raceDataPanel;
+    this.element.setAttribute('data-grid-project-banner', '');
+    this.heading = this.bindings.raceDataTitle;
+    this.heading.setAttribute('data-grid-heading', '');
+    this.heading.setAttribute('tabindex', '-1');
+    this.open = true;
+    this.element.querySelector('[data-race-data-dismiss]').addEventListener('click', onClose, { signal });
+    element.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && !this.element.hidden) { event.preventDefault(); onClose(); }
+    }, { signal });
+  }
+
+  update({ active, clearing, enabled, car, drivers, options, presentation }) {
+    enabled = enabled && options.ui?.showRaceDataPanel !== false;
+    this.enabled = enabled;
+    this.element.hidden = !this.open || !active || clearing || !enabled;
+    if (!enabled) return;
+    renderRaceData({ car, drivers, options, presentation, readouts: this.bindings });
+  }
+
+  measure(width, height) {
+    if (!this.enabled) return 0;
+    this.element.classList.toggle('race-data-panel--standalone', width < 600);
+    this.element.style.maxHeight = `${Math.max(72, height * 0.34)}px`;
+    // Reserve the same scene space after dismissal: closing a project must not
+    // zoom or shift the grid under the newly restored focus.
+    const hidden = this.element.hidden;
+    this.element.hidden = false;
+    const size = this.element.getBoundingClientRect().height;
+    this.element.hidden = hidden;
+    return size + 24;
+  }
+
+  focus() { if (!this.element.hidden) this.heading.focus({ preventScroll: true }); }
+}