@inventure71/paddockjs 1.0.0 → 2.0.0

package/src/app/camera/cameraGeometry.js

@@ -0,0 +1,176 @@
+import { WORLD } from '../../simulation/trackModel.js';
+import { clamp } from '../../simulation/simMath.js';
+import {
+  CAMERA_MAX_ZOOM,
+  CAMERA_MIN_ZOOM,
+  CAR_WORLD_LENGTH,
+  PIT_CAMERA_PADDING,
+  SHOW_ALL_BOTTOM_RESERVED,
+  SHOW_ALL_PADDING,
+  SHOW_ALL_TOP_RESERVED,
+  TRACK_CAMERA_PADDING,
+} from './cameraConstants.js';
+
+export function clampCameraScale(scale, anchorScale, minimumScale = null) {
+  const safeAnchor = Number.isFinite(anchorScale) && anchorScale > 0 ? anchorScale : 1;
+  const safeMinimum = Number.isFinite(minimumScale) && minimumScale > 0
+    ? minimumScale
+    : safeAnchor * CAMERA_MIN_ZOOM;
+  return clamp(scale, safeMinimum, safeAnchor * CAMERA_MAX_ZOOM);
+}
+
+export function getCameraBoundsFitScale(bounds, height, safeArea) {
+  if (!bounds) return null;
+  const fitWidth = Math.max(CAR_WORLD_LENGTH * 3, bounds.maxX - bounds.minX);
+  const fitHeight = Math.max(CAR_WORLD_LENGTH * 3, bounds.maxY - bounds.minY);
+  const scale = Math.min(safeArea.width / fitWidth, height / fitHeight);
+  return Number.isFinite(scale) && scale > 0 ? scale : null;
+}
+
+export function getTrackCameraBounds(track) {
+  const bounds = {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity,
+  };
+  const includePoint = (point) => {
+    if (!point || !Number.isFinite(point.x) || !Number.isFinite(point.y)) return;
+    bounds.minX = Math.min(bounds.minX, point.x);
+    bounds.minY = Math.min(bounds.minY, point.y);
+    bounds.maxX = Math.max(bounds.maxX, point.x);
+    bounds.maxY = Math.max(bounds.maxY, point.y);
+  };
+  const includeBounds = (box) => {
+    if (!box) return;
+    includePoint({ x: box.minX, y: box.minY });
+    includePoint({ x: box.maxX, y: box.maxY });
+  };
+
+  (track?.samples ?? []).forEach(includePoint);
+  includeBounds(track?.pitLane?.bounds);
+
+  const trackEdgePadding = Math.max(
+    TRACK_CAMERA_PADDING,
+    ((track?.width ?? 0) / 2) + (track?.kerbWidth ?? 0) + (track?.runoffWidth ?? 0),
+  );
+  return Number.isFinite(bounds.minX)
+    ? {
+        minX: bounds.minX - trackEdgePadding,
+        minY: bounds.minY - trackEdgePadding,
+        maxX: bounds.maxX + trackEdgePadding,
+        maxY: bounds.maxY + trackEdgePadding,
+      }
+    : null;
+}
+
+export function getTrackCameraTarget(trackBounds) {
+  if (!trackBounds) return { x: WORLD.width / 2, y: WORLD.height / 2 };
+
+  return {
+    x: (trackBounds.minX + trackBounds.maxX) / 2,
+    y: (trackBounds.minY + trackBounds.maxY) / 2,
+  };
+}
+
+export function getShowAllCameraFrame({ cars, cameraZoom, height, safeArea, screenCenterX, trackFitScale }) {
+  const bounds = cars.reduce((box, car) => ({
+    minX: Math.min(box.minX, car.x),
+    minY: Math.min(box.minY, car.y),
+    maxX: Math.max(box.maxX, car.x),
+    maxY: Math.max(box.maxY, car.y),
+  }), {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity,
+  });
+  const target = {
+    x: (bounds.minX + bounds.maxX) / 2,
+    y: (bounds.minY + bounds.maxY) / 2,
+  };
+  const fitWidth = Math.max(CAR_WORLD_LENGTH * 3, bounds.maxX - bounds.minX + SHOW_ALL_PADDING);
+  const fitHeight = Math.max(CAR_WORLD_LENGTH * 3, bounds.maxY - bounds.minY + SHOW_ALL_PADDING);
+  const safeHeight = Math.max(height * 0.48, height - SHOW_ALL_TOP_RESERVED - SHOW_ALL_BOTTOM_RESERVED);
+  const fitScale = Math.min(safeArea.width / fitWidth, safeHeight / fitHeight);
+  const scale = clampCameraScale(fitScale * cameraZoom, fitScale, trackFitScale);
+  return {
+    target,
+    scale,
+    screenX: screenCenterX,
+    screenY: height / 2,
+  };
+}
+
+export function getPitCameraBounds(pitLane) {
+  const bounds = {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity,
+  };
+  const includePoint = (point) => {
+    if (!point) return;
+    bounds.minX = Math.min(bounds.minX, point.x);
+    bounds.minY = Math.min(bounds.minY, point.y);
+    bounds.maxX = Math.max(bounds.maxX, point.x);
+    bounds.maxY = Math.max(bounds.maxY, point.y);
+  };
+  const includePoints = (points = []) => {
+    points.forEach(includePoint);
+  };
+
+  includePoint(pitLane?.entry?.lanePoint);
+  includePoints(pitLane?.mainLane?.points);
+  includePoints(pitLane?.workingLane?.points);
+  includePoint(pitLane?.exit?.lanePoint);
+  (pitLane?.boxes ?? []).forEach((box) => includePoints(box.corners));
+  (pitLane?.serviceAreas ?? []).forEach((area) => {
+    includePoints(area.corners);
+    includePoints(area.queueCorners);
+  });
+
+  return Number.isFinite(bounds.minX) ? bounds : null;
+}
+
+export function getPitCameraTarget(pitBounds) {
+  if (!pitBounds) return { x: WORLD.width / 2, y: WORLD.height / 2 };
+
+  return {
+    x: (pitBounds.minX + pitBounds.maxX) / 2,
+    y: (pitBounds.minY + pitBounds.maxY) / 2,
+  };
+}
+
+export function getPitCameraFrame({
+  pitBounds,
+  cameraZoom,
+  height,
+  baseScale,
+  safeArea,
+  screenCenterX,
+  minimumScale = null,
+}) {
+  const target = getPitCameraTarget(pitBounds);
+  const presetScale = clampCameraScale(baseScale * cameraZoom, baseScale, minimumScale);
+  if (!pitBounds) {
+    return {
+      target,
+      scale: presetScale,
+      screenX: screenCenterX,
+      screenY: height / 2,
+    };
+  }
+
+  const fitWidth = Math.max(CAR_WORLD_LENGTH * 3, pitBounds.maxX - pitBounds.minX + PIT_CAMERA_PADDING);
+  const fitHeight = Math.max(CAR_WORLD_LENGTH * 3, pitBounds.maxY - pitBounds.minY + PIT_CAMERA_PADDING);
+  const fitScale = Math.min(safeArea.width / fitWidth, height / fitHeight);
+  const scale = clampCameraScale(fitScale * cameraZoom, fitScale, minimumScale);
+
+  return {
+    target,
+    scale: Number.isFinite(scale) && scale > 0 ? scale : presetScale,
+    screenX: screenCenterX,
+    screenY: height / 2,
+  };
+}

