@inventure71/paddockjs 2.0.1 → 4.0.0

package/src/api/PaddockSimulatorController.js

@@ -1,4 +1,5 @@
 import { F1SimulatorApp } from '../app/F1SimulatorApp.js';
+import { installLayoutSupport } from '../app/layoutSupport.js';
 import {
   createRaceDataPanelMarkup,
   createTelemetrySectorBannerMarkup,
@@ -18,7 +19,10 @@ import {
   createTimingTowerMarkup,
 } from '../ui/componentTemplates.js';
 import { applyPaddockThemeCssVariables, resolveF1SimulatorOptions } from '../config/defaultOptions.js';
+import { formatCssUrl } from '../config/cssValues.js';
 import { mergeRestartOptions } from '../config/restartOptions.js';
+import { getNextTimingGapMode, normalizeTimingGapMode } from '../config/timingGapMode.js';
+import { createThemeSync, resolveRuntimeThemeModeOptions, resolveRuntimeThemeOptions } from './runtimeTheme.js';
 
 function assertMountTarget(root, label) {
   if (!root || typeof root !== 'object' || !('innerHTML' in root)) {
@@ -26,10 +30,10 @@ function assertMountTarget(root, label) {
   }
 }
 
-function setPackageCssVariables(root, assets, theme) {
+function setPackageCssVariables(root, assets, theme, context = {}) {
   root.classList?.add?.('f1-sim-component');
-  root.style?.setProperty?.('--broadcast-panel-surface', `url('${assets.broadcastPanel}')`);
-  applyPaddockThemeCssVariables(root, theme);
+  root.style?.setProperty?.('--broadcast-panel-surface', formatCssUrl(assets.broadcastPanel));
+  applyPaddockThemeCssVariables(root, theme, context);
 }
 
 function createCompositeRoot(getRoots, getOptions) {
@@ -38,6 +42,9 @@ function createCompositeRoot(getRoots, getOptions) {
       setProperty(name, value) {
         getRoots().forEach((root) => root.style?.setProperty?.(name, value));
       },
+      removeProperty(name) {
+        getRoots().forEach((root) => root.style?.removeProperty?.(name));
+      },
     },
     querySelector(selector) {
       for (const root of getRoots()) {
@@ -49,9 +56,15 @@ function createCompositeRoot(getRoots, getOptions) {
     querySelectorAll(selector) {
       return getRoots().flatMap((root) => [...(root.querySelectorAll?.(selector) ?? [])]);
     },
-    applyCssVariables() {
+    setAttribute(name, value) {
+      getRoots().forEach((root) => root.setAttribute?.(name, value));
+    },
+    removeAttribute(name) {
+      getRoots().forEach((root) => root.removeAttribute?.(name));
+    },
+    applyCssVariables(context = {}) {
       const options = getOptions();
-      getRoots().forEach((root) => setPackageCssVariables(root, options.assets, options.theme));
+      getRoots().forEach((root) => setPackageCssVariables(root, options.assets, options.theme, context));
     },
   };
 }
@@ -60,35 +73,41 @@ export class PaddockSimulatorController {
   constructor(options = {}) {
     this.options = resolveF1SimulatorOptions(options);
     this.roots = new Map();
+    this.mountRenderers = new Map();
+    this.layoutSupportCleanups = new Map();
     this.app = null;
     this.compositeRoot = createCompositeRoot(() => [...this.roots.values()], () => this.options);
   }
 
-  mountComponent(root, key, markup) {
+  mountComponent(root, key, createMarkup) {
     assertMountTarget(root, `mount ${key}`);
     if (this.app) {
       throw new Error('Mount PaddockJS components before calling start().');
     }
-    root.innerHTML = markup;
+    const render = typeof createMarkup === 'function' ? createMarkup : () => createMarkup;
+    root.innerHTML = render();
     setPackageCssVariables(root, this.options.assets, this.options.theme);
+    this.layoutSupportCleanups.get(key)?.();
+    this.layoutSupportCleanups.set(key, installLayoutSupport(root));
     this.roots.set(key, root);
+    this.mountRenderers.set(key, render);
     return root;
   }
 
   mountRaceControls(root) {
-    return this.mountComponent(root, 'race-controls', createRaceControlsMarkup(this.options));
+    return this.mountComponent(root, 'race-controls', () => createRaceControlsMarkup(this.options));
   }
 
   mountCameraControls(root) {
-    return this.mountComponent(root, 'camera-controls', createCameraControlsMarkup(this.options));
+    return this.mountComponent(root, 'camera-controls', () => createCameraControlsMarkup(this.options));
   }
 
   mountSafetyCarControl(root) {
-    return this.mountComponent(root, 'safety-car-control', createSafetyCarControlMarkup(this.options));
+    return this.mountComponent(root, 'safety-car-control', () => createSafetyCarControlMarkup(this.options));
   }
 
   mountTimingTower(root) {
-    return this.mountComponent(root, 'timing-tower', createTimingTowerMarkup(this.options));
+    return this.mountComponent(root, 'timing-tower', () => createTimingTowerMarkup(this.options));
   }
 
   mountRaceCanvas(root, {
@@ -96,50 +115,55 @@ export class PaddockSimulatorController {
     includeTimingTower = false,
     includeTelemetrySectorBanner = false,
     timingTowerVerticalFit,
+    responsiveNarrowLayout,
   } = {}) {
-    return this.mountComponent(root, 'race-canvas', createRaceCanvasMarkup({
+    return this.mountComponent(root, 'race-canvas', () => createRaceCanvasMarkup({
       ...this.options,
       includeRaceDataPanel,
       includeTimingTower,
       includeTelemetrySectorBanner,
       timingTowerVerticalFit,
+      responsiveNarrowLayout,
     }));
   }
 
   mountTelemetryPanel(root, { includeOverview } = {}) {
-    return this.mountComponent(root, 'telemetry-stack', createTelemetryPanelMarkup(this.options, { includeOverview }));
+    return this.mountComponent(root, 'telemetry-stack', () => createTelemetryPanelMarkup(this.options, { includeOverview }));
   }
 
   mountTelemetryCore(root) {
-    return this.mountComponent(root, 'telemetry-core', createTelemetryCoreMarkup(this.options));
+    return this.mountComponent(root, 'telemetry-core', () => createTelemetryCoreMarkup(this.options));
   }
 
   mountTelemetrySectors(root) {
-    return this.mountComponent(root, 'telemetry-sectors', createTelemetrySectorsMarkup(this.options));
+    return this.mountComponent(root, 'telemetry-sectors', () => createTelemetrySectorsMarkup(this.options));
   }
 
   mountTelemetryLapTimes(root) {
-    return this.mountComponent(root, 'telemetry-lap-times', createTelemetryLapTimesMarkup(this.options));
+    return this.mountComponent(root, 'telemetry-lap-times', () => createTelemetryLapTimesMarkup(this.options));
   }
 
   mountTelemetrySectorTimes(root) {
-    return this.mountComponent(root, 'telemetry-sector-times', createTelemetrySectorTimesMarkup(this.options));
+    return this.mountComponent(root, 'telemetry-sector-times', () => createTelemetrySectorTimesMarkup(this.options));
   }
 
   mountTelemetrySectorBanner(root) {
-    return this.mountComponent(root, 'telemetry-sector-banner', createTelemetrySectorBannerMarkup(this.options));
+    return this.mountComponent(root, 'telemetry-sector-banner', () => createTelemetrySectorBannerMarkup(this.options));
   }
 
   mountRaceTelemetryDrawer(root, options = {}) {
-    return this.mountComponent(root, 'race-telemetry-drawer', createRaceTelemetryDrawerMarkup(this.options, options));
+    return this.mountComponent(root, 'race-telemetry-drawer', () => createRaceTelemetryDrawerMarkup(this.options, options));
   }
 
   mountCarDriverOverview(root) {
-    return this.mountComponent(root, 'car-driver-overview', createCarDriverOverviewMarkup(this.options));
+    return this.mountComponent(root, 'car-driver-overview', () => createCarDriverOverviewMarkup(this.options));
   }
 
   mountRaceDataPanel(root) {
-    return this.mountComponent(root, 'race-data-panel', createRaceDataPanelMarkup(this.options));
+    return this.mountComponent(root, 'race-data-panel', () => createRaceDataPanelMarkup({
+      ...this.options,
+      standalone: true,
+    }));
   }
 
   querySelector(selector) {
@@ -165,17 +189,86 @@ export class PaddockSimulatorController {
   destroy() {
     this.app?.destroy();
     this.app = null;
+    this.layoutSupportCleanups.forEach((cleanup) => cleanup());
+    this.layoutSupportCleanups.clear();
     this.roots.forEach((root) => {
       root.innerHTML = '';
     });
     this.roots.clear();
+    this.mountRenderers.clear();
+  }
+
+  rerenderMountedComponents() {
+    this.roots.forEach((root, key) => {
+      const render = this.mountRenderers.get(key);
+      if (render) root.innerHTML = render();
+      setPackageCssVariables(root, this.options.assets, this.options.theme);
+      this.layoutSupportCleanups.get(key)?.();
+      this.layoutSupportCleanups.set(key, installLayoutSupport(root));
+    });
+  }
+
+  syncOptionsFromRunningApp() {
+    const timingGapMode = this.app?.getTimingGapMode?.();
+    if (!timingGapMode) return this.options;
+    this.options = {
+      ...this.options,
+      ui: {
+        ...this.options.ui,
+        timingGapMode: normalizeTimingGapMode(timingGapMode),
+      },
+    };
+    return this.options;
   }
 
   restart(nextOptions = {}) {
-    const nextResolvedOptions = resolveF1SimulatorOptions(mergeRestartOptions(this.options, nextOptions));
-    this.app?.restart(nextResolvedOptions);
+    const currentOptions = this.app ? this.syncOptionsFromRunningApp() : this.options;
+    const nextResolvedOptions = resolveF1SimulatorOptions(mergeRestartOptions(currentOptions, nextOptions));
+    if (this.app) {
+      const previousOptions = this.options;
+      this.options = nextResolvedOptions;
+      try {
+        this.app.restart(nextResolvedOptions);
+      } catch (error) {
+        this.options = previousOptions;
+        throw error;
+      }
+      return;
+    }
     this.options = nextResolvedOptions;
-    this.compositeRoot.applyCssVariables();
+    this.rerenderMountedComponents();
+  }
+
+  setTheme(themeInput = {}) {
+    const currentOptions = this.app ? this.syncOptionsFromRunningApp() : this.options;
+    const nextResolvedOptions = resolveRuntimeThemeOptions(currentOptions, themeInput);
+    this.options = nextResolvedOptions;
+    if (this.app?.setTheme) {
+      this.app.setTheme(nextResolvedOptions.theme);
+    } else {
+      this.compositeRoot.applyCssVariables();
+    }
+    return nextResolvedOptions.theme;
+  }
+
+  setThemeMode(mode) {
+    const currentOptions = this.app ? this.syncOptionsFromRunningApp() : this.options;
+    const nextResolvedOptions = resolveRuntimeThemeModeOptions(currentOptions, mode);
+    this.options = nextResolvedOptions;
+    if (this.app?.setTheme) {
+      this.app.setTheme(nextResolvedOptions.theme);
+    } else {
+      this.compositeRoot.applyCssVariables();
+    }
+    return nextResolvedOptions.theme;
+  }
+
+  getTheme() {
+    return this.options.theme;
+  }
+
+  syncThemeFrom(source, options = {}) {
+    return createThemeSync(this, source, options);
   }
 
   selectDriver(driverId) {
@@ -223,6 +316,39 @@ export class PaddockSimulatorController {
     return this.app?.simulationSpeed ?? 1;
   }
 
+  setTimingGapMode(mode) {
+    const timingGapMode = this.app
+      ? this.app.setTimingGapMode(mode)
+      : normalizeTimingGapMode(mode);
+    this.options = {
+      ...this.options,
+      ui: {
+        ...this.options.ui,
+        timingGapMode,
+      },
+    };
+    return this.options.ui.timingGapMode;
+  }
+
+  getTimingGapMode() {
+    return this.app?.getTimingGapMode?.() ?? normalizeTimingGapMode(this.options.ui?.timingGapMode);
+  }
+
+  toggleTimingGapMode() {
+    if (this.app) {
+      const timingGapMode = this.app.toggleTimingGapMode();
+      this.options = {
+        ...this.options,
+        ui: {
+          ...this.options.ui,
+          timingGapMode,
+        },
+      };
+      return timingGapMode;
+    }
+    return this.setTimingGapMode(getNextTimingGapMode(this.options.ui?.timingGapMode));
+  }
+
   servePenalty(penaltyId) {
     return this.app?.servePenalty(penaltyId) ?? null;
   }

package/src/api/runtimeTheme.js

@@ -0,0 +1,59 @@
+import { resolveF1SimulatorOptions } from '../config/defaultOptions.js';
+import { mergeThemeInputs } from '../config/themeOptions.js';
+
+export function resolveRuntimeThemeOptions(currentOptions, themeInput = {}) {
+  return resolveF1SimulatorOptions({
+    ...currentOptions,
+    theme: mergeThemeInputs(currentOptions?.theme, themeInput),
+  });
+}
+
+export function resolveRuntimeThemeModeOptions(currentOptions, mode) {
+  return resolveRuntimeThemeOptions(currentOptions, { mode });
+}
+
+export function createThemeSync(simulator, source, {
+  attribute = 'data-theme',
+  map,
+} = {}) {
+  if (!source || typeof source !== 'object') {
+    throw new Error('syncThemeFrom requires a DOM element or attribute source.');
+  }
+
+  const readValue = () => {
+    const rawValue = typeof source.getAttribute === 'function'
+      ? source.getAttribute(attribute)
+      : source?.dataset?.[attributeToDatasetKey(attribute)];
+    if (map && Object.hasOwn(map, rawValue)) return map[rawValue];
+    return rawValue;
+  };
+
+  const sync = () => {
+    const value = readValue();
+    if (value && typeof value === 'object') {
+      simulator.setTheme(value);
+      return;
+    }
+    simulator.setThemeMode(typeof value === 'string' && value !== '' ? value : 'dark');
+  };
+
+  sync();
+
+  const Observer = globalThis.MutationObserver;
+  if (typeof Observer !== 'function' || typeof source.getAttribute !== 'function') {
+    return () => {};
+  }
+
+  const observer = new Observer(sync);
+  observer.observe(source, {
+    attributes: true,
+    attributeFilter: [attribute],
+  });
+  return () => observer.disconnect();
+}
+
+function attributeToDatasetKey(attribute) {
+  return String(attribute)
+    .replace(/^data-/, '')
+    .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}