@inventure71/paddockjs 0.1.0 → 0.3.0

package/src/app/F1SimulatorApp.js

@@ -2,14 +2,16 @@ import { Application, Assets, Container, Graphics, Sprite, Texture } from 'pixi.
 import { DRIVER_STAT_DEFINITIONS, formatDriverNumber, VEHICLE_STAT_DEFINITIONS } from '../data/championship.js';
 import { applyPaddockThemeCssVariables } from '../config/defaultOptions.js';
 import { normalizeCustomFields } from '../data/customFields.js';
+import { getCarRayOrigin, getCarRayVector } from '../environment/sensors.js';
 import { ProceduralTrackAsset } from '../rendering/proceduralTrackAsset.js';
 import { createRenderSnapshot } from '../rendering/renderSnapshot.js';
-import { createRaceSimulation } from '../simulation/raceSimulation.js';
+import { createRaceSimulation, FIXED_STEP } from '../simulation/raceSimulation.js';
 import { clamp } from '../simulation/simMath.js';
 import { offsetTrackPoint, pointAt, WORLD } from '../simulation/trackModel.js';
-import { querySimulatorDom, setText } from './domBindings.js';
+import { metersToSimUnits } from '../simulation/units.js';
+import { createBrowserExpertAdapter } from './BrowserExpertAdapter.js';
+import { querySimulatorDom, setText, setTextAll } from './domBindings.js';
 
-const FIXED_STEP = 1 / 60;
 const TARGET_RENDER_FPS = 60;
 const TARGET_FRAME_MS = 1000 / TARGET_RENDER_FPS;
 const FRAME_PACING_EPSILON_MS = 0.75;
@@ -34,6 +36,9 @@ const SHOW_ALL_TOP_RESERVED = 92;
 const SHOW_ALL_BOTTOM_RESERVED = 132;
 const DRS_TRAIL_TTL = 0.68;
 const DRS_TRAIL_MIN_DISTANCE = 10;
+const SENSOR_RAY_TRACK_COLOR = 0xf1c65b;
+const SENSOR_RAY_TRACK_ENTRY_COLOR = 0x68d8ff;
+const SENSOR_RAY_CAR_COLOR = 0xff4d5f;
 const RACE_DATA_SELECTED_VISIBLE_MS = 5200;
 const RADIO_BREAK_MIN_MS = 4800;
 const RADIO_BREAK_MAX_MS = 11800;
@@ -84,6 +89,23 @@ function getTireClass(tire) {
   return String(tire ?? 'M').toLowerCase();
 }
 
