@inventure71/paddockjs 2.0.0 → 3.0.0

package/src/app/F1SimulatorApp.js

@@ -1,5 +1,7 @@
 import { Application, Container, Graphics } from 'pixi.js';
 import { applyPaddockThemeCssVariables } from '../config/defaultOptions.js';
+import { formatCssUrl } from '../config/cssValues.js';
+import { getNextTimingGapMode, normalizeTimingGapMode } from '../config/timingGapMode.js';
 import { ProceduralTrackAsset } from '../rendering/proceduralTrackAsset.js';
 import { interpolateRenderSnapshotInto } from '../rendering/renderSnapshot.js';
 import { createRaceSimulation, FIXED_STEP } from '../simulation/raceSimulation.js';
@@ -7,7 +9,9 @@ import { clamp } from '../simulation/simMath.js';
 import { WORLD } from '../simulation/track/trackModel.js';
 import { CameraController } from './camera/cameraController.js';
 import { createBrowserExpertAdapter } from './BrowserExpertAdapter.js';
-import { querySimulatorDom } from './domBindings.js';
+import { installLayoutSupport } from './layoutSupport.js';
+import { installRaceOverlayClearanceSupport } from './raceOverlayClearanceSupport.js';
+import { querySimulatorDom, resolveNodes } from './domBindings.js';
 import { loadAppTextures } from './rendering/appAssets.js';
 import { CarRenderer } from './rendering/carRenderer.js';
 import { DrsTrailRenderer } from './rendering/drsTrailRenderer.js';
@@ -16,17 +20,12 @@ import { PitLaneStatusRenderer } from './rendering/pitLaneStatusRenderer.js';
 import { ReplayGhostRenderer } from './rendering/replayGhostRenderer.js';
 import { renderTrackSurface } from './rendering/trackRenderer.js';
 import {
-  formatLapGap,
-  formatRaceGap,
-  getPenaltyByDriver,
   getTimingOrderKey,
   getTimingPenaltyKey,
-  isWavedFlagCar,
-  renderTimingTower,
+  renderTimingTowers,
   syncTimingGapModeControls,
 } from './readouts/timingTowerRenderer.js';
