@inventure71/paddockjs 0.3.0 → 2.0.0

package/src/app/readouts/timingTowerRenderer.js

@@ -0,0 +1,177 @@
+import { setText } from '../domBindings.js';
+import { escapeHtml, formatLapGap, formatRaceGap, getTireClass } from './readoutFormatters.js';
+
+function formatPenaltyHeadline(penalty) {
+  const serviceType = penalty?.serviceType;
+  if (serviceType === 'driveThrough') {
+    return penalty?.unserved ? 'unserved drive-through penalty' : 'drive-through penalty';
+  }
+  if (serviceType === 'stopGo') {
+    return penalty?.unserved ? 'unserved stop-go penalty' : 'stop-go penalty';
+  }
+  const positionDrop = Number(penalty?.positionDrop);
+  if (Number.isFinite(positionDrop) && positionDrop > 0) {
+    return `${positionDrop}-place position drop`;
+  }
+  const gridDrop = Number(penalty?.gridDrop);
+  if (Number.isFinite(gridDrop) && gridDrop > 0) {
+    return `${gridDrop}-place grid drop`;
+  }
+  if (penalty?.disqualified) return 'disqualification';
+  const seconds = Number(penalty?.penaltySeconds);
+  if (!Number.isFinite(seconds) || seconds <= 0) return 'Penalty decision';
+  const unit = seconds === 1 ? 'second' : 'seconds';
+  return `+${seconds} ${unit} time penalty`;
+}
+
+function formatPenaltyBadgeLabel(penalty) {
+  const seconds = Number(penalty?.penaltySeconds);
+  const timeLabel = Number.isFinite(seconds) && seconds > 0 ? `${seconds}s ` : '';
+  if (Number.isFinite(seconds) && seconds > 0 && !penalty?.serviceType) {
+    return `Penalty: ${timeLabel}${String(penalty?.type ?? 'decision')}`;
+  }
+  return `Penalty: ${timeLabel}${formatPenaltyHeadline(penalty)}`;
+}
+
+export function hasVisiblePenaltyEffect(penalty) {
+  if (!penalty || penalty.status === 'cancelled') return false;
+  if (penalty.serviceRequired && penalty.status === 'served') return false;
+  const penaltySeconds = Number(penalty.penaltySeconds);
+  const pendingPenaltySeconds = Number(penalty.pendingPenaltySeconds);
+  const positionDrop = Number(penalty.positionDrop);
+  const gridDrop = Number(penalty.gridDrop);
+  return penalty.serviceRequired ||
+    (Number.isFinite(penaltySeconds) && penaltySeconds > 0) ||
+    (Number.isFinite(pendingPenaltySeconds) && pendingPenaltySeconds > 0) ||
+    (Number.isFinite(positionDrop) && positionDrop > 0) ||
+    (Number.isFinite(gridDrop) && gridDrop > 0) ||
+    Boolean(penalty.disqualified);
+}
+
+export function isWavedFlagCar(car) {
+  return Boolean(car?.wavedFlag || car?.raceStatus === 'waved-flag' || car?.status === 'waved-flag');
+}
+
+export function isDnfCar(car) {
+  return Boolean(car?.dnf || car?.destroyed || car?.outOfRace || car?.raceStatus === 'destroyed' || car?.status === 'destroyed');
+}
+
+export function getPenaltyByDriver(penalties = []) {
+  const byDriver = new Map();
+  penalties.forEach((penalty) => {
+    if (!penalty?.driverId || byDriver.has(penalty.driverId)) return;
+    if (!hasVisiblePenaltyEffect(penalty)) return;
+    byDriver.set(penalty.driverId, penalty);
+  });
+  return byDriver;
+}
+
+export function getTimingPenaltyKey(penalties = [], { timingPenaltyBadgesEnabled = false } = {}) {
+  if (!timingPenaltyBadgesEnabled) return '';
+  return penalties
+    .filter(hasVisiblePenaltyEffect)
+    .map((penalty) => [
+      penalty.id,
+      penalty.driverId,
+      penalty.status,
+      penalty.penaltySeconds,
+      penalty.pendingPenaltySeconds,
+      penalty.positionDrop,
+      penalty.gridDrop,
+      penalty.disqualified,
+    ].join(':'))
+    .join('|');
+}
+
+export function getTimingOrderKey(cars = [], { timingGapMode = 'interval' } = {}) {
+  return cars.map((car) => [
+    car.id,
+    car.rank,
+    car.lap,
+    formatRaceGap(car, timingGapMode),
+    car.penaltySeconds ?? 0,
+    car.classifiedRank ?? 0,
+    car.finishRank ?? 0,
+    car.dnf ? 1 : 0,
+    car.destroyed ? 1 : 0,
+    car.outOfRace ? 1 : 0,
+    car.dnfOrder ?? 0,
+    car.dnfReason ?? car.destroyReason ?? '',
+    car.raceStatus ?? car.status ?? '',
+    car.wavedFlag ? 1 : 0,
+    car.tire ?? '',
+  ].join(':')).join('|');
+}
+
+export function syncTimingGapModeControls({ readouts, buttons, timingGapMode }) {
+  const label = timingGapMode === 'leader' ? 'Gap' : 'Int';
+  setText(readouts.timingGapLabel, label);
+  buttons.forEach((button) => {
+    const active = button.dataset.timingGapMode === timingGapMode;
+    button.setAttribute('aria-pressed', String(active));
+    button.classList?.toggle?.('is-active', active);
+  });
+}
+
+export function renderTimingTower({
+  timingList,
+  cars,
+  raceMode,
+  penalties = [],
+  driverById,
+  selectedId,
+  timingGapMode,
+  timingPenaltyBadgesEnabled,
+  lastTimingMarkup,
+}) {
+  if (!timingList) return lastTimingMarkup;
+  const penaltyByDriver = timingPenaltyBadgesEnabled ? getPenaltyByDriver(penalties) : new Map();
+  const timingMarkup = cars.map((car) => {
+    const driver = driverById.get(car.id);
+    const dnf = isDnfCar(car);
+    let gap = 'Leader';
+    if (dnf) {
+      gap = 'DNF';
+    } else if (isWavedFlagCar(car) && raceMode !== 'finished') {
+      gap = 'WAVED';
+    } else if (raceMode === 'finished') {
+      gap = car.rank === 1 ? 'Winner' : 'FIN';
+    } else if (raceMode === 'safety-car' && car.rank > 1) {
+      gap = 'SC';
+    } else if (raceMode === 'pre-start') {
+      gap = car.rank === 1 ? 'Pole' : 'Grid';
+    } else if (car.rank > 1) {
+      gap = formatRaceGap(car, timingGapMode);
+    }
+    const tire = car.tire ?? driver?.tire ?? 'M';
+    const timingCode = car.timingCode ?? driver?.timingCode ?? car.code;
+    const team = car.team ?? driver?.team ?? null;
+    const icon = team?.icon ?? car.icon ?? driver?.icon ?? timingCode;
+    const iconColor = team?.color ?? car.color;
+    const penalty = penaltyByDriver.get(car.id);
+    const penaltyBadge = penalty
+      ? `<span class="timing-penalty-badge" aria-label="${escapeHtml(formatPenaltyBadgeLabel(penalty))}" title="${escapeHtml(formatPenaltyBadgeLabel(penalty))}">!</span>`
+      : '';
+
+    return `
+        <li>
+          <button class="timing-row ${car.id === selectedId ? 'is-selected' : ''} ${dnf ? 'is-dnf' : ''}" type="button"
+            data-driver-id="${escapeHtml(car.id)}" aria-label="Select ${escapeHtml(car.name)}"
+            style="--driver-color: ${escapeHtml(car.color)}">
+            <span class="timing-position">${car.rank}</span>
+            <span class="timing-icon timing-team-icon" aria-hidden="true" style="--team-color: ${escapeHtml(iconColor)}">${escapeHtml(icon)}</span>
+            <span class="timing-name" title="${escapeHtml(car.name)}"><span>${escapeHtml(timingCode)}</span>${penaltyBadge}</span>
+            <span class="timing-gap">${escapeHtml(gap)}</span>
+            <span class="timing-tire timing-tire--${getTireClass(tire)}">${escapeHtml(tire)}</span>
+          </button>
+        </li>
+      `;
+  }).join('');
+  if (timingMarkup !== lastTimingMarkup) {
+    timingList.innerHTML = timingMarkup;
+    return timingMarkup;
+  }
+  return lastTimingMarkup;
+}
+
+export { formatLapGap, formatRaceGap };

