@inventure71/paddockjs 0.3.0 → 2.0.0

package/src/index.js

@@ -30,7 +30,9 @@ export {
 export { DEMO_PROJECT_DRIVERS } from './data/demoDrivers.js';
 export { DEFAULT_F1_SIMULATOR_ASSETS } from './config/defaultAssets.js';
 export { PADDOCK_SIMULATOR_PRESETS } from './config/defaultOptions.js';
+export { createPaddockDriverControllerLoop } from './environment/controllerLoop.js';
 export { normalizeSimulatorDrivers } from './data/normalizeDrivers.js';
+export { createProceduralTrack } from './simulation/track/trackModel.js';
 export {
   REAL_F1_CAR_LENGTH_METERS,
   SIM_UNITS_PER_METER,
@@ -109,6 +111,12 @@ export async function mountF1Simulator(root, options = {}) {
     setSafetyCarDeployed(deployed) {
       app.setSafetyCarDeployed(deployed);
     },
+    setRedFlagDeployed(deployed) {
+      app.setRedFlagDeployed(deployed);
+    },
+    setPitLaneOpen(open) {
+      app.setPitLaneOpen(open);
+    },
     callSafetyCar() {
       app.setSafetyCarDeployed(true);
     },
@@ -119,6 +127,24 @@ export async function mountF1Simulator(root, options = {}) {
       const active = app.getSnapshot()?.raceControl.mode === 'safety-car';
       app.setSafetyCarDeployed(!active);
     },
+    setPitIntent(driverId, intent, targetCompound) {
+      return app.setPitIntent(driverId, intent, targetCompound);
+    },
+    getPitIntent(driverId) {
+      return app.getPitIntent(driverId);
+    },
+    getPitTargetCompound(driverId) {
+      return app.getPitTargetCompound(driverId);
+    },
+    getSimulationSpeed() {
+      return app.simulationSpeed;
+    },
+    servePenalty(penaltyId) {
+      return app.servePenalty(penaltyId);
+    },
+    cancelPenalty(penaltyId) {
+      return app.cancelPenalty(penaltyId);
+    },
     getSnapshot() {
       return app.getSnapshot();
     },

package/src/rendering/proceduralTrackAsset.js

@@ -1,271 +1,13 @@
-import { Container, Graphics, Texture, TilingSprite } from 'pixi.js';
-import { nearestTrackState, offsetTrackPoint, pointAt, WORLD } from '../simulation/trackModel.js';
+import { Container } from 'pixi.js';
+import { WORLD } from '../simulation/track/trackModel.js';
+import { destroyDisplayChildren } from './track/trackRenderGeometry.js';
+import { addAsphalt, addBarriers, addBorders, addBoundaryUnderlay, addGrass, addGravelRunoff, addKerbs } from './track/trackMaterialRenderer.js';
+import { addPitLane, addPitLaneRunoff } from './track/pitLaneRenderer.js';
+import { addStartingGrid } from './track/gridRenderer.js';
+import { addFinishLine } from './track/finishLineRenderer.js';
 
-const MATERIAL_TILE_SCALE = {
-  asphalt: { x: 0.66, y: 0.66 },
-};
-const WORLD_BACKGROUND_PADDING = 2200;
-const GRASS_COLOR = 0x2e7d32;
-const GRAVEL_COLOR = 0xb49a68;
-const ASPHALT_COLOR = 0x4a4d52;
-const EDGE_REVEAL_OFFSET = 5;
-const EDGE_REVEAL_WIDTH = 16;
-const OUTER_BOUNDARY_OFFSET = 23;
-const OUTER_BOUNDARY_WIDTH = 16;
-const KERB_OFFSET = 9;
-const KERB_WIDTH = 29;
-const FINISH_LINE_DEPTH = 58;
-const FINISH_LINE_COLUMNS = 10;
-const START_GRID_SLOT_COUNT = 20;
-const START_GRID_SLOT_SPACING = 82;
-const START_GRID_FIRST_DISTANCE = -42;
-const START_GRID_LATERAL_OFFSET = 42;
-const START_GRID_BOX_LENGTH = 58;
-const START_GRID_BOX_WIDTH = 34;
-const SEGMENTED_STROKE_STEP = 2;
-const KERB_STEP = 4;
-const KERB_CURVATURE_THRESHOLD = 0.00038;
-const OFFSET_SEGMENT_SAMPLE_COUNT = 7;
-const NON_LOCAL_SAMPLE_STEP = 8;
-const OFFSET_GAP_SAMPLE_COUNT = 4;
-
-function makeTrackPath(track, offset = 0) {
-  const path = new Graphics();
-  const samples = track.samples.slice(0, -1);
-  const first = offset === 0 ? samples[0] : offsetTrackPoint(samples[0], offset);
-  path.moveTo(first.x, first.y);
-
-  samples.slice(1).forEach((sample) => {
-    const point = offset === 0 ? sample : offsetTrackPoint(sample, offset);
-    path.lineTo(point.x, point.y);
-  });
-  path.closePath();
-
-  return path;
-}
-
-function textureOrWhite(texture) {
-  return texture ?? Texture.WHITE;
-}
-
-function destroyDisplayChildren(container) {
-  container.removeChildren().forEach((child) => {
-    child.destroy?.({ children: true, texture: false, textureSource: false });
-  });
-}
-
-function arcDistance(track, first, second) {
-  const delta = Math.abs(first - second);
-  return Math.min(delta, track.length - delta);
-}
-
-function offsetPointIsLocal(track, source, point, offset) {
-  const state = nearestTrackState(track, point);
-  const localTolerance = Math.max(220, Math.abs(offset) * 2.1);
-  const minimumEdgeDistance = Math.min(track.width / 2 - 8, Math.abs(offset) * 0.72);
-
-  return (
-    arcDistance(track, state.distance, source.distance) <= localTolerance &&
-    state.crossTrackError >= minimumEdgeDistance
-  );
-}
-
-function offsetPointOverlapsNonLocalRoad(track, source, point, offset) {
-  const localTolerance = Math.max(220, Math.abs(offset) * 2.1);
-  const roadBand = track.width / 2 + (track.kerbWidth ?? 0) + 8;
-  const roadBandSquared = (roadBand + 42) ** 2;
-
-  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;
-}
-
-function interpolatedSegmentPoint(start, end, amount) {
-  return {
-    x: start.x + (end.x - start.x) * amount,
-    y: start.y + (end.y - start.y) * amount,
-  };
-}
-
-function pointDistance(first, second) {
-  return Math.hypot(second.x - first.x, second.y - first.y);
-}
-
-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, 10);
-  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,
-    }];
-  });
-}
-
-function drawOffsetSegment(graphics, start, end, {
-  width,
-  color,
-  alpha,
-  cap,
-}) {
-  graphics.moveTo(start.x, start.y);
-  graphics.lineTo(end.x, end.y);
-  graphics.stroke({
-    width,
-    color,
-    alpha,
-    join: 'round',
-    cap,
-  });
-}
-
-function drawContinuousOffsetStroke(graphics, track, {
-  side,
-  offset,
-  width,
-  color,
-  alpha = 1,
-  step = SEGMENTED_STROKE_STEP,
-}) {
-  const samples = track.samples.slice(0, -1).filter((_, index) => index % step === 0);
-  if (samples.length < 2) return;
-
-  const first = offsetTrackPoint(samples[0], side * offset);
-  graphics.moveTo(first.x, first.y);
-  samples.slice(1).forEach((sample) => {
-    const point = offsetTrackPoint(sample, side * offset);
-    graphics.lineTo(point.x, point.y);
-  });
-  graphics.closePath();
-  graphics.stroke({
-    width,
-    color,
-    alpha,
-    join: 'round',
-    cap: 'round',
-  });
-}
-
-function drawSegmentedOffsetStroke(graphics, track, {
-  side,
-  offset,
-  width,
-  color,
-  alpha = 1,
-  step = SEGMENTED_STROKE_STEP,
-  cap = 'round',
-}) {
-  const segments = getOffsetStrokeSegments(track, { side, offset, step });
-
-  segments.forEach((segment) => {
-    if (!segment.safe) return;
-    drawOffsetSegment(graphics, segment.start, segment.end, {
-      width,
-      color,
-      alpha,
-      cap,
-    });
-  });
-
-  getOffsetGapBridges(track, segments, width).forEach((bridge) => {
-    drawOffsetSegment(graphics, bridge.start, bridge.end, {
-      width,
-      color,
-      alpha,
-      cap: 'round',
-    });
-  });
-}
+export { offsetGapBridgeIsSafe, offsetSegmentIsSafe, getOffsetGapBridges, getOffsetStrokeSegments } from './track/offsetStrokeSafety.js';
+export { getTrackMaterialBands } from './track/trackMaterialRenderer.js';
 
 export class ProceduralTrackAsset {
   constructor({ textures = {}, world = WORLD } = {}) {
@@ -276,248 +18,16 @@ export class ProceduralTrackAsset {
 
   render(track) {
     destroyDisplayChildren(this.container);
-    this.addGrass();
-    this.addGravelRunoff(track);
-    this.addBoundaryUnderlay(track);
-    this.addAsphalt(track);
-    this.addKerbs(track);
-    this.addBorders(track);
-    this.addStartingGrid(track);
-    this.addFinishLine(track);
-  }
-
-  addGrass() {
-    const grass = new Graphics();
-    grass.rect(
-      -WORLD_BACKGROUND_PADDING,
-      -WORLD_BACKGROUND_PADDING,
-      this.world.width + WORLD_BACKGROUND_PADDING * 2,
-      this.world.height + WORLD_BACKGROUND_PADDING * 2,
-    ).fill(GRASS_COLOR);
-    this.container.addChild(grass);
-  }
-
-  addGravelRunoff(track) {
-    const gravel = new Graphics();
-    const innerOffset = track.width / 2 + 8;
-    const outerOffset = track.width / 2 + track.gravelWidth;
-    const centerOffset = (innerOffset + outerOffset) / 2;
-    const width = outerOffset - innerOffset;
-
-    [-1, 1].forEach((side) => {
-      drawContinuousOffsetStroke(gravel, track, {
-        side,
-        offset: centerOffset,
-        width,
-        color: GRAVEL_COLOR,
-        step: 4,
-      });
-    });
-    this.container.addChild(gravel);
-  }
-
-  addBoundaryUnderlay(track) {
-    const boundary = new Graphics();
-    [-1, 1].forEach((side) => {
-      drawContinuousOffsetStroke(boundary, track, {
-        side,
-        offset: track.width / 2 + OUTER_BOUNDARY_OFFSET,
-        width: OUTER_BOUNDARY_WIDTH,
-        color: 0x090a0d,
-        alpha: 0.64,
-        step: 2,
-      });
-    });
-
-    this.drawKerbStripes(boundary, track, { clipUnsafeSegments: false });
-
-    [-1, 1].forEach((side) => {
-      drawContinuousOffsetStroke(boundary, track, {
-        side,
-        offset: track.width / 2 + EDGE_REVEAL_OFFSET,
-        width: EDGE_REVEAL_WIDTH,
-        color: 0xf8fafc,
-        alpha: 0.94,
-        step: 2,
-      });
-    });
-
-    this.container.addChild(boundary);
-  }
-
-  drawKerbStripes(kerbs, track, { clipUnsafeSegments }) {
-    const samples = track.samples.slice(0, -1);
-
-    for (let index = 0; index < samples.length; index += KERB_STEP) {
-      const sample = samples[index];
-      const next = samples[(index + KERB_STEP) % samples.length];
-      const curvature = Math.max(sample.curvature, next.curvature);
-      if (curvature < KERB_CURVATURE_THRESHOLD) continue;
-
-      const color = Math.floor(index / KERB_STEP) % 2 === 0 ? 0xe10600 : 0xf8fafc;
-      [-1, 1].forEach((side) => {
-        const offset = side * (track.width / 2 + KERB_OFFSET);
-        const start = offsetTrackPoint(sample, offset);
-        const end = offsetTrackPoint(next, offset);
-        if (clipUnsafeSegments && !offsetSegmentIsSafe(track, sample, next, start, end, offset)) return;
-        kerbs.moveTo(start.x, start.y);
-        kerbs.lineTo(end.x, end.y);
-        kerbs.stroke({
-          width: KERB_WIDTH,
-          color,
-          alpha: 1,
-          join: 'round',
-          cap: 'butt',
-        });
-      });
-    }
-  }
-
-  addMaskedMaterial({ track, texture, strokeWidth, alpha, tileScale }) {
-    const sprite = new TilingSprite({
-      texture: textureOrWhite(texture),
-      width: this.world.width,
-      height: this.world.height,
-      tileScale,
-    });
-    sprite.alpha = alpha;
-
-    const mask = makeTrackPath(track);
-    mask.stroke({
-      width: strokeWidth,
-      color: 0xffffff,
-      alpha: 1,
-      join: 'round',
-      cap: 'butt',
-    });
-    mask.renderable = false;
-    sprite.mask = mask;
-    this.container.addChild(sprite, mask);
-  }
-
-  addAsphalt(track) {
-    const asphaltBase = makeTrackPath(track);
-    asphaltBase.stroke({
-      width: track.width,
-      color: ASPHALT_COLOR,
-      alpha: 1,
-      join: 'round',
-      cap: 'butt',
-    });
-    this.container.addChild(asphaltBase);
-
-    this.addMaskedMaterial({
-      track,
-      texture: this.textures.asphalt,
-      strokeWidth: track.width,
-      alpha: 0.18,
-      tileScale: MATERIAL_TILE_SCALE.asphalt,
-    });
-
-  }
-
-  addBorders(track) {
-    const borders = new Graphics();
-
-    [-1, 1].forEach((side) => {
-      drawSegmentedOffsetStroke(borders, track, {
-        side,
-        offset: track.width / 2,
-        width: 5,
-        color: 0xf8fafc,
-        alpha: 0.86,
-        step: 4,
-      });
-
-      drawSegmentedOffsetStroke(borders, track, {
-        side,
-        offset: track.width / 2 + 15,
-        width: 7,
-        color: 0x090a0d,
-        alpha: 0.56,
-        step: 4,
-      });
-    });
-
-    this.container.addChild(borders);
-  }
-
-  addKerbs(track) {
-    const kerbs = new Graphics();
-    this.drawKerbStripes(kerbs, track, { clipUnsafeSegments: true });
-    this.container.addChild(kerbs);
+    addGrass(this);
+    addGravelRunoff(this, track);
+    addBoundaryUnderlay(this, track);
+    addPitLaneRunoff(this, track);
+    addPitLane(this, track);
+    addAsphalt(this, track);
+    addKerbs(this, track);
+    addBorders(this, track);
+    addStartingGrid(this, track);
+    addFinishLine(this, track);
+    addBarriers(this, track);
   }
-
-  addStartingGrid(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',
-      });
-    }
-
-    this.container.addChild(grid);
-  }
-
-  addFinishLine(track) {
-    const finishLine = new Graphics();
-    const halfDepth = FINISH_LINE_DEPTH / 2;
-    this.addFinishLineHalf(finishLine, track, -halfDepth, 0, 0);
-    this.addFinishLineHalf(finishLine, track, 0, halfDepth, 1);
-    this.container.addChild(finishLine);
-  }
-
-  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/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);
+    }
+
+}