@inventure71/paddockjs 4.1.0 → 4.3.0

package/src/app/gridWalk/gridWalkSession.js

@@ -0,0 +1,50 @@
+import { getStartGridSlot } from '../../simulation/vehicle/vehicleState.js';
+import { offsetTrackPoint, pointAt } from '../../simulation/track/trackModel.js';
+
+// This state owns display poses only. It never steps, resets or writes the race.
+export class GridWalkSession {
+  constructor(simulation, options) {
+    this.view = options.initialView;
+    this.hasRaced = this.view === 'race';
+    this.clearing = false;
+    this.clearElapsed = 0;
+    const snapshot = simulation.snapshot();
+    const participants = new Map(simulation.cars.map((car) => [car.id, car]));
+    this.snapshot = {
+      ...snapshot,
+      replayGhosts: [],
+      safetyCar: { ...snapshot.safetyCar, deployed: false },
+      cars: snapshot.cars.map((car) => {
+        const participant = participants.get(car.id);
+        // Standing starts use the actual assigned slots, including grid penalties.
+        // Rolling starts get display-only staging slots without changing their rules.
+        const slot = participant.gridLocked ? participant : getStartGridSlot(participant.index, { standingStart: true });
+        const point = pointAt(simulation.track, slot.gridDistance);
+        const pose = offsetTrackPoint(point, slot.gridOffset);
+        return { ...car, ...pose, heading: point.heading, speed: 0, drsActive: false,
+          previousX: pose.x, previousY: pose.y, previousHeading: point.heading,
+          gridDistance: slot.gridDistance, gridOffset: slot.gridOffset };
+      }).sort((a, b) => b.gridDistance - a.gridDistance),
+    };
+  }
+
+  get active() { return this.view === 'grid-walk' || this.clearing; }
+
+  setView(view, motion) {
+    if (!['grid-walk', 'race'].includes(view) || view === this.view) return false;
+    this.view = view;
+    this.clearing = view === 'race' && !this.hasRaced && motion;
+    this.clearElapsed = 0;
+    if (view === 'race' && !this.clearing) this.hasRaced = true;
+    return true;
+  }
+
+  advance(elapsedMs, motion) {
+    if (!this.clearing) return;
+    this.clearElapsed += Math.max(0, Math.min(elapsedMs, 100));
+    if (!motion || this.clearElapsed >= 650) {
+      this.clearing = false;
+      this.hasRaced = true;
+    }
+  }
+}

package/src/app/layoutSupport.js