package/src/app/domBindings.js

@@ -23,6 +23,10 @@ export function querySimulatorDom(root) {
     tyres: root.querySelectorAll('[data-telemetry-tyres]'),
     selectedDrs: root.querySelectorAll('[data-telemetry-drs]'),
     surface: root.querySelectorAll('[data-telemetry-surface]'),
+    grip: root.querySelectorAll('[data-telemetry-grip]'),
+    lateralG: root.querySelectorAll('[data-telemetry-lateral-g]'),
+    slipAngle: root.querySelectorAll('[data-telemetry-slip-angle]'),
+    stability: root.querySelectorAll('[data-telemetry-stability]'),
     gap: root.querySelectorAll('[data-telemetry-gap]'),
     leaderGap: root.querySelectorAll('[data-telemetry-leader-gap]'),
     currentSector: root.querySelectorAll('[data-telemetry-current-sector]'),

package/src/app/readouts/carOverviewRenderer.js

@@ -0,0 +1,109 @@
+import { DRIVER_STAT_DEFINITIONS, formatDriverNumber, VEHICLE_STAT_DEFINITIONS } from '../../data/championship.js';
+import { normalizeCustomFields } from '../../data/customFields.js';
+import { setText } from '../domBindings.js';
+
+const VEHICLE_OVERVIEW_FIELDS = [
+  ['power', 'Power'],
+  ['braking', 'Braking'],
+  ['aero', 'Aero'],
+  ['dragEfficiency', 'Drag'],
+  ['mechanicalGrip', 'Grip'],
+  ['weightControl', 'Weight'],
+];
+const DRIVER_OVERVIEW_FIELDS = [
+  ['pace', 'Pace'],
+  ['racecraft', 'Racecraft'],
+  ['aggression', 'Aggression'],
+  ['riskTolerance', 'Risk'],
+  ['patience', 'Patience'],
+  ['consistency', 'Consistency'],
+];
+
+export function getOverviewFields(driver, mode) {
+  if (mode === 'driver') {
+    const ratings = driver?.constructorArgs?.driver?.ratings ?? {};
+    return [
+      ...DRIVER_OVERVIEW_FIELDS.map(([key, label]) => ({
+        key,
+        label,
+        value: ratings[key] ?? DRIVER_STAT_DEFINITIONS[key]?.neutral,
+      })),
+      ...normalizeCustomFields([
+        ...(driver?.constructorArgs?.driver?.customFields ?? []),
+        ...(driver?.customFields ?? []),
+      ]),
+    ];
+  }
+
+  const ratings = driver?.constructorArgs?.vehicle?.ratings ?? driver?.vehicle?.ratings ?? {};
+  return [
+    ...VEHICLE_OVERVIEW_FIELDS.map(([key, label]) => ({
+      key,
+      label,
+      value: ratings[key] ?? VEHICLE_STAT_DEFINITIONS[key]?.neutral,
+    })),
+    ...normalizeCustomFields(driver?.vehicle?.customFields ?? driver?.constructorArgs?.vehicle?.customFields ?? []),
+  ];
+}
+
+export function renderCarDriverOverview({
+  readouts,
+  car,
+  driverById,
+  assets,
+  overviewMode,
+  lastOverviewRenderKey,
+}) {
+  if (!car || !readouts.carOverview) return lastOverviewRenderKey;
+  const driver = driverById.get(car.id);
+  const icon = car.icon ?? driver?.icon ?? car.code;
+  const driverNumber = formatDriverNumber(car.driverNumber ?? driver?.driverNumber);
+  const mode = overviewMode === 'driver' ? 'driver' : 'vehicle';
+  const fields = getOverviewFields(driver, mode);
+  const displayFields = fields.length > 0
+    ? fields
+    : [{ label: mode === 'driver' ? 'Driver fields' : 'Car fields', value: 'No custom fields' }];
+  const imageSrc = mode === 'driver'
+    ? (driver?.driverImage ?? driver?.portrait ?? driver?.avatar ?? assets.driverHelmet)
+    : assets.carOverview;
+  const overviewCode = mode === 'driver'
+    ? `${car.code} driver`
+    : `${driver?.vehicle?.name ?? car.vehicleName ?? car.code}`;
+  const overviewKey = JSON.stringify({
+    id: car.id,
+    mode,
+    color: car.color,
+    code: car.code,
+    icon,
+    driverNumber,
+    imageSrc,
+    overviewCode,
+    fields: displayFields.map((field) => [field.label, field.value]),
+  });
+  if (overviewKey === lastOverviewRenderKey) return lastOverviewRenderKey;
+
+  readouts.carOverview?.style.setProperty('--driver-color', car.color);
+  readouts.carOverviewDiagram?.style.setProperty('--driver-color', car.color);
+  if (readouts.carOverviewTitle) {
+    readouts.carOverviewTitle.textContent = mode === 'driver' ? 'Driver overview' : 'Car overview';
+  }
+  if (readouts.carOverviewCode) {
+    readouts.carOverviewCode.textContent = overviewCode;
+  }
+  if (readouts.carOverviewIcon) readouts.carOverviewIcon.textContent = icon;
+  if (readouts.carOverviewImage) {
+    readouts.carOverviewImage.src = imageSrc;
+  }
+  if (readouts.carOverviewNumber) readouts.carOverviewNumber.textContent = driverNumber;
+  if (readouts.carOverviewCoreStat) readouts.carOverviewCoreStat.textContent = mode === 'driver' ? 'Driver' : 'Car';
+  readouts.carOverviewFields.forEach((fieldNode, index) => {
+    const field = displayFields[index];
+    fieldNode.hidden = !field;
+    if (!field) return;
+    const labelNode = fieldNode.querySelector('[data-overview-field-label]');
+    const valueNode = fieldNode.querySelector('[data-overview-field-value]');
+    setText(labelNode, field.label);
+    setText(valueNode, field.value);
+  });
+  return overviewKey;
+}

package/src/app/readouts/controlStateRenderer.js

@@ -0,0 +1,37 @@
+import { CAMERA_PRESETS } from '../camera/cameraConstants.js';
+
+export function updateCameraControlButtons({ camera, cameraButtons, snapshot, hasPitCamera, isCameraModeAvailable }) {
+  if (camera.mode === 'pit' && !hasPitCamera(snapshot)) {
+    camera.mode = 'leader';
+    camera.zoom = CAMERA_PRESETS.leader;
+  }
+
+  cameraButtons.forEach((button) => {
+    const mode = button.dataset.cameraMode;
+    const isAvailable = isCameraModeAvailable(mode, snapshot);
+    if (mode === 'pit') {
+      button.hidden = !isAvailable;
+      button.disabled = !isAvailable;
+      button.setAttribute('aria-hidden', String(!isAvailable));
+    }
+
+    const isActive = !camera.free && isAvailable && mode === camera.mode;
+    button.classList.toggle('is-active', isActive);
+    button.setAttribute('aria-pressed', String(isActive));
+  });
+}
+
+export function updateToggleButtons(buttons, active) {
+  buttons?.forEach((button) => {
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+}
+
+export function updateModeButtons(buttons, activeMode, datasetKey) {
+  buttons.forEach((button) => {
+    const isActive = button.dataset[datasetKey] === activeMode;
+    button.classList.toggle('is-active', isActive);
+    button.setAttribute('aria-pressed', String(isActive));
+  });
+}

package/src/app/readouts/raceStatusRenderer.js

@@ -0,0 +1,133 @@
+import { getRaceControlStatusBanner } from '../../ui/raceControlStatusBanner.js';
+import { setText } from '../domBindings.js';
+import { escapeHtml } from './readoutFormatters.js';
+
+export function renderStartLights(readouts, startLightNodes, raceControl) {
+  const panel = readouts.startLights;
+  if (!panel) return;
+
+  const start = raceControl.start;
+  const visible = Boolean(start?.visible);
+  panel.hidden = !visible;
+  if (!visible) return;
+
+  startLightNodes.forEach((light, index) => {
+    light.classList.toggle('is-lit', index < (start.lightsLit ?? 0));
+  });
+  panel.classList.toggle('is-lights-out', raceControl.mode === 'green' && start.released);
+
+  if (readouts.startLightsLabel) {
+    readouts.startLightsLabel.textContent = raceControl.mode === 'green' && start.released
+      ? 'Lights out'
+      : `${start.lightsLit}/${start.lightCount}`;
+  }
+}
+
+export function renderRaceFinish({ readouts, snapshot, driverById, lastFinishClassificationMarkup }) {
+  const panel = readouts.finishPanel;
+  if (!panel) return lastFinishClassificationMarkup;
+
+  panel.hidden = !snapshot.raceControl.finished;
+  if (!snapshot.raceControl.finished) return lastFinishClassificationMarkup;
+
+  const winner = snapshot.raceControl.winner;
+  const winnerDriver = winner ? driverById.get(winner.id) : null;
+  const winnerName = winnerDriver?.name ?? winner?.name ?? 'Winner';
+  panel.style.setProperty('--driver-color', winner?.color ?? winnerDriver?.color ?? 'var(--red)');
+  setText(readouts.finishWinner, winnerName);
+
+  if (readouts.finishClassification) {
+    const topThree = (snapshot.raceControl.classification ?? []).slice(0, 3);
+    const classificationMarkup = topThree.map((entry) => `
+        <li>
+          <span>P${escapeHtml(entry.rank)}</span>
+          <strong>${escapeHtml(entry.timingCode ?? entry.code ?? entry.id)}</strong>
+        </li>
+      `).join('');
+    if (classificationMarkup !== lastFinishClassificationMarkup) {
+      readouts.finishClassification.innerHTML = classificationMarkup;
+      return classificationMarkup;
+    }
+  }
+
+  return lastFinishClassificationMarkup;
+}
+
+export function renderRaceStatusReadouts({
+  readouts,
+  startLightNodes,
+  snapshot,
+  camera,
+  fps,
+  activeDrs,
+  contactCount,
+  driverById,
+  lastFinishClassificationMarkup,
+}) {
+  const leader = snapshot.cars[0];
+
+  if (readouts.mode) {
+    const modeLabel = snapshot.raceControl.mode === 'safety-car'
+        ? 'SC'
+        : snapshot.raceControl.mode === 'red-flag'
+          ? 'RED'
+        : snapshot.raceControl.finished
+          ? 'FINISH'
+          : 'GREEN';
+    readouts.mode.textContent = modeLabel;
+    readouts.mode.style.color = snapshot.raceControl.mode === 'safety-car'
+      ? 'var(--yellow)'
+      : snapshot.raceControl.mode === 'red-flag'
+        ? 'var(--race-control-red)'
+        : snapshot.raceControl.mode === 'finished'
+          ? 'var(--red)'
+          : 'var(--green)';
+  }
+  if (readouts.lap) readouts.lap.textContent = `${leader?.lap ?? 1}/${snapshot.totalLaps}`;
+  if (readouts.towerLap) readouts.towerLap.textContent = leader?.lap ?? 1;
+  if (readouts.towerTotalLaps) readouts.towerTotalLaps.textContent = snapshot.totalLaps;
+  if (readouts.timingTower) {
+    readouts.timingTower.classList.toggle('is-safety-car', snapshot.raceControl.mode === 'safety-car');
+    readouts.timingTower.classList.toggle('is-red-flag', snapshot.raceControl.mode === 'red-flag');
+    readouts.timingTower.classList.toggle('is-pre-start', snapshot.raceControl.mode === 'pre-start');
+  }
+  if (readouts.towerRaceControlBanner) {
+    const raceControlBanner = getRaceControlStatusBanner(snapshot.raceControl.mode);
+    readouts.towerRaceControlBanner.hidden = !raceControlBanner;
+    readouts.towerRaceControlBanner.classList?.toggle?.('is-safety-car', raceControlBanner?.status === 'safety-car');
+    readouts.towerRaceControlBanner.classList?.toggle?.('is-red-flag', raceControlBanner?.status === 'red-flag');
+    if (raceControlBanner && readouts.towerRaceControlBanner.dataset) {
+      readouts.towerRaceControlBanner.dataset.raceControlStatus = raceControlBanner.status;
+    } else if (readouts.towerRaceControlBanner.dataset) {
+      delete readouts.towerRaceControlBanner.dataset.raceControlStatus;
+    }
+    if (raceControlBanner) {
+      setText(readouts.towerRaceControlKicker, raceControlBanner.kicker);
+      setText(readouts.towerRaceControlTitle, raceControlBanner.title);
+    }
+  }
+  if (readouts.drs) {
+    readouts.drs.textContent = ['safety-car', 'red-flag'].includes(snapshot.raceControl.mode)
+      ? 'DISABLED'
+      : activeDrs
+        ? `${activeDrs} OPEN`
+        : 'ARMED';
+  }
+  if (readouts.contacts) readouts.contacts.textContent = String(contactCount);
+  renderStartLights(readouts, startLightNodes, snapshot.raceControl);
+  if (readouts.camera) {
+    const zoom = Math.round(camera.zoom * 100);
+    const mode = camera.free ? 'FREE' : camera.mode.toUpperCase().replace('-', ' ');
+    readouts.camera.textContent = `${mode} ${zoom}%`;
+  }
+  if (readouts.fps) {
+    readouts.fps.textContent = fps.current ? `${fps.current}` : '--';
+  }
+
+  return renderRaceFinish({
+    readouts,
+    snapshot,
+    driverById,
+    lastFinishClassificationMarkup,
+  });
+}

package/src/app/readouts/readoutFormatters.js

@@ -0,0 +1,58 @@
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export function getTireClass(tire) {
+  return String(tire ?? 'M').toLowerCase();
+}
+
+export function formatTelemetryTime(value) {
+  if (!Number.isFinite(value)) return '--';
+  const clamped = Math.max(0, value);
+  if (clamped >= 60) {
+    const minutes = Math.floor(clamped / 60);
+    const seconds = clamped - minutes * 60;
+    return `${minutes}:${seconds.toFixed(3).padStart(6, '0')}`;
+  }
+  return `${clamped.toFixed(3)}s`;
+}
+
+export function setPerformanceClass(node, status) {
+  ['overall-best', 'personal-best', 'slower'].forEach((name) => {
+    node?.classList?.toggle?.(`is-${name}`, status === name);
+  });
+}
+
+export function formatLapGap(laps) {
+  const wholeLaps = Math.max(0, Math.floor(laps));
+  return `+${wholeLaps}`;
+}
+
+export function formatRaceGap(car, mode) {
+  const lapValue = mode === 'leader'
+    ? car.leaderGapLaps
+    : (car.intervalAheadLaps ?? car.gapAheadLaps);
+  if (Number.isFinite(lapValue) && lapValue > 0) return formatLapGap(lapValue);
+
+  const value = mode === 'leader'
+    ? car.leaderGapSeconds
+    : (car.intervalAheadSeconds ?? car.gapAheadSeconds);
+  return Number.isFinite(value) ? `+${Math.max(0, value).toFixed(3)}` : '--';
+}
+
+export function formatTelemetryGap(car, mode) {
+  const lapValue = mode === 'leader'
+    ? car.leaderGapLaps
+    : (car.intervalAheadLaps ?? car.gapAheadLaps);
+  if (Number.isFinite(lapValue) && lapValue > 0) return formatLapGap(lapValue);
+
+  const seconds = mode === 'leader'
+    ? car.leaderGapSeconds
+    : (car.intervalAheadSeconds ?? car.gapAheadSeconds);
+  return Number.isFinite(seconds) ? `${seconds.toFixed(2)}s` : '--';
+}

package/src/app/readouts/telemetryRenderer.js

@@ -0,0 +1,113 @@
+import { setTextAll, setText } from '../domBindings.js';
+import { clamp } from '../../simulation/simMath.js';
+import { formatDriverNumber } from '../../data/championship.js';
+import { formatTelemetryGap, formatTelemetryTime, setPerformanceClass } from './readoutFormatters.js';
+
+export function renderTelemetryReadouts({ readouts, car, driverById }) {
+  if (!car) return;
+  const driver = driverById.get(car.id);
+  const drsState = car.drsActive ? 'OPEN' : car.drsEligible ? 'READY' : 'OFF';
+  const surface = (car.surface ?? 'track').toUpperCase();
+
+  setTextAll(readouts.selectedCode, car.code);
+  readouts.selectedCode?.forEach?.((node) => {
+    node.style.color = car.color;
+  });
+  readouts.telemetrySectorBanners?.forEach?.((node) => {
+    node.style.setProperty('--driver-color', car.color);
+  });
+  setTextAll(readouts.selectedName, car.name);
+  setTextAll(readouts.speed, `${Math.round(car.speedKph)} km/h`);
+  setTextAll(readouts.throttle, `${Math.round(car.throttle * 100)}%`);
+  setTextAll(readouts.brake, `${Math.round(car.brake * 100)}%`);
+  setTextAll(readouts.tyres, `${Math.round(car.tireEnergy ?? 100)}%`);
+  setTextAll(readouts.selectedDrs, drsState);
+  setTextAll(readouts.surface, surface);
+  setTextAll(readouts.grip, `${Math.round(clamp(car.gripUsage ?? 0, 0, 9.99) * 100)}%`);
+  setTextAll(readouts.lateralG, `${(car.lateralG ?? 0).toFixed(1)}g`);
+  setTextAll(readouts.slipAngle, `${(((car.slipAngleRadians ?? 0) * 180) / Math.PI).toFixed(1)} deg`);
+  setTextAll(readouts.stability, String(car.stabilityState ?? 'stable').toUpperCase());
+  setTextAll(
+    readouts.gap,
+    car.rank === 1
+      ? '--'
+      : formatTelemetryGap(car, 'interval'),
+  );
+  setTextAll(
+    readouts.leaderGap,
+    car.rank === 1
+      ? '--'
+      : formatTelemetryGap(car, 'leader'),
+  );
+}
+
+export function renderLapTelemetry(readouts, telemetry) {
+  if (!telemetry) return;
+
+  setTextAll(readouts.currentSector, `S${telemetry.currentSector ?? 1}`);
+  setTextAll(readouts.completedLaps, `${telemetry.completedLaps ?? 0} laps`);
+  setTextAll(readouts.currentLapTime, formatTelemetryTime(telemetry.currentLapTime));
+  setTextAll(readouts.lastLapTime, formatTelemetryTime(telemetry.lastLapTime));
+  setTextAll(readouts.bestLapTime, formatTelemetryTime(telemetry.bestLapTime));
+
+  readouts.telemetrySectorBars?.forEach((bar) => {
+    const sector = Number(bar.dataset.telemetrySectorBar);
+    const index = sector - 1;
+    const activeIndex = clamp((telemetry.currentSector ?? 1) - 1, 0, 2);
+    const isActive = index === activeIndex;
+    const isCompletedCurrentSector = index < activeIndex;
+    const hasLiveProgress = Array.isArray(telemetry.sectorProgress);
+    const progress = index > activeIndex
+      ? 0
+      : hasLiveProgress
+      ? telemetry.sectorProgress[index]
+      : isActive
+        ? telemetry.currentSectorProgress
+        : isCompletedCurrentSector && Number.isFinite(telemetry.currentSectors?.[index])
+          ? 1
+          : 0;
+    const fill = clamp((progress ?? 0) * 100, 0, 100);
+    const sectorComplete = fill >= 99.9;
+    const fillValue = `${fill.toFixed(1)}%`;
+    if (bar.style.getPropertyValue('--sector-fill') !== fillValue) {
+      bar.style.setProperty('--sector-fill', fillValue);
+    }
+    bar.classList.toggle('is-active', isActive);
+    bar.classList.toggle('is-complete', sectorComplete);
+    setPerformanceClass(bar, isCompletedCurrentSector ? telemetry.sectorPerformance?.current?.[index] : null);
+  });
+
+  readouts.telemetrySectorTimes?.forEach((node) => {
+    const sector = Number(node.dataset.telemetrySectorTime);
+    const index = sector - 1;
+    const activeIndex = clamp((telemetry.currentSector ?? 1) - 1, 0, 2);
+    const isActive = index === activeIndex;
+    const isCompletedCurrentSector = index < activeIndex;
+    const hasLiveSectors = Array.isArray(telemetry.liveSectors);
+    const value = index > activeIndex
+      ? null
+      : hasLiveSectors
+        ? isActive
+          ? telemetry.currentSectorElapsed ?? telemetry.liveSectors[index]
+          : telemetry.liveSectors[index]
+        : isActive && !Number.isFinite(telemetry.currentSectors?.[index])
+          ? telemetry.currentSectorElapsed
+          : isCompletedCurrentSector
+            ? telemetry.currentSectors?.[index]
+            : null;
+    setText(node, formatTelemetryTime(value));
+    setPerformanceClass(node, isCompletedCurrentSector ? telemetry.sectorPerformance?.current?.[index] : null);
+  });
+
+  readouts.telemetrySectorLast?.forEach((node) => {
+    const index = Number(node.dataset.telemetrySectorLast) - 1;
+    setText(node, formatTelemetryTime(telemetry.lastSectors?.[index]));
+    setPerformanceClass(node, telemetry.sectorPerformance?.last?.[index]);
+  });
+
+  readouts.telemetrySectorBest?.forEach((node) => {
+    const index = Number(node.dataset.telemetrySectorBest) - 1;
+    setText(node, formatTelemetryTime(telemetry.bestSectors?.[index]));
+    setPerformanceClass(node, telemetry.sectorPerformance?.best?.[index]);
+  });
+}