@inventure71/paddockjs 0.3.0 → 2.0.0

package/src/ui/raceControlStatusBanner.js

@@ -0,0 +1,39 @@
+import { escapeHtml } from './templateUtils.js';
+
+export const RACE_CONTROL_STATUS_BANNERS = {
+  'safety-car': {
+    status: 'safety-car',
+    className: 'is-safety-car',
+    kicker: 'FIA',
+    title: 'Safety Car',
+  },
+  'red-flag': {
+    status: 'red-flag',
+    className: 'is-red-flag',
+    kicker: 'FIA',
+    title: 'Red Flag',
+  },
+};
+
+export function getRaceControlStatusBanner(mode) {
+  return RACE_CONTROL_STATUS_BANNERS[mode] ?? null;
+}
+
+export function createRaceControlStatusBannerMarkup({ status = null } = {}) {
+  const banner = getRaceControlStatusBanner(status);
+  const className = [
+    'broadcast-race-control-banner',
+    banner?.className,
+  ].filter(Boolean).join(' ');
+  const hiddenAttribute = banner ? '' : ' hidden';
+  const statusAttribute = banner ? ` data-race-control-status="${escapeHtml(banner.status)}"` : '';
+  const kicker = banner?.kicker ?? 'FIA';
+  const title = banner?.title ?? 'Race Control';
+
+  return `
+        <div class="${className}" data-tower-race-control-banner${statusAttribute}${hiddenAttribute}>
+          <span data-tower-race-control-kicker>${escapeHtml(kicker)}</span>
+          <strong data-tower-race-control-title>${escapeHtml(title)}</strong>
+        </div>
+  `;
+}

package/src/ui/raceControlsTemplate.js

@@ -0,0 +1,36 @@
+import { createLoadingMarkup, escapeHtml } from './templateUtils.js';
+
+function buttonHiddenAttribute(isVisible) {
+  return isVisible ? '' : ' hidden';
+}
+
+export function createRaceControlsMarkup({
+  title,
+  kicker,
+  backLinkHref,
+  backLinkLabel,
+  showBackLink,
+}) {
+  return `
+    <header class="sim-topbar" data-paddock-component="race-controls">
+      <a class="sim-backlink" href="${escapeHtml(backLinkHref)}"${buttonHiddenAttribute(showBackLink)}>${escapeHtml(backLinkLabel)}</a>
+      <div class="sim-title-block">
+        <p class="sim-kicker">${escapeHtml(kicker)}</p>
+        <h1>${escapeHtml(title)}</h1>
+      </div>
+      <div class="sim-controls" aria-label="Race controls">
+        ${createSafetyCarControlMarkup({ compact: true })}
+        <button class="sim-control" type="button" data-restart-race>Restart</button>
+      </div>
+      ${createLoadingMarkup('Race controls')}
+    </header>
+  `;
+}
+
+export function createSafetyCarControlMarkup({ compact = false } = {}) {
+  const className = compact
+    ? 'sim-control sim-control--safety'
+    : 'sim-control sim-control--safety standalone-control';
+  const componentAttribute = compact ? '' : ' data-paddock-component="safety-car-control"';
+  return `<button class="${className}" type="button" data-safety-car aria-pressed="false"${componentAttribute}>Safety Car</button>`;
+}

package/src/ui/shellTemplate.js