@@ -5,6 +5,7 @@ export const PADDOCK_MIN_SUPPORTED_INLINE_SIZE = 320;
 const MIN_INLINE_SIZE_BY_COMPONENT = {
   'race-controls': 260,
   'camera-controls': 160,
+  'view-controls': 180,
   'safety-car-control': 44,
   'timing-tower': 255,
   'race-canvas': 180,
@@ -23,6 +24,7 @@ const MIN_INLINE_SIZE_BY_COMPONENT = {
 const MIN_BLOCK_SIZE_BY_COMPONENT = {
   'race-controls': 88,
   'camera-controls': 56,
+  'view-controls': 56,
   'safety-car-control': 44,
   'timing-tower': 220,
   'race-canvas': 180,

package/src/app/raceOverlayClearanceSupport.js

@@ -69,19 +69,33 @@ function createPanelOverlayRecord(panel) {
   };
 }
 
+function setPanelClearanceClass(panel, needed) {
+  if (panel.classList?.contains(CLEARANCE_CLASS) !== needed) {
+    panel.classList?.toggle(CLEARANCE_CLASS, needed);
+  }
+}
+
+function setPanelClearance(panel, needed, value = '') {
+  setPanelClearanceClass(panel, needed);
+  // This panel is observed for style changes. Repeating an identical write
+  // can notify MutationObserver and schedule another layout pass forever.
+  const currentValue = panel.style?.getPropertyValue(CLEARANCE_VAR) ?? '';
+  if (currentValue === value) return;
+  if (value) panel.style?.setProperty(CLEARANCE_VAR, value);
+  else panel.style?.removeProperty(CLEARANCE_VAR);
+}
+
 function syncPanelOverlayClearance(record) {
   const { panel, tower, banner, toggle } = record;
   if (!panel.classList?.contains('sim-canvas-panel--responsive-narrow')) {
-    panel.classList?.remove(CLEARANCE_CLASS);
-    panel.style?.removeProperty(CLEARANCE_VAR);
+    setPanelClearance(panel, false);
     return;
   }
 
   const toggleStyle = toggle ? getComputedStyle(toggle) : null;
   const timingRevealMode = Boolean(toggle && toggleStyle?.display !== 'none' && toggleStyle?.visibility !== 'hidden');
   if (!timingRevealMode || !tower || !isVisible(banner)) {
-    panel.classList?.remove(CLEARANCE_CLASS);
-    panel.style?.removeProperty(CLEARANCE_VAR);
+    setPanelClearance(panel, false);
     return;
   }
 
@@ -95,16 +109,16 @@ function syncPanelOverlayClearance(record) {
   const needsClearance = timingEntryBounds(panel, tower)
     .some((entryBounds) => rectanglesOverlap(entryBounds, bannerWithoutClearance));
 
-  panel.classList?.toggle(CLEARANCE_CLASS, needsClearance);
+  setPanelClearanceClass(panel, needsClearance);
   if (!needsClearance) {
-    panel.style?.removeProperty(CLEARANCE_VAR);
+    setPanelClearance(panel, false);
     return;
   }
 
   const panelRect = panel.getBoundingClientRect();
   const bannerRect = banner.getBoundingClientRect();
   const clearance = Math.max(0, Math.ceil(panelRect.bottom - bannerRect.top + OVERLAY_GAP_PX));
-  panel.style?.setProperty(CLEARANCE_VAR, `${clearance}px`);
+  setPanelClearance(panel, true, `${clearance}px`);
 }
 
 function raceCanvasPanels(root) {

package/src/app/readouts/carOverviewRenderer.js

@@ -29,10 +29,8 @@ export function getOverviewFields(driver, mode) {
         label,
         value: ratings[key] ?? DRIVER_STAT_DEFINITIONS[key]?.neutral,
       })),
-      ...normalizeCustomFields([
-        ...(driver?.constructorArgs?.driver?.customFields ?? []),
-        ...(driver?.customFields ?? []),
-      ]),
+      ...normalizeCustomFields(driver?.constructorArgs?.driver?.customFields),
+      ...normalizeCustomFields(driver?.customFields),
     ];
   }
 
