@inventure71/paddockjs 1.0.0 → 2.0.1

package/src/rendering/renderSnapshot.js

@@ -1,23 +1,49 @@
 import { lerp, normalizeAngle } from '../simulation/simMath.js';
 
+const CAR_BUFFER = Symbol('renderSnapshotCars');
+const GHOST_BUFFER = Symbol('renderSnapshotGhosts');
+const SAFETY_CAR_BUFFER = Symbol('renderSnapshotSafetyCar');
+
 function interpolateAngle(previous, current, amount) {
   if (!Number.isFinite(previous)) return current;
   return previous + normalizeAngle(current - previous) * amount;
 }
 
-function interpolateMovingEntity(entity, alpha) {
-  return {
-    ...entity,
-    x: lerp(entity.previousX ?? entity.x, entity.x, alpha),
-    y: lerp(entity.previousY ?? entity.y, entity.y, alpha),
-    heading: interpolateAngle(entity.previousHeading ?? entity.heading, entity.heading, alpha),
-  };
+function interpolateMovingEntityInto(target, entity, alpha) {
+  Object.assign(target, entity);
+  target.x = lerp(entity.previousX ?? entity.x, entity.x, alpha);
+  target.y = lerp(entity.previousY ?? entity.y, entity.y, alpha);
+  target.heading = interpolateAngle(entity.previousHeading ?? entity.heading, entity.heading, alpha);
+  return target;
+}
+
+function interpolateEntityListInto(sourceEntities = [], targetEntities = [], alpha) {
+  targetEntities.length = sourceEntities.length;
+  for (let index = 0; index < sourceEntities.length; index += 1) {
+    const source = sourceEntities[index];
+    const target = targetEntities[index] ?? {};
+    targetEntities[index] = interpolateMovingEntityInto(target, source, alpha);
+  }
+  return targetEntities;
+}
+
+export function interpolateRenderSnapshotInto(target, snapshot, alpha) {
+  if (!target || typeof target !== 'object') target = {};
+  const carBuffer = target[CAR_BUFFER] ?? [];
+  const ghostBuffer = target[GHOST_BUFFER] ?? [];
+  const safetyCarBuffer = target[SAFETY_CAR_BUFFER] ?? {};
+  target[CAR_BUFFER] = carBuffer;
+  target[GHOST_BUFFER] = ghostBuffer;
+  target[SAFETY_CAR_BUFFER] = safetyCarBuffer;
+  Object.assign(target, snapshot);
+  target.cars = interpolateEntityListInto(snapshot.cars ?? [], carBuffer, alpha);
+  target.replayGhosts = interpolateEntityListInto(snapshot.replayGhosts ?? [], ghostBuffer, alpha);
+  target.safetyCar = snapshot.safetyCar
+    ? interpolateMovingEntityInto(safetyCarBuffer, snapshot.safetyCar, alpha)
+    : snapshot.safetyCar;
+  return target;
 }
 
 export function createRenderSnapshot(snapshot, alpha) {
-  return {
-    ...snapshot,
-    cars: snapshot.cars.map((car) => interpolateMovingEntity(car, alpha)),
-    safetyCar: interpolateMovingEntity(snapshot.safetyCar, alpha),
-  };
+  return interpolateRenderSnapshotInto({}, snapshot, alpha);
 }

package/src/rendering/track/finishLineRenderer.js

@@ -0,0 +1,34 @@
+import { Graphics } from 'pixi.js';
+import { offsetTrackPoint, pointAt } from '../../simulation/trackModel.js';
+import { FINISH_LINE_COLUMNS, FINISH_LINE_DEPTH } from './trackRenderConstants.js';
+
+export function addFinishLine(asset, track) {
+    const finishLine = new Graphics();
+    const halfDepth = FINISH_LINE_DEPTH / 2;
+    addFinishLineHalf(finishLine, track, -halfDepth, 0, 0);
+    addFinishLineHalf(finishLine, track, 0, halfDepth, 1);
+    asset.container.addChild(finishLine);
+
+}
+
+export function addFinishLineHalf(graphics, track, startDistance, endDistance, rowOffset) {
+    const start = pointAt(track, startDistance);
+    const end = pointAt(track, endDistance);
+    const roadPadding = 10;
+    const width = track.width - roadPadding * 2;
+    const leftEdge = -width / 2;
+    const cellWidth = width / FINISH_LINE_COLUMNS;
+
+    for (let column = 0; column < FINISH_LINE_COLUMNS; column += 1) {
+      const innerOffset = leftEdge + column * cellWidth;
+      const outerOffset = innerOffset + cellWidth;
+      const color = (column + rowOffset) % 2 === 0 ? 0xf8fafc : 0x0b0d12;
+      const a = offsetTrackPoint(start, innerOffset);
+      const b = offsetTrackPoint(start, outerOffset);
+      const c = offsetTrackPoint(end, outerOffset);
+      const d = offsetTrackPoint(end, innerOffset);
+
+      graphics.poly([a.x, a.y, b.x, b.y, c.x, c.y, d.x, d.y]).fill(color);
+    }
+
+}

package/src/rendering/track/gridRenderer.js

@@ -0,0 +1,47 @@
+import { Graphics } from 'pixi.js';
+import { offsetTrackPoint, pointAt } from '../../simulation/trackModel.js';
+import { START_GRID_BOX_LENGTH, START_GRID_BOX_WIDTH, START_GRID_FIRST_DISTANCE, START_GRID_LATERAL_OFFSET, START_GRID_SLOT_COUNT, START_GRID_SLOT_SPACING } from './trackRenderConstants.js';
+
+export function addStartingGrid(asset, track) {
+    const grid = new Graphics();
+
+    for (let index = 0; index < START_GRID_SLOT_COUNT; index += 1) {
+      const base = pointAt(track, START_GRID_FIRST_DISTANCE - index * START_GRID_SLOT_SPACING);
+      const lateralOffset = index % 2 === 0 ? -START_GRID_LATERAL_OFFSET : START_GRID_LATERAL_OFFSET;
+      const center = offsetTrackPoint(base, lateralOffset);
+      const forwardX = Math.cos(base.heading);
+      const forwardY = Math.sin(base.heading);
+      const normalX = base.normalX;
+      const normalY = base.normalY;
+      const halfLength = START_GRID_BOX_LENGTH / 2;
+      const halfWidth = START_GRID_BOX_WIDTH / 2;
+      const corners = [
+        {
+          x: center.x + forwardX * halfLength + normalX * halfWidth,
+          y: center.y + forwardY * halfLength + normalY * halfWidth,
+        },
+        {
+          x: center.x + forwardX * halfLength - normalX * halfWidth,
+          y: center.y + forwardY * halfLength - normalY * halfWidth,
+        },
+        {
+          x: center.x - forwardX * halfLength - normalX * halfWidth,
+          y: center.y - forwardY * halfLength - normalY * halfWidth,
+        },
+        {
+          x: center.x - forwardX * halfLength + normalX * halfWidth,
+          y: center.y - forwardY * halfLength + normalY * halfWidth,
+        },
+      ];
+
+      grid.poly(corners.flatMap((corner) => [corner.x, corner.y])).stroke({
+        width: 3,
+        color: 0xf8fafc,
+        alpha: 0.8,
+        join: 'round',
+      });
+    }
+
+    asset.container.addChild(grid);
+
+}

package/src/rendering/track/offsetStrokeSafety.js

@@ -0,0 +1,136 @@
+import { nearestTrackState, offsetTrackPoint } from '../../simulation/trackModel.js';
+import { queryNearbyTrackProjections } from '../../simulation/track/trackQueryIndex.js';
+import { metersToSimUnits } from '../../simulation/units.js';
+import { NON_LOCAL_SAMPLE_STEP, OFFSET_GAP_SAMPLE_COUNT, OFFSET_SEGMENT_SAMPLE_COUNT } from './trackRenderConstants.js';
+import { arcDistance, interpolatedSegmentPoint, pointDistance } from './trackRenderGeometry.js';
+
+export function offsetPointIsLocal(track, source, point, offset) {
+  const state = nearestTrackState(track, point);
+  const localTolerance = Math.max(metersToSimUnits(105), Math.abs(offset) * 2.1);
+  const minimumEdgeDistance = Math.min(track.width / 2 - metersToSimUnits(4), Math.abs(offset) * 0.72);
+
+  return (
+    arcDistance(track, state.distance, source.distance) <= localTolerance &&
+    state.crossTrackError >= minimumEdgeDistance
+  );
+}
+
+export function offsetPointOverlapsNonLocalRoad(track, source, point, offset) {
+  const localTolerance = Math.max(metersToSimUnits(105), Math.abs(offset) * 2.1);
+  const roadBand = track.width / 2 + (track.kerbWidth ?? 0) + metersToSimUnits(4);
+  const roadBandSquared = (roadBand + metersToSimUnits(20)) ** 2;
+  const indexedCandidates = queryNearbyTrackProjections(track, point);
+
+  if (indexedCandidates) {
+    return indexedCandidates.some((state) => (
+      arcDistance(track, state.distance, source.distance) > localTolerance &&
+      state.distanceSquared <= roadBandSquared &&
+      state.crossTrackError <= roadBand
+    ));
+  }
+
+  for (let index = 0; index < track.samples.length - 1; index += NON_LOCAL_SAMPLE_STEP) {
+    const sample = track.samples[index];
+    if (arcDistance(track, sample.distance, source.distance) <= localTolerance) continue;
+
+    const dx = point.x - sample.x;
+    const dy = point.y - sample.y;
+    if (dx * dx + dy * dy > roadBandSquared) continue;
+
+    const signedOffset = dx * sample.normalX + dy * sample.normalY;
+    if (Math.abs(signedOffset) <= roadBand) return true;
+  }
+
+  return false;
+}
+
+export function offsetSegmentIsSafe(track, current, next, start, end, offset) {
+  const centerDistance = Math.hypot(next.x - current.x, next.y - current.y);
+  const edgeDistance = Math.hypot(end.x - start.x, end.y - start.y);
+  const maxEdgeDistance = Math.max(centerDistance * 2.6, track.width * 0.58);
+  if (edgeDistance > maxEdgeDistance || Math.abs(offset) > track.width + track.gravelWidth + track.runoffWidth) {
+    return false;
+  }
+
+  const forwardDistance = ((next.distance - current.distance + track.length) % track.length) || centerDistance;
+
+  for (let sample = 0; sample <= OFFSET_SEGMENT_SAMPLE_COUNT; sample += 1) {
+    const amount = sample / OFFSET_SEGMENT_SAMPLE_COUNT;
+    const source = {
+      distance: (current.distance + forwardDistance * amount) % track.length,
+    };
+    const point = interpolatedSegmentPoint(start, end, amount);
+    if (!offsetPointIsLocal(track, source, point, offset)) return false;
+    if (offsetPointOverlapsNonLocalRoad(track, source, point, offset)) return false;
+  }
+
+  return true;
+}
+
+export function offsetGapBridgeIsSafe(track, start, end, width) {
+  const bridgeDistance = pointDistance(start, end);
+  const maximumBridgeDistance = Math.max(track.width * 0.08, width * 3.4);
+  if (bridgeDistance > maximumBridgeDistance) return false;
+
+  const minimumEdgeDistance = track.width / 2 - Math.max(width * 2.5, metersToSimUnits(4.75));
+  for (let sample = 1; sample < OFFSET_GAP_SAMPLE_COUNT; sample += 1) {
+    const amount = sample / OFFSET_GAP_SAMPLE_COUNT;
+    const point = interpolatedSegmentPoint(start, end, amount);
+    const state = nearestTrackState(track, point);
+    if (state.crossTrackError < minimumEdgeDistance) return false;
+  }
+
+  return true;
+}
+
+export function getOffsetStrokeSegments(track, {
+  side,
+  offset,
+  step = SEGMENTED_STROKE_STEP,
+}) {
+  const samples = track.samples.slice(0, -1);
+  const signedOffset = side * offset;
+
+  return samples.map((current, index) => {
+    if (index % step !== 0) return null;
+
+    const next = samples[(index + step) % samples.length];
+    const start = offsetTrackPoint(current, signedOffset);
+    const end = offsetTrackPoint(next, signedOffset);
+
+    return {
+      current,
+      next,
+      start,
+      end,
+      safe: offsetSegmentIsSafe(track, current, next, start, end, signedOffset),
+    };
+  }).filter(Boolean);
+}
+
+export function getOffsetGapBridges(track, segments, width) {
+  if (segments.length < 2) return [];
+
+  return segments.flatMap((segment, index) => {
+    if (!segment.safe) return [];
+
+    const previousIndex = (index - 1 + segments.length) % segments.length;
+    if (segments[previousIndex].safe) return [];
+
+    let previousSafe = null;
+    for (let lookup = 2; lookup <= segments.length; lookup += 1) {
+      const candidate = segments[(index - lookup + segments.length) % segments.length];
+      if (!candidate.safe) continue;
+      previousSafe = candidate;
+      break;
+    }
+
+    if (!previousSafe || previousSafe === segment) return [];
+    if (!offsetGapBridgeIsSafe(track, previousSafe.end, segment.start, width)) return [];
+
+    return [{
+      start: previousSafe.end,
+      end: segment.start,
+    }];
+  });
+}

package/src/rendering/track/pitLaneRenderer.js

@@ -0,0 +1,248 @@
+import { Graphics } from 'pixi.js';
+import { nearestTrackState } from '../../simulation/trackModel.js';
+import { ASPHALT_COLOR, GRAVEL_COLOR, PIT_ASPHALT_COLOR, PIT_BOX_COLOR, PIT_CONNECTOR_WIDTH, PIT_LINE_COLOR, PIT_SPEED_LINE_COLOR } from './trackRenderConstants.js';
+import { colorToNumber, createTeamPitGroupCorners, drawPolyline, offsetVectorPoint } from './trackRenderGeometry.js';
+
+export function drawMainPitLaneOffsetLine(graphics, pitLane, offset, {
+  width,
+  color,
+  alpha = 1,
+}) {
+  const start = offsetVectorPoint(pitLane.mainLane.start, pitLane.serviceNormal, offset);
+  const end = offsetVectorPoint(pitLane.mainLane.end, pitLane.serviceNormal, offset);
+  drawPolyline(graphics, [start, end], {
+    width,
+    color,
+    alpha,
+    cap: 'butt',
+  });
+}
+
+export function drawPitRoad(graphics, points, {
+  roadWidth,
+  asphaltColor = ASPHALT_COLOR,
+  edgeAlpha = 0.54,
+  cap = 'butt',
+}) {
+  drawPolyline(graphics, points, {
+    width: roadWidth + 8,
+    color: 0x080a0f,
+    alpha: edgeAlpha,
+    cap,
+  });
+  drawPolyline(graphics, points, {
+    width: roadWidth,
+    color: asphaltColor,
+    alpha: 1,
+    cap,
+  });
+}
+
+export function drawPitRunoff(graphics, points, roadWidth) {
+  drawPolyline(graphics, points, {
+    width: roadWidth + 92,
+    color: GRAVEL_COLOR,
+    alpha: 1,
+    cap: 'butt',
+  });
+}
+
+export function getPitLaneRoadCenterlines(pitLane) {
+  return {
+    entryRoad: pitLane.entry.roadCenterline ?? [pitLane.entry.edgePoint, pitLane.mainLane.start],
+    exitRoad: pitLane.exit.roadCenterline ?? [pitLane.mainLane.end, pitLane.exit.edgePoint],
+  };
+}
+
+export function drawCurvedPitRoadEdges(graphics, points, roadWidth) {
+  if (!Array.isArray(points) || points.length < 2) return;
+  [-1, 1].forEach((side) => {
+    const edgePoints = points.map((point, index) => {
+      const before = points[Math.max(0, index - 1)];
+      const after = points[Math.min(points.length - 1, index + 1)];
+      const dx = after.x - before.x;
+      const dy = after.y - before.y;
+      const len = Math.hypot(dx, dy) || 1;
+      return {
+        x: point.x + (-dy / len) * side * roadWidth / 2,
+        y: point.y + (dx / len) * side * roadWidth / 2,
+      };
+    });
+    drawPolyline(graphics, edgePoints, {
+      width: 2,
+      color: PIT_LINE_COLOR,
+      alpha: 0.7,
+      cap: 'butt',
+    });
+  });
+}
+
+export function getPitRoadEdgePoints(track, points) {
+  if (!Array.isArray(points) || points.length < 2) return points;
+  const trackEdge = track.width / 2;
+  const firstVisible = points.findIndex((point) => nearestTrackState(track, point).crossTrackError >= trackEdge - 4);
+  const lastVisibleReverse = [...points]
+    .reverse()
+    .findIndex((point) => nearestTrackState(track, point).crossTrackError >= trackEdge - 4);
+
+  if (firstVisible < 0 || lastVisibleReverse < 0) return points;
+  const lastVisible = points.length - 1 - lastVisibleReverse;
+  return points.slice(firstVisible, lastVisible + 1);
+}
+
+export function addPitLaneRunoff(asset, track) {
+    if (!track.pitLane?.enabled) return;
+    const pitLane = track.pitLane;
+    const pitRunoff = new Graphics();
+    pitRunoff.label = 'pit-lane-runoff';
+
+    // Only the main pit lane gets a gravel shoulder; connectors run through the track's
+    // own gravel/runoff zone so they do not need a separate runoff stroke (which would
+    // bleed an undesirable gravel band into the track asphalt at the entry/exit endpoints).
+    const workingLaneExtent = pitLane.workingLane
+      ? pitLane.workingLane.offset + pitLane.workingLane.width / 2
+      : pitLane.width / 2;
+    drawPitRunoff(pitRunoff, pitLane.mainLane.points, Math.max(pitLane.width, workingLaneExtent * 2));
+
+    asset.container.addChild(pitRunoff);
+
+}
+
+export function addPitLane(asset, track) {
+    if (!track.pitLane?.enabled) return;
+    const pitLane = track.pitLane;
+    const pit = new Graphics();
+    pit.label = 'pit-lane';
+    const { entryRoad, exitRoad } = getPitLaneRoadCenterlines(pitLane);
+
+    drawPitRoad(pit, entryRoad, {
+      roadWidth: PIT_CONNECTOR_WIDTH,
+      asphaltColor: ASPHALT_COLOR,
+      edgeAlpha: 0.18,
+      cap: 'round',
+    });
+    drawPitRoad(pit, exitRoad, {
+      roadWidth: PIT_CONNECTOR_WIDTH,
+      asphaltColor: ASPHALT_COLOR,
+      edgeAlpha: 0.18,
+      cap: 'round',
+    });
+    drawPitRoad(pit, pitLane.mainLane.points, {
+      roadWidth: pitLane.width,
+      asphaltColor: PIT_ASPHALT_COLOR,
+      edgeAlpha: 0.62,
+    });
+    if (pitLane.workingLane?.points?.length >= 2) {
+      drawPitRoad(pit, pitLane.workingLane.points, {
+        roadWidth: pitLane.workingLane.width,
+        asphaltColor: PIT_ASPHALT_COLOR,
+        edgeAlpha: 0.52,
+      });
+    }
+
+    drawMainPitLaneOffsetLine(pit, pitLane, -pitLane.width / 2, {
+      width: 3,
+      color: PIT_SPEED_LINE_COLOR,
+      alpha: 0.9,
+    });
+    drawMainPitLaneOffsetLine(pit, pitLane, pitLane.width / 2, {
+      width: 3,
+      color: PIT_LINE_COLOR,
+      alpha: 0.84,
+    });
+    if (pitLane.workingLane) {
+      drawMainPitLaneOffsetLine(pit, pitLane, pitLane.workingLane.offset - pitLane.workingLane.width / 2, {
+        width: 2,
+        color: PIT_LINE_COLOR,
+        alpha: 0.48,
+      });
+      drawMainPitLaneOffsetLine(pit, pitLane, pitLane.workingLane.offset + pitLane.workingLane.width / 2, {
+        width: 3,
+        color: PIT_LINE_COLOR,
+        alpha: 0.78,
+      });
+    }
+
+    const heading = pitLane.mainLane.heading;
+    const laneNormal = { x: -Math.sin(heading), y: Math.cos(heading) };
+    [pitLane.mainLane.start, pitLane.mainLane.end].forEach((point) => {
+      const a = offsetVectorPoint(point, laneNormal, -pitLane.width / 2);
+      const b = offsetVectorPoint(point, laneNormal, pitLane.width / 2);
+      drawPolyline(pit, [a, b], {
+        width: 4,
+        color: PIT_SPEED_LINE_COLOR,
+        alpha: 0.95,
+        cap: 'butt',
+      });
+    });
+
+    [entryRoad, exitRoad].forEach((road) => {
+      drawCurvedPitRoadEdges(pit, getPitRoadEdgePoints(track, road), PIT_CONNECTOR_WIDTH);
+    });
+
+    (pitLane.teams ?? []).forEach((team) => {
+      const boxes = pitLane.boxes.filter((box) => team.boxIds?.includes(box.id));
+      const corners = createTeamPitGroupCorners(boxes);
+      if (corners.length < 4) return;
+      const color = colorToNumber(team.color);
+      pit.poly(corners.flatMap((corner) => [corner.x, corner.y])).fill({
+        color,
+        alpha: 0.24,
+      });
+      pit.poly(corners.flatMap((corner) => [corner.x, corner.y])).stroke({
+        width: 3,
+        color,
+        alpha: 0.72,
+        join: 'round',
+      });
+    });
+
+    (pitLane.serviceAreas ?? []).forEach((serviceArea) => {
+      const teamColor = colorToNumber(serviceArea.teamColor, PIT_SPEED_LINE_COLOR);
+      if (serviceArea.queueCorners?.length >= 4) {
+        pit.poly(serviceArea.queueCorners.flatMap((corner) => [corner.x, corner.y])).fill({
+          color: teamColor,
+          alpha: 0.13,
+        });
+        pit.poly(serviceArea.queueCorners.flatMap((corner) => [corner.x, corner.y])).stroke({
+          width: 2,
+          color: teamColor,
+          alpha: 0.44,
+          join: 'round',
+        });
+      }
+      pit.poly(serviceArea.corners.flatMap((corner) => [corner.x, corner.y])).fill({
+        color: teamColor,
+        alpha: 0.2,
+      });
+      pit.poly(serviceArea.corners.flatMap((corner) => [corner.x, corner.y])).stroke({
+        width: 3,
+        color: teamColor,
+        alpha: 0.92,
+        join: 'round',
+      });
+    });
+
+    pitLane.boxes.forEach((box) => {
+      const teamColor = colorToNumber(box.teamColor, box.teamBoxIndex === 0 ? PIT_LINE_COLOR : PIT_SPEED_LINE_COLOR);
+      pit.poly(box.corners.flatMap((corner) => [corner.x, corner.y])).fill({
+        color: PIT_BOX_COLOR,
+        alpha: 0.96,
+      });
+      pit.poly(box.corners.flatMap((corner) => [corner.x, corner.y])).stroke({
+        width: 2,
+        color: teamColor,
+        alpha: 0.9,
+        join: 'round',
+      });
+      drawPolyline(pit, [box.laneTarget, box.center], {
+        width: 2,
+        color: teamColor,
+        alpha: 0.28,
+        cap: 'butt',
+      });
+    });
+
+    asset.container.addChild(pit);
+
+}