@@ -11,9 +11,10 @@ export function createF1SimulatorShell({
   kicker,
   backLinkHref,
   backLinkLabel,
-  showBackLink,
-  totalLaps,
-  assets,
+	  showBackLink,
+	  totalLaps,
+	  physicsMode,
+	  assets,
   ui = {},
 }) {
   const layoutPreset = ui.layoutPreset === 'left-tower-overlay' ? 'left-tower-overlay' : 'standard';
@@ -24,7 +25,7 @@ export function createF1SimulatorShell({
   shellClasses.push(`sim-shell--timing-${timingFit}`);
   shellClasses.push(`sim-shell--race-data-${raceDataBannerSize}`);
   const cameraControls = ui.cameraControls === 'external'
-    ? `<div class="sim-external-camera-controls">${createCameraControlsMarkup()}</div>`
+    ? `<div class="sim-external-camera-controls">${createCameraControlsMarkup({ ui })}</div>`
     : '';
 
   return `
@@ -34,7 +35,7 @@ export function createF1SimulatorShell({
         ${cameraControls}
         <div class="sim-grid">
           ${createTimingTowerMarkup({ totalLaps, assets })}
-          ${createRaceCanvasMarkup({ includeRaceDataPanel: ui.showRaceDataPanel !== false, assets, ui })}
+	          ${createRaceCanvasMarkup({ includeRaceDataPanel: ui.showRaceDataPanel !== false, assets, totalLaps, physicsMode, ui })}
           ${createTelemetryPanelMarkup({ assets, ui })}
         </div>
       </section>

package/src/ui/telemetryDrawerTemplate.js

@@ -0,0 +1,55 @@
+import { createCameraControlsMarkup } from './cameraControlsTemplate.js';
+import { createRaceCanvasMarkup } from './raceCanvasTemplate.js';
+import { createSafetyCarControlMarkup } from './raceControlsTemplate.js';
+import { createTelemetryPanelMarkup } from './telemetryTemplates.js';
+
+let telemetryDrawerIdSequence = 0;
+
+function createTelemetryDrawerId() {
+  telemetryDrawerIdSequence += 1;
+  return `paddock-telemetry-drawer-${telemetryDrawerIdSequence}`;
+}
+
+export function createRaceTelemetryDrawerMarkup(options, {
+  timingTowerVerticalFit,
+  drawerInitiallyOpen = false,
+  raceDataTelemetryDetail = options.ui?.raceDataTelemetryDetail,
+} = {}) {
+  const openClass = drawerInitiallyOpen ? ' is-telemetry-open' : '';
+  const drawerId = createTelemetryDrawerId();
+  const drawerOptions = {
+    ...options,
+    ui: {
+      ...(options.ui ?? {}),
+      cameraControls: false,
+      raceDataTelemetryDetail: Boolean(raceDataTelemetryDetail),
+    },
+  };
+  const showCameraControls = options.ui?.cameraControls !== false;
+  return `
+    <section class="race-telemetry-drawer${openClass}" data-paddock-component="race-telemetry-drawer" data-race-telemetry-drawer aria-label="Race view with telemetry drawer">
+      <div class="race-telemetry-drawer__toolbar" aria-label="Race workbench controls">
+        ${showCameraControls ? createCameraControlsMarkup({ showSimulationSpeed: true, ui: options.ui }) : ''}
+        <div class="race-telemetry-drawer__controls">
+          ${createSafetyCarControlMarkup({ compact: true })}
+          <button class="telemetry-drawer-toggle" type="button" data-telemetry-drawer-toggle aria-expanded="${drawerInitiallyOpen ? 'true' : 'false'}" aria-controls="${drawerId}">
+            ${drawerInitiallyOpen ? 'Close telemetry' : 'Telemetry'}
+          </button>
+        </div>
+      </div>
+      <div class="race-telemetry-drawer__race">
+        ${createRaceCanvasMarkup({
+          ...drawerOptions,
+          includeRaceDataPanel: true,
+          includeTimingTower: true,
+          timingTowerVerticalFit,
+        })}
+      </div>
+      <aside id="${drawerId}" class="telemetry-drawer" data-telemetry-drawer aria-label="Telemetry drawer" aria-hidden="${drawerInitiallyOpen ? 'false' : 'true'}"${drawerInitiallyOpen ? '' : ' inert'}>
+        <div class="telemetry-drawer__content">
+          ${createTelemetryPanelMarkup(options, { includeOverview: false })}
+        </div>
+      </aside>
+    </section>
+  `;
+}

package/src/ui/telemetryTemplates.js

@@ -0,0 +1,136 @@
+import { createCarDriverOverviewMarkup } from './carOverviewTemplate.js';
+import { createLoadingMarkup } from './templateUtils.js';
+
+function getTelemetryModules(ui = {}) {
+  const defaults = {
+    core: true,
+    sectors: true,
+    lapTimes: true,
+    sectorTimes: true,
+  };
+  const modules = ui.telemetryModules;
+  if (modules === false) return Object.fromEntries(Object.keys(defaults).map((name) => [name, false]));
+  if (Array.isArray(modules)) {
+    const requested = new Set(modules);
+    return Object.fromEntries(Object.keys(defaults).map((name) => [name, requested.has(name)]));
+  }
+  if (!modules || typeof modules !== 'object') return defaults;
+  return Object.fromEntries(Object.entries(defaults).map(([name, fallback]) => [
+    name,
+    modules[name] == null ? fallback : Boolean(modules[name]),
+  ]));
+}
+
+function getTelemetryModuleClass(componentName) {
+  return `sim-telemetry telemetry-component telemetry-component--${componentName}`;
+}
+
+export function createTelemetryCoreMarkup() {
+  return `
+    <section class="${getTelemetryModuleClass('core')}" data-paddock-component="telemetry-core" aria-label="Selected car core telemetry">
+      <div class="telemetry-header">
+        <span data-selected-code>---</span>
+        <strong data-selected-name>Select car</strong>
+      </div>
+      <dl class="telemetry-grid">
+        <div><dt>Speed</dt><dd data-telemetry-speed>0 km/h</dd></div>
+        <div><dt>Throttle</dt><dd data-telemetry-throttle>0%</dd></div>
+        <div><dt>Brake</dt><dd data-telemetry-brake>0%</dd></div>
+        <div><dt>Tyres</dt><dd data-telemetry-tyres>0%</dd></div>
+        <div><dt>DRS</dt><dd data-telemetry-drs>OFF</dd></div>
+        <div><dt>Surface</dt><dd data-telemetry-surface>TRACK</dd></div>
+        <div><dt>Grip</dt><dd data-telemetry-grip>0%</dd></div>
+        <div><dt>Lat G</dt><dd data-telemetry-lateral-g>0.0g</dd></div>
+        <div><dt>Slip</dt><dd data-telemetry-slip-angle>0.0 deg</dd></div>
+        <div><dt>Stability</dt><dd data-telemetry-stability>STABLE</dd></div>
+        <div><dt>Interval</dt><dd data-telemetry-gap>--</dd></div>
+        <div><dt>Leader</dt><dd data-telemetry-leader-gap>--</dd></div>
+      </dl>
+      ${createLoadingMarkup('Core telemetry')}
+    </section>
+  `;
+}
+
+export function createTelemetrySectorsMarkup() {
+  return `
+      <section class="${getTelemetryModuleClass('sectors')} telemetry-sector-strip" data-paddock-component="telemetry-sectors" data-telemetry-sector-strip aria-label="Sector progress">
+        <div class="telemetry-module-header">
+          <span>Sector map</span>
+          <strong data-telemetry-current-sector>S1</strong>
+        </div>
+        <div class="telemetry-sector-bars">
+          ${[1, 2, 3].map((sector) => `
+          <div class="telemetry-sector-bar" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
+            <span>S${sector}</span>
+            <strong data-telemetry-sector-time="${sector}">--</strong>
+          </div>
+          `).join('')}
+        </div>
+        ${createLoadingMarkup('Sector telemetry')}
+      </section>
+  `;
+}
+
+export function createTelemetryLapTimesMarkup() {
+  return `
+      <section class="${getTelemetryModuleClass('lap-times')} telemetry-lap-module" data-paddock-component="telemetry-lap-times" aria-label="Lap timing">
+        <div class="telemetry-module-header">
+          <span>Lap timing</span>
+          <strong data-telemetry-completed-laps>0 laps</strong>
+        </div>
+        <table class="telemetry-lap-table" data-telemetry-lap-table>
+          <tbody>
+            <tr><th scope="row">Current</th><td data-telemetry-current-lap-time>--</td></tr>
+            <tr><th scope="row">Last</th><td data-telemetry-last-lap-time>--</td></tr>
+            <tr><th scope="row">Best</th><td data-telemetry-best-lap-time>--</td></tr>
+          </tbody>
+        </table>
+        ${createLoadingMarkup('Lap telemetry')}
+      </section>
+  `;
+}
+
+export function createTelemetrySectorTimesMarkup() {
+  return `
+      <section class="${getTelemetryModuleClass('sector-times')} telemetry-sector-table-module" data-paddock-component="telemetry-sector-times" aria-label="Sector timing table">
+        <div class="telemetry-module-header">
+          <span>Sector timing</span>
+          <strong>Last / Best</strong>
+        </div>
+        <table class="telemetry-sector-table" data-telemetry-sector-table>
+          <thead>
+            <tr><th scope="col">Sector</th><th scope="col">Last</th><th scope="col">Best</th></tr>
+          </thead>
+          <tbody>
+            ${[1, 2, 3].map((sector) => `
+            <tr data-telemetry-sector-row="${sector}">
+              <th scope="row">S${sector}</th>
+              <td data-telemetry-sector-last="${sector}">--</td>
+              <td data-telemetry-sector-best="${sector}">--</td>
+            </tr>
+            `).join('')}
+          </tbody>
+        </table>
+        ${createLoadingMarkup('Sector table')}
+      </section>
+  `;
+}
+
+function createTelemetryComponentMarkup(options, modules = getTelemetryModules(options.ui)) {
+  return `
+      ${modules.core ? createTelemetryCoreMarkup(options) : ''}
+      ${modules.sectors ? createTelemetrySectorsMarkup(options) : ''}
+      ${modules.lapTimes ? createTelemetryLapTimesMarkup(options) : ''}
+      ${modules.sectorTimes ? createTelemetrySectorTimesMarkup(options) : ''}
+  `;
+}
+
+export function createTelemetryPanelMarkup(options, { includeOverview = options.ui?.telemetryIncludesOverview !== false } = {}) {
+  const modules = getTelemetryModules(options.ui);
+  return `
+    <aside class="telemetry-stack" data-paddock-component="telemetry-stack" aria-label="Selected car telemetry stack">
+      ${createTelemetryComponentMarkup(options, modules)}
+      ${includeOverview ? createCarDriverOverviewMarkup(options) : ''}
+    </aside>
+  `;
+}

package/src/ui/templateUtils.js

@@ -0,0 +1,23 @@
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export function createLoadingMarkup(label = 'Loading') {
+  return `
+      <div class="paddock-loading" data-paddock-loading aria-label="${escapeHtml(label)} loading">
+        <div class="paddock-loading__lights" aria-hidden="true">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <span class="paddock-loading__label">${escapeHtml(label)}</span>
+      </div>
+  `;
+}

package/src/ui/timingTowerTemplate.js

@@ -0,0 +1,34 @@
+import { createRaceControlStatusBannerMarkup } from './raceControlStatusBanner.js';
+import { createLoadingMarkup, escapeHtml } from './templateUtils.js';
+
+export function createTimingTowerMarkup({ totalLaps, assets }) {
+  return `
+    <aside class="sim-timing broadcast-tower" data-paddock-component="timing-tower" data-timing-tower aria-label="Timing tower">
+      <div class="broadcast-tower-frame">
+        <div class="broadcast-brand">
+          <img class="broadcast-f1-logo" src="${escapeHtml(assets.f1Logo)}" alt="F1" />
+        </div>
+        <div class="broadcast-lap">
+          <span>Lap</span>
+          <strong data-tower-lap-readout>1</strong>
+          <span>/</span>
+          <span data-tower-total-laps>${escapeHtml(totalLaps)}</span>
+        </div>
+        <div class="broadcast-gap-mode" role="group" aria-label="Timing gap mode">
+          <button type="button" data-timing-gap-mode="interval" aria-pressed="true">Int</button>
+          <button type="button" data-timing-gap-mode="leader" aria-pressed="false">Gap</button>
+        </div>
+        ${createRaceControlStatusBannerMarkup()}
+        <div class="broadcast-column-head" aria-hidden="true">
+          <span>Pos</span>
+          <span>Team</span>
+          <span>Project</span>
+          <span data-timing-gap-label>Int</span>
+          <span>Tyre</span>
+        </div>
+        <ol class="timing-list" data-timing-list></ol>
+      </div>
+      ${createLoadingMarkup('Timing tower')}
+    </aside>
+  `;
+}