-import { formatTelemetryGap } from './readouts/readoutFormatters.js';
-import { getOverviewFields, renderCarDriverOverview } from './readouts/carOverviewRenderer.js';
+import { renderCarDriverOverview } from './readouts/carOverviewRenderer.js';
 import { renderLapTelemetry, renderTelemetryReadouts } from './readouts/telemetryRenderer.js';
 import {
   renderRaceFinish,
@@ -65,6 +64,44 @@ import { normalizeWarmupOptions } from '../simulation/warmup/runtimeWarmup.js';
 const SIMULATION_SPEED_STEPS = [1, 2, 3, 4, 5, 10];
 const DRS_DRAG_REDUCTION_PERCENT = 58;
 
+function uniqueNodes(nodes = []) {
+  return [...new Set([...nodes].filter(Boolean))];
+}
+
+function normalizeRuntimeSnapshot(snapshot, totalLaps) {
+  const source = snapshot && typeof snapshot === 'object' ? snapshot : {};
+  const raceControlSource = source.raceControl && typeof source.raceControl === 'object'
+    ? source.raceControl
+    : {};
+  const pitLaneStatus = source.pitLaneStatus ?? raceControlSource.pitLaneStatus ?? null;
+  return {
+    ...source,
+    time: Number.isFinite(source.time) ? source.time : 0,
+    world: source.world ?? WORLD,
+    totalLaps: Number.isFinite(source.totalLaps) ? source.totalLaps : totalLaps,
+    raceControl: {
+      ...raceControlSource,
+      mode: raceControlSource.mode ?? 'green',
+      redFlag: Boolean(raceControlSource.redFlag),
+      pitLaneOpen: Boolean(raceControlSource.pitLaneOpen),
+      pitLaneStatus,
+      finished: Boolean(raceControlSource.finished),
+      finishedAt: raceControlSource.finishedAt ?? null,
+      winner: raceControlSource.winner ?? null,
+      classification: Array.isArray(raceControlSource.classification) ? raceControlSource.classification : [],
+      start: raceControlSource.start && typeof raceControlSource.start === 'object'
+        ? raceControlSource.start
+        : {},
+    },
+    pitLaneStatus,
+    safetyCar: source.safetyCar && typeof source.safetyCar === 'object' ? source.safetyCar : {},
+    events: Array.isArray(source.events) ? source.events : [],
+    penalties: Array.isArray(source.penalties) ? source.penalties : [],
+    cars: Array.isArray(source.cars) ? source.cars : [],
+    replayGhosts: Array.isArray(source.replayGhosts) ? source.replayGhosts : [],
+  };
+}
+
 function createMountTrackSeed() {
   const values = new Uint32Array(1);
   try {
@@ -110,16 +147,22 @@ export class F1SimulatorApp {
     this.drivers = options.drivers;
     this.driverById = new Map(this.drivers.map((driver) => [driver.id, driver]));
     this.assets = options.assets;
-    this.root.style.setProperty('--broadcast-panel-surface', `url('${this.assets.broadcastPanel}')`);
+    this.root.style.setProperty('--broadcast-panel-surface', formatCssUrl(this.assets.broadcastPanel));
     this.root.style.setProperty('--paddock-entry-count', String(this.drivers.length));
-    applyPaddockThemeCssVariables(this.root, options.theme);
+    this.totalLaps = options.totalLaps;
+    this.selectedId = this.drivers[0]?.id ?? null;
+    this.lastThemeContextKey = null;
+    this.syncThemeContext();
     Object.assign(this, querySimulatorDom(root));
     this.abortController = new AbortController();
     this.resizeHandler = null;
     this.layoutResizeObserver = null;
+    this.layoutSupportCleanup = installLayoutSupport(root);
+    this.raceOverlayClearanceCleanup = installRaceOverlayClearanceSupport(root);
     this.cameraController = null;
     this.visibilityChangeHandler = null;
     this.visibilityObserver = null;
+    this.runtimeVisibilitySyncFrame = null;
     this.tickerCallback = null;
     this.expert = null;
     this.expertMode = Boolean(options.expert?.enabled);
@@ -148,7 +191,6 @@ export class F1SimulatorApp {
     this.replayGhostRenderer = new ReplayGhostRenderer();
     this.pitLaneStatusRenderer = new PitLaneStatusRenderer();
     this.trackSeed = options.trackSeed ?? createMountTrackSeed();
-    this.selectedId = this.drivers[0]?.id ?? null;
     this.raceDataBannerConfig = options.ui?.raceDataBanners ?? { initial: 'project', enabled: ['project', 'radio'] };
     this.raceDataBannersMuted = false;
     this.penaltyBannerEnabled = Boolean(options.ui?.penaltyBanners);
@@ -171,6 +213,7 @@ export class F1SimulatorApp {
       canvasHost: this.canvasHost,
       readouts: this.readouts,
       initialMode: options.initialCameraMode,
+      driverCamera: options.ui?.driverCamera,
     });
     this.camera = this.cameraController.camera;
     this.overviewMode = 'vehicle';
@@ -198,7 +241,7 @@ export class F1SimulatorApp {
     this.lastLeaderLap = null;
     this.emittedRaceEventKeys = new Set();
     this.raceFinishEmitted = false;
-    this.timingGapMode = 'interval';
+    this.timingGapMode = normalizeTimingGapMode(options.ui?.timingGapMode);
     this.telemetryDrawerOpen = Boolean(
       this.readouts.telemetryDrawerWorkbench?.classList?.contains?.('is-telemetry-open'),
     );
@@ -244,6 +287,7 @@ export class F1SimulatorApp {
       );
       this.createCars();
       this.bindControls();
+      this.syncTimingPanelDisclosureState();
       this.renderTrack();
       const snapshot = this.sim.snapshot();
       this.updateDom(snapshot);
@@ -255,7 +299,10 @@ export class F1SimulatorApp {
       this.completeComponentLoading();
       this.emitHostCallback('onLoadingChange', { loading: false, phase: 'ready' });
       this.emitHostCallback('onReady', { snapshot });
-      this.resizeHandler = () => this.applyCamera(this.sim.snapshotRender?.() ?? this.sim.snapshot());
+      this.resizeHandler = () => {
+        this.syncTimingPanelDisclosureState();
+        this.applyCamera(this.sim.snapshotRender?.() ?? this.sim.snapshot());
+      };
       window.addEventListener('resize', this.resizeHandler, { signal: this.abortController.signal });
       this.observeLayoutResize();
       if (this.expertMode) {
@@ -309,7 +356,6 @@ export class F1SimulatorApp {
       rules: options.rules,
       participantInteractions: options.participantInteractions,
       replayGhosts: options.replayGhosts,
-      trackQueryIndex: options.trackQueryIndex,
       warmup: normalizeWarmupOptions(options.warmup, 'browser'),
     });
   }
@@ -327,18 +373,6 @@ export class F1SimulatorApp {
     });
   }
 
-  createRawCarGeometryGraphic(driver) {
-    return this.carRenderer.createRawCarGeometryGraphic(driver);
-  }
-
-  createServiceCountdownLabel() {
-    return this.carRenderer.createServiceCountdownLabel();
-  }
-
-  applyServiceCountdownTone(label, tone) {
-    this.carRenderer.applyServiceCountdownTone(label, tone);
-  }
-
   bindControls() {
     const eventOptions = { signal: this.abortController.signal };
 
@@ -400,30 +434,42 @@ export class F1SimulatorApp {
 
     this.timingGapModeButtons.forEach((button) => {
       button.addEventListener('click', () => {
-        this.timingGapMode = button.dataset.timingGapMode === 'leader' ? 'leader' : 'interval';
-        this.syncTimingGapModeControls();
-        const snapshot = this.sim?.snapshot?.();
-        if (snapshot) this.renderTiming(snapshot.cars, snapshot.raceControl.mode, snapshot.penalties ?? []);
+        this.toggleTimingGapMode();
       }, eventOptions);
     });
 
-    this.timingList?.addEventListener?.('pointerdown', (event) => {
-      const row = event.target instanceof Element ? event.target.closest('[data-driver-id]') : null;
-      if (!row) return;
-      this.selectCar(row.dataset.driverId, { focus: true });
-    }, eventOptions);
+    this.timingLists?.forEach?.((timingList) => {
+      timingList.addEventListener?.('pointerdown', (event) => {
+        const row = event.target instanceof Element ? event.target.closest('[data-driver-id]') : null;
+        if (!row) return;
+        this.selectCar(row.dataset.driverId, { focus: true });
+      }, eventOptions);
+    });
+
+    this.readouts.timingPanelToggles?.forEach?.((toggle) => {
+      toggle.addEventListener?.('click', () => {
+        const racePanel = toggle.closest?.('.sim-canvas-panel');
+        this.setTimingPanelOpen(!racePanel?.classList?.contains?.('is-timing-panel-open'), racePanel);
+      }, eventOptions);
+    });
 
-    this.openButton?.addEventListener('click', () => {
+    const raceDataOpenButtons = uniqueNodes(this.readouts.raceDataOpens?.length
+      ? this.readouts.raceDataOpens
+      : [this.openButton]);
+    raceDataOpenButtons.forEach((button) => button.addEventListener('click', () => {
       const driver = this.driverById.get(this.activeRaceDataId ?? this.selectedId);
       if (!driver) return;
       this.options.onDriverOpen?.(driver);
-    }, eventOptions);
+    }, eventOptions));
 
-    this.readouts.raceDataDismiss?.addEventListener('click', (event) => {
+    const raceDataDismissButtons = uniqueNodes(this.readouts.raceDataDismisses?.length
+      ? this.readouts.raceDataDismisses
+      : [this.readouts.raceDataDismiss]);
+    raceDataDismissButtons.forEach((button) => button.addEventListener('click', (event) => {
       event.preventDefault();
       event.stopPropagation();
       this.dismissRaceDataPanel(performance.now());
-    }, eventOptions);
+    }, eventOptions));
 
     this.readouts.telemetryDrawerToggle?.addEventListener('click', () => {
       this.setTelemetryDrawerOpen(!this.telemetryDrawerOpen);
@@ -483,13 +529,51 @@ export class F1SimulatorApp {
     }
     this.readouts.telemetryDrawerToggle?.setAttribute?.('aria-expanded', String(this.telemetryDrawerOpen));
     if (this.readouts.telemetryDrawerToggle) {
-      this.readouts.telemetryDrawerToggle.textContent = this.telemetryDrawerOpen ? 'Close telemetry' : 'Telemetry';
+      this.readouts.telemetryDrawerToggle.textContent = this.telemetryDrawerOpen ? 'Close' : 'Telemetry';
+      this.readouts.telemetryDrawerToggle.setAttribute(
+        'aria-label',
+        this.telemetryDrawerOpen ? 'Close telemetry' : 'Open telemetry',
+      );
     }
     this.invalidateCameraSafeArea();
     this.syncRendererToCurrentLayout({ render: true });
     this.scheduleLayoutResizeSync(380);
   }
 
+  setTimingPanelOpen(open, racePanel = this.readouts.timingTower?.closest?.('.sim-canvas-panel')) {
+    racePanel?.classList?.toggle?.('is-timing-panel-open', Boolean(open));
+    this.syncTimingPanelDisclosureState(racePanel);
+    this.invalidateCameraSafeArea();
+    this.syncRendererToCurrentLayout({ render: true });
+    this.scheduleLayoutResizeSync(380);
+  }
+
+  isTimingPanelDisclosureMode(toggle = this.readouts.timingPanelToggle) {
+    if (!toggle) return false;
+    const style = getComputedStyle(toggle);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+  }
+
+  syncTimingPanelDisclosureState(targetPanel = null) {
+    const toggles = [...(this.readouts.timingPanelToggles ?? [])];
+    for (const toggle of toggles) {
+      const racePanel = toggle.closest?.('.sim-canvas-panel');
+      if (targetPanel && racePanel !== targetPanel) continue;
+      const tower = racePanel?.querySelector?.('[data-timing-tower]');
+      const disclosureMode = this.isTimingPanelDisclosureMode(toggle);
+      const open = disclosureMode && Boolean(racePanel?.classList?.contains?.('is-timing-panel-open'));
+      racePanel?.classList?.toggle?.('is-timing-panel-open', open);
+      if (!disclosureMode || open) {
+        tower?.removeAttribute?.('inert');
+        tower?.setAttribute?.('aria-hidden', 'false');
+      } else {
+        tower?.setAttribute?.('inert', '');
+        tower?.setAttribute?.('aria-hidden', 'true');
+      }
+      toggle.setAttribute?.('aria-expanded', String(open));
+    }
+  }
+
   setRaceDataBannersMuted(muted, now = performance.now()) {
     this.raceDataBannersMuted = Boolean(muted);
     if (this.raceDataBannersMuted) {
@@ -554,11 +638,13 @@ export class F1SimulatorApp {
     if (typeof ResizeObserver !== 'function') return;
     this.layoutResizeObserver?.disconnect?.();
     this.layoutResizeObserver = new ResizeObserver(() => {
+      this.syncTimingPanelDisclosureState();
       this.invalidateCameraSafeArea();
       this.syncRendererToCurrentLayout({ render: true });
     });
     if (this.canvasHost) this.layoutResizeObserver.observe(this.canvasHost);
-    if (this.readouts.timingTower) this.layoutResizeObserver.observe(this.readouts.timingTower);
+    resolveNodes(this.readouts.timingTowers, this.readouts.timingTower)
+      .forEach((timingTower) => this.layoutResizeObserver.observe(timingTower));
   }
 
   invalidateCameraSafeArea() {
@@ -589,6 +675,7 @@ export class F1SimulatorApp {
   renderExpertFrame(snapshot = this.sim?.snapshot(), { forceDomUpdate = false, observation } = {}) {
     if (!snapshot) return;
     const now = performance.now();
+    this.sampleFps(now);
     const renderSnapshot = interpolateRenderSnapshotInto(this.renderSnapshotBuffer, snapshot, 0);
     this.applyCamera(renderSnapshot);
     this.renderDrsTrails(renderSnapshot);
@@ -687,6 +774,7 @@ export class F1SimulatorApp {
   }
 
   updateDom(snapshot, { emitLifecycle = true } = {}) {
+    snapshot = normalizeRuntimeSnapshot(snapshot, this.totalLaps);
     const leader = snapshot.cars[0];
     const selected = snapshot.cars.find((car) => car.id === this.selectedId) ?? leader;
     const activeDrs = snapshot.cars.filter((car) => car.drsActive).length;
@@ -694,6 +782,7 @@ export class F1SimulatorApp {
     const now = performance.now();
 
     if (emitLifecycle) this.emitSnapshotLifecycle(snapshot);
+    this.syncThemeContext(snapshot);
 
     if (
       this.shouldAutoHideActiveRaceData() &&
@@ -734,7 +823,7 @@ export class F1SimulatorApp {
       this.lastTimingPenaltyKey = timingPenaltyKey;
       this.lastTimingOrderKey = timingOrderKey;
     }
-    this.renderTelemetry(selected);
+    if (selected) this.renderTelemetry(selected);
     const activeRaceDataCar = this.activeRaceDataId
       ? snapshot.cars.find((car) => car.id === this.activeRaceDataId)
       : null;
@@ -821,7 +910,8 @@ export class F1SimulatorApp {
 
   renderTiming(cars, raceMode, penalties = []) {
     this.syncTimingGapModeControls();
-    this.lastTimingMarkup = renderTimingTower({
+    this.lastTimingMarkup = renderTimingTowers({
+      timingLists: this.timingLists,
       timingList: this.timingList,
       cars,
       raceMode,
@@ -834,16 +924,37 @@ export class F1SimulatorApp {
     });
   }
 
-  getTimingOrderKey(cars = []) {
-    return getTimingOrderKey(cars, { timingGapMode: this.timingGapMode });
+  setTimingGapMode(mode) {
+    const nextMode = normalizeTimingGapMode(mode);
+    if (this.timingGapMode === nextMode) {
+      this.syncTimingGapModeControls();
+      return this.timingGapMode;
+    }
+    this.timingGapMode = nextMode;
+    this.options = {
+      ...this.options,
+      ui: {
+        ...this.options.ui,
+        timingGapMode: nextMode,
+      },
+    };
+    this.lastTimingRenderTime = 0;
+    this.syncTimingGapModeControls();
+    const snapshot = this.sim?.snapshot?.();
+    if (snapshot) this.renderTiming(snapshot.cars, snapshot.raceControl.mode, snapshot.penalties ?? []);
+    return this.timingGapMode;
+  }
+
+  getTimingGapMode() {
+    return this.timingGapMode;
   }
 
-  isWavedFlagCar(car) {
-    return isWavedFlagCar(car);
+  toggleTimingGapMode() {
+    return this.setTimingGapMode(getNextTimingGapMode(this.timingGapMode));
   }
 
-  getPenaltyByDriver(penalties = []) {
-    return getPenaltyByDriver(penalties);
+  getTimingOrderKey(cars = []) {
+    return getTimingOrderKey(cars, { timingGapMode: this.timingGapMode });
   }
 
   getTimingPenaltyKey(penalties = []) {
@@ -852,18 +963,6 @@ export class F1SimulatorApp {
     });
   }
 
-  formatTimingGap(car) {
-    return formatRaceGap(car, this.timingGapMode);
-  }
-
-  formatLapGap(laps) {
-    return formatLapGap(laps);
-  }
-
-  formatTelemetryGap(car, mode) {
-    return formatTelemetryGap(car, mode);
-  }
-
   syncTimingGapModeControls() {
     syncTimingGapModeControls({
       readouts: this.readouts,
@@ -886,10 +985,6 @@ export class F1SimulatorApp {
     renderLapTelemetry(this.readouts, telemetry);
   }
 
-  getOverviewFields(driver, mode) {
-    return getOverviewFields(driver, mode);
-  }
-
   renderCarDriverOverview(car) {
     const previousKey = this.lastOverviewRenderKey;
     this.lastOverviewRenderKey = renderCarDriverOverview({
@@ -1091,6 +1186,20 @@ export class F1SimulatorApp {
     updateToggleButtons(this.safetyButtons, active);
   }
 
+  syncThemeContext(snapshot = null) {
+    const selectedTeamId = this.getSelectedTeamId(snapshot);
+    const contextKey = selectedTeamId ?? '';
+    if (this.lastThemeContextKey === contextKey) return;
+    this.lastThemeContextKey = contextKey;
+    applyPaddockThemeCssVariables(this.root, this.options.theme, { selectedTeamId });
+  }
+
+  getSelectedTeamId(snapshot = null) {
+    const selectedCar = snapshot?.cars?.find?.((car) => car.id === this.selectedId);
+    const selectedDriver = this.driverById.get(this.selectedId);
+    return selectedCar?.team?.id ?? selectedDriver?.team?.id ?? null;
+  }
+
   applyExpertOptions(nextOptions = {}) {
     this.options = {
       ...this.options,
@@ -1112,6 +1221,7 @@ export class F1SimulatorApp {
         },
       },
     };
+    this.totalLaps = this.options.totalLaps;
     this.assets = this.options.assets;
     if (hasOwnOption(nextOptions, 'trackSeed')) {
       this.trackSeed = this.options.trackSeed ?? createMountTrackSeed();
@@ -1120,6 +1230,7 @@ export class F1SimulatorApp {
       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.lastThemeContextKey = null;
       this.createCars();
     }
   }
@@ -1137,13 +1248,16 @@ export class F1SimulatorApp {
     this.raceDataBannerConfig = this.options.ui?.raceDataBanners ?? this.raceDataBannerConfig;
     this.penaltyBannerEnabled = Boolean(this.options.ui?.penaltyBanners);
     this.timingPenaltyBadgesEnabled = Boolean(this.options.ui?.timingPenaltyBadges);
-    this.root.style.setProperty('--broadcast-panel-surface', `url('${this.assets.broadcastPanel}')`);
-    applyPaddockThemeCssVariables(this.root, this.options.theme);
+    this.timingGapMode = normalizeTimingGapMode(this.options.ui?.timingGapMode);
+    this.cameraController.driverCamera = Boolean(this.options.ui?.driverCamera);
+    this.root.style.setProperty('--broadcast-panel-surface', formatCssUrl(this.assets.broadcastPanel));
+    this.selectedId = this.drivers[0]?.id ?? null;
+    this.lastThemeContextKey = null;
+    this.syncThemeContext();
     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;
@@ -1218,8 +1332,16 @@ export class F1SimulatorApp {
       cancelAnimationFrame(this.layoutResizeFrame);
     }
     this.layoutResizeFrame = null;
+    if (this.runtimeVisibilitySyncFrame && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(this.runtimeVisibilitySyncFrame);
+    }
+    this.runtimeVisibilitySyncFrame = null;
     this.layoutResizeObserver?.disconnect?.();
     this.layoutResizeObserver = null;
+    this.layoutSupportCleanup?.();
+    this.layoutSupportCleanup = null;
+    this.raceOverlayClearanceCleanup?.();
+    this.raceOverlayClearanceCleanup = null;
     this.visibilityObserver?.disconnect?.();
     this.visibilityObserver = null;
     if (this.app && this.tickerCallback) {

package/src/app/banners/raceDataBannerController.js

@@ -1,5 +1,6 @@
 import { formatDriverNumber } from '../../data/championship.js';
-import { setText } from '../domBindings.js';
+import { formatCssColor } from '../../config/cssValues.js';
+import { setStyleProperty, setText } from '../domBindings.js';
 
 export const RACE_DATA_SELECTED_VISIBLE_MS = 5200;
 export const RADIO_BREAK_MIN_MS = 4800;
@@ -8,47 +9,80 @@ export const RADIO_VISIBLE_MIN_MS = 6200;
 export const RADIO_VISIBLE_MAX_MS = 9200;
 export const RADIO_SCHEDULE_CATCHUP_LIMIT_MS = 30000;
 
+function getRaceDataPanelBindings(readouts) {
+  if (readouts.raceDataPanelBindings?.length) return readouts.raceDataPanelBindings;
+  if (!readouts.raceDataPanel) return [];
+  return [{
+    panel: readouts.raceDataPanel,
+    kicker: readouts.raceDataKicker,
+    title: readouts.raceDataTitle,
+    number: readouts.raceDataNumber,
+    subtitle: readouts.raceDataSubtitle,
+    open: readouts.raceDataOpen,
+    dismiss: readouts.raceDataDismiss,
+  }];
+}
+
+function hasTelemetryDetailPanel(readouts) {
+  return getRaceDataPanelBindings(readouts).some((binding) => (
+    binding.panel?.classList?.contains?.('race-data-panel--with-telemetry')
+  ));
+}
+
+function clearRaceDataIdleMode(panel) {
+  panel?.removeAttribute?.('data-idle-mode');
+  if (panel?.dataset) delete panel.dataset.idleMode;
+}
+
+function setRaceDataIdleMode(panel, mode) {
+  if (panel?.dataset) {
+    panel.dataset.idleMode = mode;
+    return;
+  }
+  panel?.setAttribute?.('data-idle-mode', mode);
+}
+
 export function shouldAutoHideActiveRaceData({ activeRaceDataId, options, readouts }) {
   return Boolean(
     activeRaceDataId &&
     !(
       options.ui?.raceDataTelemetryDetail ||
-      readouts.raceDataPanel?.classList?.contains?.('race-data-panel--with-telemetry')
+      hasTelemetryDetailPanel(readouts)
     ),
   );
 }
 
 export function renderRaceData({ car, drivers, readouts, options }) {
-  if (!car || !readouts.raceDataPanel) return false;
+  const panels = getRaceDataPanelBindings(readouts);
+  if (!car || !panels.length) return false;
   if (typeof options.isRaceDataBannerEnabled === 'function' && !options.isRaceDataBannerEnabled('project')) return false;
   const driver = drivers.find((item) => item.id === car.id);
   if (!driver) return false;
 
-  readouts.raceDataPanel.style.setProperty('--driver-color', driver.color);
-  readouts.raceDataPanel.classList.remove('is-hidden');
-  readouts.raceDataPanel.classList.add('is-project-mode');
-  readouts.raceDataPanel.classList.remove('is-radio-mode');
-  readouts.raceDataPanel.removeAttribute('data-idle-mode');
-  setText(readouts.raceDataKicker, 'Project');
-  setText(readouts.raceDataTitle, driver.name);
-  if (readouts.raceDataNumber) {
-    readouts.raceDataNumber.textContent = formatDriverNumber(car.driverNumber ?? driver.driverNumber);
-  }
-  if (readouts.raceDataSubtitle) {
-    readouts.raceDataSubtitle.textContent = `${car.code} - P${car.rank} - ${driver.raceData?.[0] ?? 'Project entry'}`;
-  }
-  if (readouts.raceDataOpen) {
-    readouts.raceDataOpen.hidden = typeof options.onDriverOpen !== 'function';
-  }
+  panels.forEach((binding) => {
+    setStyleProperty(binding.panel, '--driver-color', formatCssColor(driver.color));
+    binding.panel.classList.remove('is-hidden');
+    binding.panel.classList.add('is-project-mode');
+    binding.panel.classList.remove('is-radio-mode');
+    clearRaceDataIdleMode(binding.panel);
+    setText(binding.kicker, 'Project');
+    setText(binding.title, driver.name);
+    setText(binding.number, formatDriverNumber(car.driverNumber ?? driver.driverNumber));
+    setText(binding.subtitle, `${car.code} - P${car.rank} - ${driver.raceData?.[0] ?? 'Project entry'}`);
+    if (binding.open) {
+      binding.open.hidden = typeof options.onDriverOpen !== 'function';
+    }
+  });
   return true;
 }
 
 export function hideRaceDataPanel(readouts) {
-  if (!readouts.raceDataPanel) return;
-  readouts.raceDataPanel.classList.add('is-hidden');
-  readouts.raceDataPanel.classList.remove('is-project-mode', 'is-radio-mode');
-  readouts.raceDataPanel.removeAttribute('data-idle-mode');
-  if (readouts.raceDataOpen) readouts.raceDataOpen.hidden = true;
+  getRaceDataPanelBindings(readouts).forEach((binding) => {
+    binding.panel.classList.add('is-hidden');
+    binding.panel.classList.remove('is-project-mode', 'is-radio-mode');
+    clearRaceDataIdleMode(binding.panel);
+    if (binding.open) binding.open.hidden = true;
+  });
 }
 
 export function getProjectRadioQuote({ drivers, radioState }) {
@@ -56,24 +90,25 @@ export function getProjectRadioQuote({ drivers, radioState }) {
   const quote = driver.raceData?.[radioState.quoteIndex] ?? 'Project entry';
 
   return {
-    color: driver.color,
+    color: formatCssColor(driver.color),
     title: driver.name,
     subtitle: `${driver.code} - "${quote}"`,
   };
 }
 
 export function renderProjectRadio({ readouts, radio }) {
-  if (!readouts.raceDataPanel) return;
-  readouts.raceDataPanel.style.setProperty('--driver-color', radio.color);
-  readouts.raceDataPanel.classList.remove('is-hidden');
-  readouts.raceDataPanel.classList.add('is-radio-mode');
-  readouts.raceDataPanel.classList.remove('is-project-mode');
-  readouts.raceDataPanel.dataset.idleMode = 'quote';
-  setText(readouts.raceDataKicker, 'Project radio');
-  setText(readouts.raceDataTitle, radio.title);
-  setText(readouts.raceDataNumber, '');
-  setText(readouts.raceDataSubtitle, radio.subtitle);
-  if (readouts.raceDataOpen) readouts.raceDataOpen.hidden = true;
+  getRaceDataPanelBindings(readouts).forEach((binding) => {
+    setStyleProperty(binding.panel, '--driver-color', formatCssColor(radio.color));
+    binding.panel.classList.remove('is-hidden');
+    binding.panel.classList.add('is-radio-mode');
+    binding.panel.classList.remove('is-project-mode');
+    setRaceDataIdleMode(binding.panel, 'quote');
+    setText(binding.kicker, 'Project radio');
+    setText(binding.title, radio.title);
+    setText(binding.number, '');
+    setText(binding.subtitle, radio.subtitle);
+    if (binding.open) binding.open.hidden = true;
+  });
 }
 
 export function randomRadioRange(nextRandom, min, max) {

package/src/app/banners/stewardMessageController.js

@@ -1,4 +1,5 @@
-import { setText } from '../domBindings.js';
+import { formatCssColor } from '../../config/cssValues.js';
+import { setStyleProperty, setText } from '../domBindings.js';
 import {
   formatPenaltyChip,
   formatPenaltyHeadline,
@@ -18,7 +19,7 @@ export function createPenaltyStewardMessage(penalty, driverById) {
     driverId: penalty.driverId,
     penaltyId: penalty.id,
     time: penalty.time,
-    color: driver?.color ?? 'var(--red)',
+    color: formatCssColor(driver?.color),
     kicker: formatPenaltyChip(penalty),
     title: `${code} ${formatPenaltyHeadline(penalty).replace(/^\+\d+ seconds? /u, '')}`,
     detail: `${formatPenaltyType(penalty.type)} - ${penalty.reason ?? 'Steward decision'}`,
@@ -39,7 +40,7 @@ export function createWarningStewardMessage(event, driverById) {
     driverId: event.carId,
     violationCount: event.violationCount,
     time: event.at,
-    color: driver?.color ?? 'var(--yellow)',
+    color: formatCssColor(driver?.color, '#ffd166'),
     kicker: 'Warning',
     title: `${code} ${formatPenaltyType(event.type).toLowerCase()}`,
     detail: `${formatPenaltyType(event.type)}${warningProgress}`,
@@ -90,7 +91,7 @@ export function renderActiveStewardMessage(readouts, activeStewardMessage) {
     panel.classList.remove('is-penalty', 'is-warning');
     return;
   }
-  panel.style.setProperty('--steward-color', message.color);
+  setStyleProperty(panel, '--steward-color', formatCssColor(message.color));
   panel.classList.remove('is-hidden', 'is-penalty', 'is-warning');
   panel.classList.add(message.kind === 'penalty' ? 'is-penalty' : 'is-warning');
   setText(readouts.stewardMessageKicker, message.kicker);