package/src/app/rendering/appAssets.js

@@ -0,0 +1,38 @@
+import { Assets, Texture } from 'pixi.js';
+
+async function loadTexture(url, { configure = null } = {}) {
+  try {
+    const texture = await Assets.load(url);
+    configure?.(texture);
+    return texture;
+  } catch {
+    return Texture.WHITE;
+  }
+}
+
+export async function loadAppTextures(assets) {
+  const textures = {
+    car: await loadTexture(assets.car, {
+      configure(texture) {
+        texture.source.scaleMode = 'linear';
+        texture.source.autoGenerateMipmaps = true;
+      },
+    }),
+    safetyCar: await loadTexture(assets.safetyCar, {
+      configure(texture) {
+        texture.source.scaleMode = 'linear';
+        texture.source.autoGenerateMipmaps = true;
+      },
+    }),
+  };
+
+  await Promise.all(Object.entries(assets.trackTextures).map(async ([key, url]) => {
+    textures[key] = await loadTexture(url, {
+      configure(texture) {
+        texture.source.scaleMode = 'linear';
+      },
+    });
+  }));
+
+  return textures;
+}

package/src/app/rendering/carRenderer.js

@@ -0,0 +1,286 @@
+import { Container, Graphics, Sprite, Text, Texture } from 'pixi.js';
+import { metersToSimUnits } from '../../simulation/units.js';
+import { VEHICLE_GEOMETRY } from '../../simulation/vehicleGeometry.js';
+import { CAR_WORLD_LENGTH } from '../camera/cameraConstants.js';
+import { colorToTint, smoothAngle } from './displayUtils.js';
+
+const CAR_WORLD_WIDTH = VEHICLE_GEOMETRY.visualWidth;
+const TEMP_RENDER_RAW_CAR_GEOMETRY = false;
+const NON_COLLIDING_MARKER_COLOR = 0x38bdf8;
+const SAFETY_CAR_WORLD_LENGTH = metersToSimUnits(5.3);
+const SAFETY_CAR_WORLD_WIDTH = metersToSimUnits(2.1);
+const SERVICE_COUNTDOWN_LABEL_STYLES = {
+  penalty: {
+    background: 0x110b0b,
+    stroke: 0xff2d55,
+    fill: 0xffffff,
+  },
+  pit: {
+    background: 0x171305,
+    stroke: 0xffd166,
+    fill: 0xfff2b0,
+  },
+};
+
+export class CarRenderer {
+  constructor({ carSprites, carHitAreas, serviceCountdownLabels, onSelectCar }) {
+    this.carSprites = carSprites;
+    this.carHitAreas = carHitAreas;
+    this.serviceCountdownLabels = serviceCountdownLabels;
+    this.onSelectCar = onSelectCar;
+    this.safetySprite = null;
+    this.nonCollidingMarkers = new Map();
+  }
+
+  createCars({ drivers, textures, carLayer }) {
+    const texture = textures.car ?? Texture.WHITE;
+    const baseScale = Math.min(
+      CAR_WORLD_LENGTH / Math.max(texture.width, 1),
+      CAR_WORLD_WIDTH / Math.max(texture.height, 1),
+    );
+
+    this.carSprites.forEach((sprite) => sprite.destroy());
+    this.carHitAreas.forEach((hit) => hit.destroy());
+    this.serviceCountdownLabels.forEach((label) => label.destroy({ children: true }));
+    this.nonCollidingMarkers.forEach((marker) => marker.destroy());
+    this.carSprites.clear();
+    this.carHitAreas.clear();
+    this.serviceCountdownLabels.clear();
+    this.nonCollidingMarkers.clear();
+
+    if (this.safetySprite) {
+      this.safetySprite.destroy();
+      this.safetySprite = null;
+    }
+
+    drivers.forEach((driver) => {
+      const sprite = TEMP_RENDER_RAW_CAR_GEOMETRY
+        ? this.createRawCarGeometryGraphic(driver)
+        : new Sprite(texture);
+      if (!TEMP_RENDER_RAW_CAR_GEOMETRY) {
+        sprite.anchor.set(0.5);
+        sprite.baseScale = baseScale;
+        sprite.scale.set(baseScale);
+      } else {
+        sprite.baseScale = 1;
+      }
+
+      const marker = this.createNonCollidingMarker();
+      this.nonCollidingMarkers.set(driver.id, marker);
+      carLayer.addChild(marker);
+
+      sprite.tint = TEMP_RENDER_RAW_CAR_GEOMETRY ? 0xffffff : colorToTint(driver.color);
+      sprite.eventMode = 'static';
+      sprite.cursor = 'pointer';
+      sprite.on('pointerdown', () => {
+        this.onSelectCar?.(driver.id);
+      });
+      this.carSprites.set(driver.id, sprite);
+      carLayer.addChild(sprite);
+
+      const hit = new Graphics();
+      hit.circle(0, 0, 24).fill({ color: 0xffffff, alpha: 0.001 });
+      hit.eventMode = 'static';
+      hit.cursor = 'pointer';
+      hit.on('pointerdown', () => {
+        this.onSelectCar?.(driver.id);
+      });
+      this.carHitAreas.set(driver.id, hit);
+      carLayer.addChild(hit);
+
+      const serviceLabel = this.createServiceCountdownLabel();
+      serviceLabel.visible = false;
+      this.serviceCountdownLabels.set(driver.id, serviceLabel);
+      carLayer.addChild(serviceLabel);
+    });
+  }
+
+  createRawCarGeometryGraphic(driver) {
+    const graphic = new Graphics();
+    const tint = colorToTint(driver.color);
+    const wheelLong = VEHICLE_GEOMETRY.wheelLongitudinalOffset;
+    const wheelLat = VEHICLE_GEOMETRY.wheelLateralOffset;
+    const wheelLength = VEHICLE_GEOMETRY.wheelLength;
+    const wheelWidth = VEHICLE_GEOMETRY.wheelWidth;
+
+    graphic
+      .rect(
+        -VEHICLE_GEOMETRY.bodyLength / 2,
+        -VEHICLE_GEOMETRY.bodyWidth / 2,
+        VEHICLE_GEOMETRY.bodyLength,
+        VEHICLE_GEOMETRY.bodyWidth,
+      )
+      .fill({ color: tint, alpha: 0.42 })
+      .stroke({ width: 2.2, color: 0xf8fafc, alpha: 0.95 });
+
+    [
+      [wheelLong, -wheelLat],
+      [wheelLong, wheelLat],
+      [-wheelLong, -wheelLat],
+      [-wheelLong, wheelLat],
+    ].forEach(([x, y]) => {
+      graphic
+        .rect(x - wheelLength / 2, y - wheelWidth / 2, wheelLength, wheelWidth)
+        .fill({ color: 0x111827, alpha: 0.95 })
+        .stroke({ width: 1.5, color: tint, alpha: 1 });
+    });
+
+    const noseMarkerLength = metersToSimUnits(0.75);
+    graphic
+      .moveTo(VEHICLE_GEOMETRY.bodyLength / 2 - noseMarkerLength, 0)
+      .lineTo(VEHICLE_GEOMETRY.bodyLength / 2 + noseMarkerLength, 0)
+      .stroke({ width: 2, color: 0xf1c65b, alpha: 0.95 });
+    return graphic;
+  }
+
+  createNonCollidingMarker() {
+    const marker = new Graphics();
+    marker.visible = false;
+    marker.eventMode = 'none';
+    marker.interactionVisualRole = 'non-colliding-marker';
+    return marker;
+  }
+
+  renderNonCollidingMarker(car) {
+    const marker = this.nonCollidingMarkers.get(car.id);
+    if (!marker) return;
+    const visible = car.interaction?.collidable === false;
+    if (marker.visible !== visible) marker.visible = visible;
+    if (!visible) return;
+
+    if (marker.x !== car.x) marker.x = car.x;
+    if (marker.y !== car.y) marker.y = car.y;
+    if (marker.rotation !== car.heading) marker.rotation = car.heading;
+
+    marker.clear();
+    const length = CAR_WORLD_LENGTH * 0.82;
+    const width = CAR_WORLD_WIDTH * 1.32;
+    const halfLength = length / 2;
+    const halfWidth = width / 2;
+    const segment = CAR_WORLD_LENGTH * 0.22;
+    const alpha = 0.86;
+    marker.ellipse(0, 0, halfLength, halfWidth)
+      .stroke({ width: 2.5, color: NON_COLLIDING_MARKER_COLOR, alpha: 0.36 });
+    [
+      [1, 1],
+      [1, -1],
+      [-1, 1],
+      [-1, -1],
+    ].forEach(([longitudinal, lateral]) => {
+      marker
+        .moveTo(longitudinal * halfLength, lateral * (halfWidth - segment))
+        .lineTo(longitudinal * halfLength, lateral * halfWidth)
+        .lineTo(longitudinal * (halfLength - segment), lateral * halfWidth)
+        .stroke({ width: 4, color: NON_COLLIDING_MARKER_COLOR, alpha });
+    });
+  }
+
+  createServiceCountdownLabel() {
+    const container = new Container();
+    const background = new Graphics();
+    const text = new Text({
+      text: '0s',
+      style: {
+        fill: 0xffffff,
+        fontFamily: 'Arial, sans-serif',
+        fontSize: 16,
+        fontWeight: '900',
+        align: 'center',
+      },
+    });
+    text.anchor.set(0.5);
+    text.resolution = 2;
+    container.addChild(background, text);
+    container.labelBackground = background;
+    container.labelText = text;
+    this.applyServiceCountdownTone(container, 'pit');
+    return container;
+  }
+
+  applyServiceCountdownTone(label, tone) {
+    const style = SERVICE_COUNTDOWN_LABEL_STYLES[tone] ?? SERVICE_COUNTDOWN_LABEL_STYLES.pit;
+    if (label.serviceTone === tone) return;
+    label.labelBackground?.clear?.();
+    label.labelBackground?.roundRect(-28, -14, 56, 28, 4)
+      .fill({ color: style.background, alpha: 0.92 })
+      .stroke({ width: 2, color: style.stroke, alpha: 0.95 });
+    if (label.labelText?.style) label.labelText.style.fill = style.fill;
+    label.serviceTone = tone;
+  }
+
+  renderCars(snapshot, { textures, carLayer }) {
+    snapshot.cars.forEach((car) => {
+      const sprite = this.carSprites.get(car.id);
+      const hit = this.carHitAreas.get(car.id);
+      if (!sprite || !hit) return;
+      if (sprite.x !== car.x) sprite.x = car.x;
+      if (sprite.y !== car.y) sprite.y = car.y;
+      if (TEMP_RENDER_RAW_CAR_GEOMETRY) {
+        sprite.currentRotation = car.heading;
+        if (sprite.rotation !== car.heading) sprite.rotation = car.heading;
+      } else {
+        sprite.currentRotation = smoothAngle(sprite.currentRotation, car.heading, 0.24);
+        if (sprite.rotation !== sprite.currentRotation) sprite.rotation = sprite.currentRotation;
+      }
+      const retired = Boolean(car.destroyed || car.dnf || car.outOfRace);
+      const alpha = retired ? 0.48 : snapshot.raceControl.mode === 'safety-car' ? 0.82 : 1;
+      if (sprite.alpha !== alpha) sprite.alpha = alpha;
+      if (sprite.lastRenderedScale !== sprite.baseScale) {
+        sprite.scale.set(sprite.baseScale);
+        sprite.lastRenderedScale = sprite.baseScale;
+      }
+      const tint = retired ? 0x1f2937 : TEMP_RENDER_RAW_CAR_GEOMETRY ? 0xffffff : colorToTint(car.color);
+      if (sprite.tint !== tint) sprite.tint = tint;
+      if (hit.x !== car.x) hit.x = car.x;
+      if (hit.y !== car.y) hit.y = car.y;
+      this.renderNonCollidingMarker(car);
+      this.renderServiceCountdownLabel(car);
+    });
+
+    if (!this.safetySprite && snapshot.safetyCar.deployed) {
+      const texture = textures.safetyCar ?? Texture.WHITE;
+      this.safetySprite = new Sprite(texture);
+      this.safetySprite.anchor.set(0.5);
+      this.safetySprite.baseScale = Math.min(
+        SAFETY_CAR_WORLD_LENGTH / Math.max(texture.width, 1),
+        SAFETY_CAR_WORLD_WIDTH / Math.max(texture.height, 1),
+      );
+      this.safetySprite.scale.set(this.safetySprite.baseScale);
+      carLayer.addChild(this.safetySprite);
+    }
+
+    if (this.safetySprite) {
+      if (this.safetySprite.visible !== snapshot.safetyCar.deployed) {
+        this.safetySprite.visible = snapshot.safetyCar.deployed;
+      }
+      if (this.safetySprite.x !== snapshot.safetyCar.x) this.safetySprite.x = snapshot.safetyCar.x;
+      if (this.safetySprite.y !== snapshot.safetyCar.y) this.safetySprite.y = snapshot.safetyCar.y;
+      if (this.safetySprite.rotation !== snapshot.safetyCar.heading) {
+        this.safetySprite.rotation = snapshot.safetyCar.heading;
+      }
+    }
+  }
+
+  renderServiceCountdownLabel(car) {
+    const label = this.serviceCountdownLabels.get(car.id);
+    if (!label) return;
+    const penaltyRemaining = Number(car.pitStop?.penaltyServiceRemainingSeconds);
+    const serviceRemaining = Number(car.pitStop?.serviceRemainingSeconds);
+    const isPenalty = car.pitStop?.phase === 'penalty' && Number.isFinite(penaltyRemaining) && penaltyRemaining > 0;
+    const isPitService = car.pitStop?.phase === 'service' && Number.isFinite(serviceRemaining) && serviceRemaining > 0;
+    const visible = isPenalty || isPitService;
+    label.visible = visible;
+    if (!visible) return;
+    const tone = isPenalty ? 'penalty' : 'pit';
+    const remaining = isPenalty ? penaltyRemaining : serviceRemaining;
+    if (label.x !== car.x) label.x = car.x;
+    const labelY = car.y - 48;
+    if (label.y !== labelY) label.y = labelY;
+    if (label.rotation !== 0) label.rotation = 0;
+    this.applyServiceCountdownTone(label, tone);
+    if (label.labelText) {
+      const nextText = `${tone === 'penalty' ? '+' : ''}${Math.ceil(remaining)}s`;
+      if (label.labelText.text !== nextText) label.labelText.text = nextText;
+    }
+  }
+}