@@ -56,6 +54,13 @@ export function renderCarDriverOverview({
   lastOverviewRenderKey,
 }) {
   if (!car || !readouts.carOverview) return lastOverviewRenderKey;
+  if (readouts.carOverviewBindings?.length) {
+    for (const binding of readouts.carOverviewBindings) {
+      binding.lastOverviewRenderKey = renderCarDriverOverview({ car, driverById, assets, overviewMode, readouts: binding,
+        lastOverviewRenderKey: binding.lastOverviewRenderKey });
+    }
+    return readouts.carOverviewBindings[0].lastOverviewRenderKey;
+  }
   const driver = driverById.get(car.id);
   const icon = car.icon ?? driver?.icon ?? car.code;
   const driverNumber = formatDriverNumber(car.driverNumber ?? driver?.driverNumber);

package/src/app/readouts/readoutFormatters.js

@@ -1,13 +1,6 @@
 export { formatCssColor } from '../../config/cssValues.js';
 
-export function escapeHtml(value) {
-  return String(value ?? '')
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
-}
+export { escapeHtml } from '../../ui/htmlEscaping.js';
 
 export function getTireClass(tire) {
   return String(tire ?? 'M').toLowerCase();

package/src/app/readouts/telemetryRenderer.js

@@ -1,6 +1,5 @@
 import { setStyleProperty, setTextAll, setText } from '../domBindings.js';
 import { clamp } from '../../simulation/simMath.js';
-import { formatDriverNumber } from '../../data/championship.js';
 import {
   formatCssColor,
   formatTelemetryGap,
@@ -8,9 +7,8 @@ import {
   setPerformanceClass,
 } from './readoutFormatters.js';
 
-export function renderTelemetryReadouts({ readouts, car, driverById }) {
+export function renderTelemetryReadouts({ readouts, car }) {
   if (!car) return;
-  const driver = driverById.get(car.id);
   const drsState = car.drsActive ? 'OPEN' : car.drsEligible ? 'READY' : 'OFF';
   const surface = (car.surface ?? 'track').toUpperCase();
   const driverColor = formatCssColor(car.color);

package/src/app/readouts/timingTowerRenderer.js

@@ -1,5 +1,6 @@
 import { getNextTimingGapMode, getTimingGapModeLabel, normalizeTimingGapMode } from '../../config/timingGapMode.js';
-import { setText, setTextAll } from '../domBindings.js';
+import { formatPenaltyHeadline } from '../banners/bannerFormatters.js';
+import { setStyleProperty as setDomStyleProperty, setText, setTextAll } from '../domBindings.js';
 import {
   escapeHtml,
   formatCssColor,
@@ -8,29 +9,6 @@ import {
   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 ` : '';
@@ -243,52 +221,61 @@ function createTimingRowView(document) {
   };
 }
 
-function setStyleProperty(element, name, value) {
+function setTimingStyleProperty(element, name, value) {
   if (typeof element.style?.setProperty === 'function') {
-    element.style.setProperty(name, value);
+    setDomStyleProperty(element, name, value);
   } else {
-    element.setAttribute?.('style', `${name}: ${value}`);
+    setAttributeIfChanged(element, 'style', `${name}: ${value}`);
   }
 }
 
+function setAttributeIfChanged(element, name, value) {
+  const nextValue = String(value);
+  if (element.getAttribute?.(name) !== nextValue) element.setAttribute?.(name, nextValue);
+}
+
+function setClassName(element, className) {
+  if (element.className !== className) element.className = className;
+}
+
 function updateTimingRowView(view, row) {
-  view.button.className = `timing-row ${row.selected ? 'is-selected' : ''} ${row.dnf ? 'is-dnf' : ''}`;
-  view.button.setAttribute('type', 'button');
-  view.button.setAttribute('data-driver-id', row.id);
-  view.button.setAttribute('aria-label', `Select ${row.name}`);
-  setStyleProperty(view.button, '--driver-color', row.driverColor);
+  setClassName(view.button, `timing-row ${row.selected ? 'is-selected' : ''} ${row.dnf ? 'is-dnf' : ''}`);
+  setAttributeIfChanged(view.button, 'type', 'button');
+  setAttributeIfChanged(view.button, 'data-driver-id', row.id);
+  setAttributeIfChanged(view.button, 'aria-label', `Select ${row.name}`);
+  setTimingStyleProperty(view.button, '--driver-color', row.driverColor);
 
-  view.position.className = 'timing-position';
-  view.position.textContent = String(row.rank);
+  setClassName(view.position, 'timing-position');
+  setText(view.position, String(row.rank));
 
-  view.icon.className = 'timing-icon timing-team-icon';
-  view.icon.setAttribute('aria-hidden', 'true');
-  setStyleProperty(view.icon, '--team-color', row.iconColor);
-  view.icon.textContent = String(row.icon ?? '');
+  setClassName(view.icon, 'timing-icon timing-team-icon');
+  setAttributeIfChanged(view.icon, 'aria-hidden', 'true');
+  setTimingStyleProperty(view.icon, '--team-color', row.iconColor);
+  setText(view.icon, String(row.icon ?? ''));
 
-  view.name.className = 'timing-name';
-  view.name.setAttribute('title', row.name);
-  view.code.textContent = String(row.timingCode ?? '');
+  setClassName(view.name, 'timing-name');
+  setAttributeIfChanged(view.name, 'title', row.name);
+  setText(view.code, String(row.timingCode ?? ''));
 
   if (row.penaltyLabel) {
     if (!view.penaltyBadge) {
       view.penaltyBadge = view.name.ownerDocument.createElement('span');
       view.name.appendChild(view.penaltyBadge);
     }
-    view.penaltyBadge.className = 'timing-penalty-badge';
-    view.penaltyBadge.setAttribute('aria-label', row.penaltyLabel);
-    view.penaltyBadge.setAttribute('title', row.penaltyLabel);
-    view.penaltyBadge.textContent = '!';
+    setClassName(view.penaltyBadge, 'timing-penalty-badge');
+    setAttributeIfChanged(view.penaltyBadge, 'aria-label', row.penaltyLabel);
+    setAttributeIfChanged(view.penaltyBadge, 'title', row.penaltyLabel);
+    setText(view.penaltyBadge, '!');
   } else if (view.penaltyBadge) {
     view.penaltyBadge.remove();
     view.penaltyBadge = null;
   }
 
-  view.gap.className = 'timing-gap';
-  view.gap.textContent = String(row.gap);
+  setClassName(view.gap, 'timing-gap');
+  setText(view.gap, String(row.gap));
 
-  view.tire.className = `timing-tire timing-tire--${row.tireClass}`;
-  view.tire.textContent = String(row.tire ?? '');
+  setClassName(view.tire, `timing-tire timing-tire--${row.tireClass}`);
+  setText(view.tire, String(row.tire ?? ''));
 }
 
 function patchTimingRows(timingList, rows) {
@@ -304,7 +291,6 @@ function patchTimingRows(timingList, rows) {
     }
     seen.add(row.id);
     updateTimingRowView(view, row);
-    timingList.appendChild(view.item);
   });
 
   rowViews.forEach((view, id) => {
@@ -312,6 +298,18 @@ function patchTimingRows(timingList, rows) {
     view.item.remove();
     rowViews.delete(id);
   });
+
+  if (typeof timingList.insertBefore === 'function') {
+    rows.forEach((row, index) => {
+      const item = rowViews.get(row.id).item;
+      const currentItem = timingList.children[index] ?? null;
+      if (currentItem !== item) timingList.insertBefore(item, currentItem);
+    });
+  } else if (rows.some((row, index) => timingList.children[index] !== rowViews.get(row.id).item)) {
+    // Minimal host/test DOM implementations may only support appendChild.
+    // Append in desired order only when reconciliation is actually needed.
+    rows.forEach((row) => timingList.appendChild(rowViews.get(row.id).item));
+  }
 }
 
 export function renderTimingTower({

package/src/app/rendering/appAssets.js

@@ -6,33 +6,31 @@ async function loadTexture(url, { configure = null } = {}) {
     configure?.(texture);
     return texture;
   } catch {
+    // Unavailable images and incompatible texture sources both use the visible fallback.
     return Texture.WHITE;
   }
 }
 
 export async function loadAppTextures(assets) {
-  const textures = {
-    car: await loadTexture(assets.car, {
+  const [car, safetyCar, trackTextures] = await Promise.all([
+    loadTexture(assets.car, {
       configure(texture) {
         texture.source.scaleMode = 'linear';
         texture.source.autoGenerateMipmaps = true;
       },
     }),
-    safetyCar: await loadTexture(assets.safetyCar, {
+    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, {
+    Promise.all(Object.entries(assets.trackTextures).map(async ([key, url]) => [key, await loadTexture(url, {
       configure(texture) {
         texture.source.scaleMode = 'linear';
       },
-    });
-  }));
+    })])),
+  ]);
 
-  return textures;
+  return { car, safetyCar, ...Object.fromEntries(trackTextures) };
 }

package/src/app/rendering/carRenderer.js

@@ -1,11 +1,10 @@
 import { Container, Graphics, Sprite, Text, Texture } from 'pixi.js';
 import { metersToSimUnits } from '../../simulation/units.js';
-import { VEHICLE_GEOMETRY } from '../../simulation/vehicleGeometry.js';
+import { VEHICLE_GEOMETRY } from '../../simulation/vehicle/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);
@@ -54,26 +53,20 @@ export class CarRenderer {
     }
 
     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 sprite = new Sprite(texture);
+      sprite.anchor.set(0.5);
+      sprite.baseScale = baseScale;
+      sprite.scale.set(baseScale);
 
       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.tint = colorToTint(driver.color);
       sprite.eventMode = 'static';
       sprite.cursor = 'pointer';
-      sprite.on('pointerdown', () => {
-        this.onSelectCar?.(driver.id);
+      sprite.on('pointerdown', (event) => {
+        this.onSelectCar?.(driver.id, event);
       });
       this.carSprites.set(driver.id, sprite);
       carLayer.addChild(sprite);
@@ -82,8 +75,8 @@ export class CarRenderer {
       hit.circle(0, 0, 24).fill({ color: 0xffffff, alpha: 0.001 });
       hit.eventMode = 'static';
       hit.cursor = 'pointer';
-      hit.on('pointerdown', () => {
-        this.onSelectCar?.(driver.id);
+      hit.on('pointerdown', (event) => {
+        this.onSelectCar?.(driver.id, event);
       });
       this.carHitAreas.set(driver.id, hit);
       carLayer.addChild(hit);
@@ -95,64 +88,11 @@ export class CarRenderer {
     });
   }
 
-  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;
@@ -173,6 +113,19 @@ export class CarRenderer {
         .lineTo(longitudinal * (halfLength - segment), lateral * halfWidth)
         .stroke({ width: 4, color: NON_COLLIDING_MARKER_COLOR, alpha });
     });
+    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;
   }
 
   createServiceCountdownLabel() {
@@ -208,20 +161,15 @@ export class CarRenderer {
     label.serviceTone = tone;
   }
 
-  renderCars(snapshot, { textures, carLayer }) {
+  renderCars(snapshot, { textures, carLayer, snapToPose = false }) {
     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;
-      }
+      sprite.currentRotation = snapToPose ? car.heading : 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;
@@ -229,7 +177,7 @@ export class CarRenderer {
         sprite.scale.set(sprite.baseScale);
         sprite.lastRenderedScale = sprite.baseScale;
       }
-      const tint = retired ? 0x1f2937 : TEMP_RENDER_RAW_CAR_GEOMETRY ? 0xffffff : colorToTint(car.color);
+      const tint = retired ? 0x1f2937 : 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;

package/src/app/rendering/displayUtils.js

@@ -14,9 +14,3 @@ export function smoothAngle(current, target, amount) {
   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/expertSensorRenderer.js

@@ -1,4 +1,4 @@
-import { getCarRayOrigin, getCarRayVector } from '../../environment/sensors.js';
+import { getCarRayOrigin, getCarRayVector } from '../../environment/sensors/index.js';
 import { metersToSimUnits } from '../../simulation/units.js';
 
 const SENSOR_RAY_TRACK_COLOR = 0xf1c65b;

package/src/app/rendering/replayGhostRenderer.js

@@ -1,6 +1,6 @@
 import { Graphics, Sprite, Text, Texture } from 'pixi.js';
 import { CAR_WORLD_LENGTH } from '../camera/cameraConstants.js';
-import { VEHICLE_GEOMETRY } from '../../simulation/vehicleGeometry.js';
+import { VEHICLE_GEOMETRY } from '../../simulation/vehicle/vehicleGeometry.js';
 import { colorToTint, smoothAngle } from './displayUtils.js';
 
 const CAR_WORLD_WIDTH = VEHICLE_GEOMETRY.visualWidth;
@@ -111,6 +111,9 @@ export class ReplayGhostRenderer {
   drawHalo(halo, ghost) {
     const tint = colorToTint(ghost.color);
     const alpha = Math.max(0.18, Math.min(0.55, ghost.opacity + 0.16));
+    if (halo.lastRenderedTint === tint && halo.lastRenderedAlpha === alpha) return;
+    halo.lastRenderedTint = tint;
+    halo.lastRenderedAlpha = alpha;
     halo.clear();
     halo
       .ellipse(0, 0, CAR_WORLD_LENGTH * 0.72, CAR_WORLD_WIDTH * 1.25)

package/src/app/rendering/trackRenderer.js

@@ -1,6 +1,6 @@
 import { Graphics } from 'pixi.js';
-import { offsetTrackPoint, pointAt } from '../../simulation/trackModel.js';
-import { destroyDisplayChildren } from './displayUtils.js';
+import { offsetTrackPoint, pointAt } from '../../simulation/track/trackModel.js';
+import { destroyDisplayChildren } from '../../rendering/displayLifecycle.js';
 
 export function renderTrackSurface({ drsLayer, sensorLayer, pitLaneStatusLayer, trackAsset, snapshot }) {
   destroyDisplayChildren(drsLayer);