+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`;
+}
+
+function setPerformanceClass(node, status) {
+  ['overall-best', 'personal-best', 'slower'].forEach((name) => {
+    node?.classList?.toggle?.(`is-${name}`, status === name);
+  });
+}
+
 function colorToTint(color) {
   if (TINT_BY_COLOR.has(color)) return TINT_BY_COLOR.get(color);
   const tint = Number.parseInt(String(color ?? '').replace('#', ''), 16);
@@ -99,6 +121,43 @@ function smoothAngle(current, target, amount) {
   return current + diff * amount;
 }
 
+function destroyDisplayChildren(container) {
+  container?.removeChildren?.().forEach((child) => {
+    child.destroy?.({ children: true, texture: false, textureSource: false });
+  });
+}
+
+function expertVisualizesRays(expertOptions) {
+  const setting = expertOptions?.visualizeSensors;
+  if (setting === true) return true;
+  if (!setting || setting === false) return false;
+  return Boolean(setting.rays);
+}
+
+function pointFromRay(origin, ray, distance) {
+  return {
+    x: origin.x + ray.x * distance,
+    y: origin.y + ray.y * distance,
+  };
+}
+
+function hasOwnOption(options, key) {
+  return Object.hasOwn(options ?? {}, key);
+}
+
+function expertOptionsChanged(nextExpertOptions, currentExpertOptions) {
+  return nextExpertOptions !== currentExpertOptions;
+}
+
+function assetSetsEqual(first = {}, second = {}) {
+  const firstTrackTextures = first.trackTextures ?? {};
+  const secondTrackTextures = second.trackTextures ?? {};
+  const assetKeys = ['car', 'carOverview', 'driverHelmet', 'safetyCar', 'broadcastPanel', 'f1Logo'];
+  const textureKeys = new Set([...Object.keys(firstTrackTextures), ...Object.keys(secondTrackTextures)]);
+  return assetKeys.every((key) => first[key] === second[key]) &&
+    [...textureKeys].every((key) => firstTrackTextures[key] === secondTrackTextures[key]);
+}
+
 export class F1SimulatorApp {
   constructor(root, options) {
     this.root = root;
@@ -117,12 +176,15 @@ export class F1SimulatorApp {
     this.visibilityChangeHandler = null;
     this.visibilityObserver = null;
     this.tickerCallback = null;
+    this.expert = null;
+    this.expertMode = Boolean(options.expert?.enabled);
     this.sim = null;
     this.app = null;
     this.worldLayer = null;
     this.trackAsset = null;
     this.drsLayer = null;
     this.trailLayer = null;
+    this.sensorLayer = null;
     this.carLayer = null;
     this.textures = {};
     this.carSprites = new Map();
@@ -155,6 +217,9 @@ export class F1SimulatorApp {
     this.lastDomUpdateTime = 0;
     this.lastTimingRenderTime = 0;
     this.lastTimingRaceMode = null;
+    this.lastTimingMarkup = null;
+    this.lastOverviewRenderKey = null;
+    this.lastFinishClassificationMarkup = null;
     this.runtimeViewportVisible = true;
     this.runtimeDocumentVisible = typeof document === 'undefined' ? true : document.visibilityState !== 'hidden';
     this.runtimeTickerRunning = true;
@@ -167,6 +232,9 @@ export class F1SimulatorApp {
     this.emittedRaceEventKeys = new Set();
     this.raceFinishEmitted = false;
     this.timingGapMode = 'interval';
+    this.telemetryDrawerOpen = Boolean(
+      this.readouts.telemetryDrawerWorkbench?.classList?.contains?.('is-telemetry-open'),
+    );
   }
 
   async init() {
@@ -190,29 +258,36 @@ export class F1SimulatorApp {
       this.worldLayer = new Container();
       this.drsLayer = new Container();
       this.trailLayer = new Graphics();
+      this.sensorLayer = new Graphics();
       this.carLayer = new Container();
       this.app.stage.addChild(this.worldLayer);
 
       await this.loadAssets();
       this.trackAsset = new ProceduralTrackAsset({ textures: this.textures, world: WORLD });
-      this.worldLayer.addChild(this.trackAsset.container, this.drsLayer, this.trailLayer, this.carLayer);
+      this.worldLayer.addChild(this.trackAsset.container, this.drsLayer, this.trailLayer, this.sensorLayer, this.carLayer);
       this.createCars();
       this.bindControls();
       this.renderTrack();
       const snapshot = this.sim.snapshot();
       this.updateDom(snapshot);
+      if (this.expertMode) {
+        this.expert = createBrowserExpertAdapter(this, this.options.expert);
+      }
       this.completeComponentLoading();
       this.emitHostCallback('onLoadingChange', { loading: false, phase: 'ready' });
       this.emitHostCallback('onReady', { snapshot });
       this.resizeHandler = () => this.applyCamera(this.sim.snapshot());
       window.addEventListener('resize', this.resizeHandler, { signal: this.abortController.signal });
-      this.tickerCallback = () => this.tick();
-      this.app.ticker.add(this.tickerCallback);
       this.observeLayoutResize();
-      this.observeRuntimeVisibility();
+      if (!this.expertMode) {
+        this.tickerCallback = () => this.tick();
+        this.app.ticker.add(this.tickerCallback);
+        this.observeRuntimeVisibility();
+      }
     } catch (error) {
       this.emitHostCallback('onLoadingChange', { loading: false, phase: 'error' });
       this.emitHostCallback('onError', error, { phase: 'init' });
+      this.destroy();
       throw error;
     }
   }
@@ -241,12 +316,12 @@ export class F1SimulatorApp {
     });
   }
 
-  createRaceSimulation() {
+  createRaceSimulation(options = this.options) {
     return createRaceSimulation({
-      seed: this.options.seed,
-      trackSeed: this.trackSeed,
-      drivers: this.drivers,
-      totalLaps: this.options.totalLaps,
+      seed: options.seed,
+      trackSeed: options.trackSeed ?? this.trackSeed,
+      drivers: options.drivers ?? this.drivers,
+      totalLaps: options.totalLaps,
     });
   }
 
@@ -391,6 +466,27 @@ export class F1SimulatorApp {
       if (!driver) return;
       this.options.onDriverOpen?.(driver);
     }, eventOptions);
+
+    this.readouts.telemetryDrawerToggle?.addEventListener('click', () => {
+      this.setTelemetryDrawerOpen(!this.telemetryDrawerOpen);
+    }, eventOptions);
+  }
+
+  setTelemetryDrawerOpen(open) {
+    this.telemetryDrawerOpen = Boolean(open);
+    this.readouts.telemetryDrawerWorkbench?.classList?.toggle?.('is-telemetry-open', this.telemetryDrawerOpen);
+    if (this.telemetryDrawerOpen) {
+      this.readouts.telemetryDrawer?.removeAttribute?.('inert');
+      this.readouts.telemetryDrawer?.setAttribute?.('aria-hidden', 'false');
+    } else {
+      this.readouts.telemetryDrawer?.setAttribute?.('inert', '');
+      this.readouts.telemetryDrawer?.setAttribute?.('aria-hidden', 'true');
+    }
+    this.readouts.telemetryDrawerToggle?.setAttribute?.('aria-expanded', String(this.telemetryDrawerOpen));
+    if (this.readouts.telemetryDrawerToggle) {
+      this.readouts.telemetryDrawerToggle.textContent = this.telemetryDrawerOpen ? 'Close telemetry' : 'Telemetry';
+    }
+    this.invalidateCameraSafeArea();
   }
 
   observeLayoutResize() {
@@ -436,6 +532,7 @@ export class F1SimulatorApp {
   }
 
   syncRuntimeTicker() {
+    if (this.expertMode) return;
     if (!this.app?.ticker) return;
 
     const shouldRun = this.runtimeViewportVisible && this.runtimeDocumentVisible;
@@ -459,6 +556,7 @@ export class F1SimulatorApp {
   }
 
   tick() {
+    if (this.expertMode) return;
     const now = performance.now();
     if (now < this.nextGameFrameTime - FRAME_PACING_EPSILON_MS) return;
 
@@ -501,8 +599,20 @@ export class F1SimulatorApp {
     }
   }
 
+  renderExpertFrame(snapshot = this.sim?.snapshot(), { observation } = {}) {
+    if (!snapshot) return;
+    const renderSnapshot = createRenderSnapshot(snapshot, 0);
+    this.applyCamera(renderSnapshot);
+    this.renderDrsTrails(renderSnapshot);
+    this.renderExpertSensorRays(renderSnapshot, observation);
+    this.renderCars(renderSnapshot);
+    this.updateDom(snapshot, { emitLifecycle: false });
+    this.lastDomUpdateTime = performance.now();
+  }
+
   renderTrack() {
-    this.drsLayer.removeChildren();
+    destroyDisplayChildren(this.drsLayer);
+    this.sensorLayer?.clear();
     const snapshot = this.sim.snapshot();
     const track = snapshot.track;
 
@@ -558,6 +668,60 @@ export class F1SimulatorApp {
     }
   }
 
+  renderExpertSensorRays(snapshot, observation) {
+    if (!this.sensorLayer) return;
+    this.sensorLayer.clear();
+    if (!this.expertMode || !expertVisualizesRays(this.options.expert)) return;
+
+    const controlledDrivers = this.options.expert?.controlledDrivers ?? [];
+    if (!controlledDrivers.length || !observation) return;
+
+    const carsById = new Map(snapshot.cars.map((car) => [car.id, car]));
+    controlledDrivers.forEach((driverId) => {
+      const car = carsById.get(driverId);
+      const rays = observation?.[driverId]?.object?.rays;
+      if (!car || !Array.isArray(rays) || rays.length === 0) return;
+
+      const origin = getCarRayOrigin(car);
+
+      rays.forEach((ray) => {
+        const rayVector = getCarRayVector(car, Number(ray.angleDegrees) || 0);
+        const totalDistanceMeters = Math.max(0, Number(ray.lengthMeters) || 0);
+        const trackDistanceMeters = Math.max(0, Number(ray.track?.distanceMeters) || totalDistanceMeters);
+        const carDistanceMeters = Math.max(0, Number(ray.car?.distanceMeters) || totalDistanceMeters);
+        const trackHit = Boolean(ray.track?.hit) && trackDistanceMeters <= totalDistanceMeters;
+        const carHit = Boolean(ray.car?.hit) && carDistanceMeters <= totalDistanceMeters;
+        const fullEnd = pointFromRay(origin, rayVector, metersToSimUnits(totalDistanceMeters));
+
+        this.sensorLayer
+          .moveTo(origin.x, origin.y)
+          .lineTo(fullEnd.x, fullEnd.y)
+          .stroke({ width: 2, color: 0xffffff, alpha: 0.18, cap: 'round' });
+
+        if (!trackHit && !carHit) return;
+
+        const carIsClosest = carHit && (!trackHit || carDistanceMeters <= trackDistanceMeters);
+        const hitDistanceMeters = carIsClosest ? carDistanceMeters : trackDistanceMeters;
+        const hitEnd = pointFromRay(origin, rayVector, metersToSimUnits(hitDistanceMeters));
+        const hitColor = carIsClosest
+          ? SENSOR_RAY_CAR_COLOR
+          : ray.track?.kind === 'entry'
+            ? SENSOR_RAY_TRACK_ENTRY_COLOR
+            : SENSOR_RAY_TRACK_COLOR;
+
+        this.sensorLayer
+          .moveTo(origin.x, origin.y)
+          .lineTo(hitEnd.x, hitEnd.y)
+          .stroke({ width: carIsClosest ? 5 : 3.4, color: hitColor, alpha: carIsClosest ? 0.9 : 0.76, cap: 'round' });
+        this.sensorLayer
+          .circle(hitEnd.x, hitEnd.y, carIsClosest ? 7 : 5)
+          .fill({ color: hitColor, alpha: 0.92 })
+          .circle(hitEnd.x, hitEnd.y, carIsClosest ? 10 : 8)
+          .stroke({ width: 1.5, color: 0x10131a, alpha: 0.72 });
+      });
+    });
+  }
+
   renderDrsTrails(snapshot) {
     if (!this.trailLayer) return;
 
@@ -637,8 +801,17 @@ export class F1SimulatorApp {
       this.cameraSafeAreaCache = { width, safeArea };
       return safeArea;
     }
-    const overlapsCanvas = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
-    if (!overlapsCanvas) {
+    const overlapsCanvasHorizontally = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
+    const hasVerticalBounds = Number.isFinite(canvasRect.top) &&
+      Number.isFinite(canvasRect.bottom) &&
+      Number.isFinite(towerRect.top) &&
+      Number.isFinite(towerRect.bottom);
+    const overlapsCanvasVertically = !hasVerticalBounds ||
+      (towerRect.bottom > canvasRect.top && towerRect.top < canvasRect.bottom);
+    const canvasWidth = Math.max(1, canvasRect.right - canvasRect.left || width);
+    const towerWidth = Math.max(0, towerRect.right - towerRect.left);
+    const isSideGutter = towerWidth < canvasWidth * 0.6;
+    if (!overlapsCanvasHorizontally || !overlapsCanvasVertically || !isSideGutter) {
       const safeArea = { left: 0, width };
       this.cameraSafeAreaCache = { width, safeArea };
       return safeArea;
@@ -837,12 +1010,16 @@ export class F1SimulatorApp {
 
     if (this.readouts.finishClassification) {
       const topThree = (snapshot.raceControl.classification ?? []).slice(0, 3);
-      this.readouts.finishClassification.innerHTML = topThree.map((entry) => `
+      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 !== this.lastFinishClassificationMarkup) {
+        this.readouts.finishClassification.innerHTML = classificationMarkup;
+        this.lastFinishClassificationMarkup = classificationMarkup;
+      }
     }
   }
 