package/src/app/rendering/displayUtils.js

@@ -0,0 +1,22 @@
+const TINT_BY_COLOR = new Map();
+
+export function colorToTint(color) {
+  if (TINT_BY_COLOR.has(color)) return TINT_BY_COLOR.get(color);
+  const tint = Number.parseInt(String(color ?? '').replace('#', ''), 16);
+  const normalizedTint = Number.isFinite(tint) ? tint : 0xffffff;
+  TINT_BY_COLOR.set(color, normalizedTint);
+  return normalizedTint;
+}
+
+export function smoothAngle(current, target, amount) {
+  if (!Number.isFinite(current)) return target;
+  let diff = ((target - current + Math.PI) % (Math.PI * 2)) - Math.PI;
+  if (diff < -Math.PI) diff += Math.PI * 2;
+  return current + diff * amount;
+}
+
+export function destroyDisplayChildren(container) {
+  container?.removeChildren?.().forEach((child) => {
+    child.destroy?.({ children: true, texture: false, textureSource: false });
+  });
+}

package/src/app/rendering/drsTrailRenderer.js

@@ -0,0 +1,90 @@
+import { metersToSimUnits } from '../../simulation/units.js';
+import { clamp } from '../../simulation/simMath.js';
+import { CAR_WORLD_LENGTH } from '../camera/cameraConstants.js';
+
+const DRS_TRAIL_TTL = 0.34;
+const DRS_TRAIL_MIN_DISTANCE = metersToSimUnits(0.9);
+
+function pruneExpiredTrailPoints(history, now) {
+  let expiredCount = 0;
+  while (expiredCount < history.length && now - history[expiredCount].at > DRS_TRAIL_TTL) {
+    expiredCount += 1;
+  }
+  if (expiredCount > 0) history.splice(0, expiredCount);
+}
+
+export class DrsTrailRenderer {
+  constructor({ trails }) {
+    this.trails = trails;
+    this.hadVisibleTrails = false;
+  }
+
+  reset() {
+    this.trails.clear();
+    this.hadVisibleTrails = false;
+  }
+
+  render(snapshot, trailLayer) {
+    if (!trailLayer) return;
+
+    snapshot.cars.forEach((car) => {
+      const history = this.trails.get(car.id);
+      if (!history && !car.drsActive) return;
+      const activeHistory = history ?? [];
+      const rear = {
+        x: car.x - Math.cos(car.heading) * CAR_WORLD_LENGTH * 0.46,
+        y: car.y - Math.sin(car.heading) * CAR_WORLD_LENGTH * 0.46,
+        at: snapshot.time,
+      };
+      const last = activeHistory[activeHistory.length - 1];
+
+      if (
+        car.drsActive &&
+        (!last || Math.hypot(rear.x - last.x, rear.y - last.y) >= DRS_TRAIL_MIN_DISTANCE)
+      ) {
+        activeHistory.push(rear);
+      }
+
+      pruneExpiredTrailPoints(activeHistory, snapshot.time);
+      if (activeHistory.length) this.trails.set(car.id, activeHistory);
+      else this.trails.delete(car.id);
+    });
+
+    const hasVisibleTrails = Array.from(this.trails.values()).some((history) => history.length >= 2);
+    if (!hasVisibleTrails) {
+      if (this.hadVisibleTrails) trailLayer.clear();
+      this.hadVisibleTrails = false;
+      return;
+    }
+
+    trailLayer.clear();
+    this.trails.forEach((history) => {
+      if (history.length < 2) return;
+      const newest = history[history.length - 1];
+      const newestLife = clamp(1 - (snapshot.time - newest.at) / DRS_TRAIL_TTL, 0, 1);
+      trailLayer.moveTo(history[0].x, history[0].y);
+      for (let index = 1; index < history.length; index += 1) {
+        trailLayer.lineTo(history[index].x, history[index].y);
+      }
+      trailLayer.stroke({
+        width: 10,
+        color: 0x3be8ff,
+        alpha: 0.28 + newestLife * 0.34,
+        cap: 'round',
+        join: 'round',
+      });
+      trailLayer.moveTo(history[0].x, history[0].y);
+      for (let index = 1; index < history.length; index += 1) {
+        trailLayer.lineTo(history[index].x, history[index].y);
+      }
+      trailLayer.stroke({
+        width: 3.2,
+        color: 0xd8fbff,
+        alpha: 0.18 + newestLife * 0.28,
+        cap: 'round',
+        join: 'round',
+      });
+    });
+    this.hadVisibleTrails = true;
+  }
+}