@@ -903,7 +1080,7 @@ export class F1SimulatorApp {
   renderTiming(cars, raceMode) {
     if (!this.timingList) return;
     this.syncTimingGapModeControls();
-    this.timingList.innerHTML = cars.map((car) => {
+    const timingMarkup = cars.map((car) => {
       const driver = this.driverById.get(car.id);
       let gap = 'Leader';
       if (raceMode === 'finished') {
@@ -935,6 +1112,10 @@ export class F1SimulatorApp {
         </li>
       `;
     }).join('');
+    if (timingMarkup !== this.lastTimingMarkup) {
+      this.timingList.innerHTML = timingMarkup;
+      this.lastTimingMarkup = timingMarkup;
+    }
   }
 
   formatTimingGap(car) {
@@ -962,22 +1143,27 @@ export class F1SimulatorApp {
     const drsState = car.drsActive ? 'OPEN' : car.drsEligible ? 'READY' : 'OFF';
     const surface = (car.surface ?? 'track').toUpperCase();
 
-    setText(this.readouts.selectedCode, car.code);
-    if (this.readouts.selectedCode) this.readouts.selectedCode.style.color = car.color;
-    setText(this.readouts.selectedName, car.name);
-    setText(this.readouts.speed, `${Math.round(car.speedKph)} km/h`);
-    setText(this.readouts.throttle, `${Math.round(car.throttle * 100)}%`);
-    setText(this.readouts.brake, `${Math.round(car.brake * 100)}%`);
-    setText(this.readouts.tyres, `${Math.round(car.tireEnergy ?? 100)}%`);
-    setText(this.readouts.selectedDrs, drsState);
-    setText(this.readouts.surface, surface);
-    setText(
+    setTextAll(this.readouts.selectedCode, car.code);
+    this.readouts.selectedCode?.forEach?.((node) => {
+      node.style.color = car.color;
+    });
+    this.readouts.telemetrySectorBanners?.forEach?.((node) => {
+      node.style.setProperty('--driver-color', car.color);
+    });
+    setTextAll(this.readouts.selectedName, car.name);
+    setTextAll(this.readouts.speed, `${Math.round(car.speedKph)} km/h`);
+    setTextAll(this.readouts.throttle, `${Math.round(car.throttle * 100)}%`);
+    setTextAll(this.readouts.brake, `${Math.round(car.brake * 100)}%`);
+    setTextAll(this.readouts.tyres, `${Math.round(car.tireEnergy ?? 100)}%`);
+    setTextAll(this.readouts.selectedDrs, drsState);
+    setTextAll(this.readouts.surface, surface);
+    setTextAll(
       this.readouts.gap,
       car.rank === 1 || !Number.isFinite(car.gapAheadSeconds)
         ? '--'
         : `${car.gapAheadSeconds.toFixed(2)}s`,
     );
-    setText(
+    setTextAll(
       this.readouts.leaderGap,
       car.rank === 1 || !Number.isFinite(car.leaderGapSeconds)
         ? '--'
@@ -985,6 +1171,56 @@ export class F1SimulatorApp {
     );
 
     this.renderCarDriverOverview(car);
+    this.renderLapTelemetry(car.lapTelemetry);
+  }
+
+  renderLapTelemetry(telemetry) {
+    if (!telemetry) return;
+
+    setTextAll(this.readouts.currentSector, `S${telemetry.currentSector ?? 1}`);
+    setTextAll(this.readouts.completedLaps, `${telemetry.completedLaps ?? 0} laps`);
+    setTextAll(this.readouts.currentLapTime, formatTelemetryTime(telemetry.currentLapTime));
+    setTextAll(this.readouts.lastLapTime, formatTelemetryTime(telemetry.lastLapTime));
+    setTextAll(this.readouts.bestLapTime, formatTelemetryTime(telemetry.bestLapTime));
+
+    this.readouts.telemetrySectorBars?.forEach((bar) => {
+      const sector = Number(bar.dataset.telemetrySectorBar);
+      const index = sector - 1;
+      const isActive = sector === telemetry.currentSector;
+      const sectorComplete = Number.isFinite(telemetry.currentSectors?.[index]);
+      const fill = sectorComplete
+        ? 100
+        : (isActive ? clamp((telemetry.currentSectorProgress ?? 0) * 100, 0, 100) : 0);
+      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, telemetry.sectorPerformance?.current?.[index]);
+    });
+
+    this.readouts.telemetrySectorTimes?.forEach((node) => {
+      const sector = Number(node.dataset.telemetrySectorTime);
+      const index = sector - 1;
+      const value = sector === telemetry.currentSector && !Number.isFinite(telemetry.currentSectors?.[index])
+        ? telemetry.currentSectorElapsed
+        : telemetry.currentSectors?.[index];
+      setText(node, formatTelemetryTime(value));
+      setPerformanceClass(node, telemetry.sectorPerformance?.current?.[index]);
+    });
+
+    this.readouts.telemetrySectorLast?.forEach((node) => {
+      const index = Number(node.dataset.telemetrySectorLast) - 1;
+      setText(node, formatTelemetryTime(telemetry.lastSectors?.[index]));
+      setPerformanceClass(node, telemetry.sectorPerformance?.last?.[index]);
+    });
+
+    this.readouts.telemetrySectorBest?.forEach((node) => {
+      const index = Number(node.dataset.telemetrySectorBest) - 1;
+      setText(node, formatTelemetryTime(telemetry.bestSectors?.[index]));
+      setPerformanceClass(node, telemetry.sectorPerformance?.best?.[index]);
+    });
   }
 
   getOverviewFields(driver, mode) {
@@ -1024,6 +1260,25 @@ export class F1SimulatorApp {
     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 ?? this.assets.driverHelmet)
+      : this.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 === this.lastOverviewRenderKey) return;
+    this.lastOverviewRenderKey = overviewKey;
 
     this.readouts.carOverview?.style.setProperty('--driver-color', car.color);
     this.readouts.carOverviewDiagram?.style.setProperty('--driver-color', car.color);
@@ -1031,15 +1286,11 @@ export class F1SimulatorApp {
       this.readouts.carOverviewTitle.textContent = mode === 'driver' ? 'Driver overview' : 'Car overview';
     }
     if (this.readouts.carOverviewCode) {
-      this.readouts.carOverviewCode.textContent = mode === 'driver'
-        ? `${car.code} driver`
-        : `${driver?.vehicle?.name ?? car.vehicleName ?? car.code}`;
+      this.readouts.carOverviewCode.textContent = overviewCode;
     }
     if (this.readouts.carOverviewIcon) this.readouts.carOverviewIcon.textContent = icon;
     if (this.readouts.carOverviewImage) {
-      this.readouts.carOverviewImage.src = mode === 'driver'
-        ? (driver?.driverImage ?? driver?.portrait ?? driver?.avatar ?? this.assets.driverHelmet)
-        : this.assets.carOverview;
+      this.readouts.carOverviewImage.src = imageSrc;
     }
     if (this.readouts.carOverviewNumber) this.readouts.carOverviewNumber.textContent = driverNumber;
     if (this.readouts.carOverviewCoreStat) this.readouts.carOverviewCoreStat.textContent = mode === 'driver' ? 'Driver' : 'Car';
@@ -1222,7 +1473,7 @@ export class F1SimulatorApp {
     });
   }
 
-  restart(nextOptions = {}) {
+  applyExpertOptions(nextOptions = {}) {
     this.options = {
       ...this.options,
       ...nextOptions,
@@ -1244,17 +1495,36 @@ export class F1SimulatorApp {
       },
     };
     this.assets = this.options.assets;
-    this.raceDataBannerConfig = this.options.ui?.raceDataBanners ?? this.raceDataBannerConfig;
-    this.root.style.setProperty('--broadcast-panel-surface', `url('${this.assets.broadcastPanel}')`);
-    applyPaddockThemeCssVariables(this.root, this.options.theme);
+    if (hasOwnOption(nextOptions, 'trackSeed')) {
+      this.trackSeed = this.options.trackSeed ?? createMountTrackSeed();
+    }
     if (nextOptions.drivers) {
       this.drivers = nextOptions.drivers;
       this.driverById = new Map(this.drivers.map((driver) => [driver.id, driver]));
       this.root.style.setProperty('--paddock-entry-count', String(this.drivers.length));
       this.createCars();
     }
+  }
+
+  restart(nextOptions = {}) {
+    if (hasOwnOption(nextOptions, 'assets') && !assetSetsEqual(nextOptions.assets, this.options.assets)) {
+      throw new Error('PaddockJS restart() does not support changing assets. Destroy and mount a new simulator with the new assets.');
+    }
+    if (hasOwnOption(nextOptions, 'expert') && expertOptionsChanged(nextOptions.expert, this.options.expert)) {
+      throw new Error('PaddockJS restart() does not support changing expert mode. Destroy and mount a new simulator with the new expert options.');
+    }
+    this.applyExpertOptions(nextOptions);
+    this.raceDataBannerConfig = this.options.ui?.raceDataBanners ?? this.raceDataBannerConfig;
+    this.root.style.setProperty('--broadcast-panel-surface', `url('${this.assets.broadcastPanel}')`);
+    applyPaddockThemeCssVariables(this.root, this.options.theme);
     this.sim = this.createRaceSimulation();
+    if (this.expertMode) {
+      this.expert = createBrowserExpertAdapter(this, this.options.expert);
+    }
     this.selectedId = this.drivers[0]?.id ?? null;
+    this.lastTimingMarkup = null;
+    this.lastOverviewRenderKey = null;
+    this.lastFinishClassificationMarkup = null;
     this.resetRaceDataBannerState(performance.now());
     this.lastTimingRenderTime = 0;
     this.lastTimingRaceMode = null;

package/src/app/domBindings.js

@@ -13,16 +13,26 @@ export function querySimulatorDom(root) {
     contacts: root.querySelector('[data-contact-readout]'),
     camera: root.querySelector('[data-camera-readout]'),
     fps: root.querySelector('[data-fps-readout]'),
-    selectedCode: root.querySelector('[data-selected-code]'),
-    selectedName: root.querySelector('[data-selected-name]'),
-    speed: root.querySelector('[data-telemetry-speed]'),
-    throttle: root.querySelector('[data-telemetry-throttle]'),
-    brake: root.querySelector('[data-telemetry-brake]'),
-    tyres: root.querySelector('[data-telemetry-tyres]'),
-    selectedDrs: root.querySelector('[data-telemetry-drs]'),
-    surface: root.querySelector('[data-telemetry-surface]'),
-    gap: root.querySelector('[data-telemetry-gap]'),
-    leaderGap: root.querySelector('[data-telemetry-leader-gap]'),
+    selectedCode: root.querySelectorAll('[data-selected-code]'),
+    selectedName: root.querySelectorAll('[data-selected-name]'),
+    speed: root.querySelectorAll('[data-telemetry-speed]'),
+    throttle: root.querySelectorAll('[data-telemetry-throttle]'),
+    brake: root.querySelectorAll('[data-telemetry-brake]'),
+    tyres: root.querySelectorAll('[data-telemetry-tyres]'),
+    selectedDrs: root.querySelectorAll('[data-telemetry-drs]'),
+    surface: root.querySelectorAll('[data-telemetry-surface]'),
+    gap: root.querySelectorAll('[data-telemetry-gap]'),
+    leaderGap: root.querySelectorAll('[data-telemetry-leader-gap]'),
+    currentSector: root.querySelectorAll('[data-telemetry-current-sector]'),
+    completedLaps: root.querySelectorAll('[data-telemetry-completed-laps]'),
+    currentLapTime: root.querySelectorAll('[data-telemetry-current-lap-time]'),
+    lastLapTime: root.querySelectorAll('[data-telemetry-last-lap-time]'),
+    bestLapTime: root.querySelectorAll('[data-telemetry-best-lap-time]'),
+    telemetrySectorBars: root.querySelectorAll('[data-telemetry-sector-bar]'),
+    telemetrySectorTimes: root.querySelectorAll('[data-telemetry-sector-time]'),
+    telemetrySectorLast: root.querySelectorAll('[data-telemetry-sector-last]'),
+    telemetrySectorBest: root.querySelectorAll('[data-telemetry-sector-best]'),
+    telemetrySectorBanners: root.querySelectorAll('[data-telemetry-sector-banner]'),
     carOverview: root.querySelector('[data-paddock-component="car-driver-overview"]'),
     carOverviewTitle: root.querySelector('[data-car-overview-title]'),
     carOverviewDiagram: root.querySelector('.car-overview-diagram'),
@@ -32,6 +42,9 @@ export function querySimulatorDom(root) {
     carOverviewNumber: root.querySelector('[data-car-overview-number]'),
     carOverviewCoreStat: root.querySelector('[data-car-overview-core-stat]'),
     carOverviewFields: root.querySelectorAll('[data-overview-field]'),
+    telemetryDrawerWorkbench: root.querySelector('[data-race-telemetry-drawer]'),
+    telemetryDrawer: root.querySelector('[data-telemetry-drawer]'),
+    telemetryDrawerToggle: root.querySelector('[data-telemetry-drawer-toggle]'),
     raceDataPanel: root.querySelector('[data-race-data-panel]'),
     raceDataKicker: root.querySelector('[data-race-data-kicker]'),
     raceDataTitle: root.querySelector('[data-race-data-title]'),
@@ -60,5 +73,16 @@ export function querySimulatorDom(root) {
 }
 
 export function setText(node, value) {
-  if (node) node.textContent = value;
+  if (!node) return;
+  const nextValue = String(value ?? '');
+  if (node.textContent !== nextValue) node.textContent = nextValue;
+}
+
+export function setTextAll(nodes, value) {
+  if (!nodes) return;
+  if (typeof nodes.forEach === 'function') {
+    nodes.forEach((node) => setText(node, value));
+    return;
+  }
+  setText(nodes, value);
 }