@inventure71/paddockjs 0.2.0 → 0.3.0

package/src/simulation/raceSimulation.js

@@ -13,6 +13,8 @@ import { simSpeedToKph, simUnitsToMeters } from './units.js';
 import { getCarCorners, integrateVehiclePhysics, VEHICLE_LIMITS } from './vehiclePhysics.js';
 
 const DEFAULT_TOTAL_LAPS = 10;
+export const FIXED_STEP = 1 / 60;
+const MIN_TOTAL_LAPS = 1;
 const MAX_COLLISION_CORRECTION = 4.5;
 const GRID_SLOT_SPACING = 82;
 const GRID_FIRST_SLOT_DISTANCE = -42;
@@ -329,6 +331,12 @@ function createCar(driver, index, random, track, { standingStart = false } = {})
   };
 }
 
+function normalizeTotalLaps(value) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return MIN_TOTAL_LAPS;
+  return Math.max(MIN_TOTAL_LAPS, Math.floor(numeric));
+}
+
 function projectOntoAxis(points, axis) {
   let min = Infinity;
   let max = -Infinity;
@@ -572,7 +580,7 @@ export class F1RaceSimulation {
     this.trackSeed = this.track.seed ?? trackSeed;
     this.rules = { ...DEFAULT_RULES, ...rules };
     this.startLightsOutAt = this.rules.startLightCount * this.rules.startLightInterval + this.rules.startLightsOutHold;
-    this.totalLaps = totalLaps;
+    this.totalLaps = normalizeTotalLaps(totalLaps);
     this.time = 0;
     this.events = [];
     this.raceControl = {

package/src/styles.css

@@ -741,6 +741,7 @@
   position: relative;
   display: block;
   container-type: inline-size;
+  inline-size: 100%;
   min-height: var(--paddock-race-view-min-height, 620px);
   overflow: hidden;
   background: #000;
@@ -825,34 +826,8 @@
 }
 
 .telemetry-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.8rem 0.85rem;
+  min-height: 3.4rem;
   border-bottom: 1px solid var(--line);
-  text-transform: uppercase;
-}
-
-.telemetry-drawer__header span {
-  color: var(--green);
-  font-family: var(--font-mono);
-  font-size: 0.72rem;
-  font-weight: 900;
-  letter-spacing: 0.16em;
-}
-
-.telemetry-drawer__header button {
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.06);
-  font-family: var(--font-mono);
-  font-size: 0.62rem;
-  font-weight: 900;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  padding: 0.45rem 0.54rem;
-  cursor: pointer;
 }
 
 .telemetry-drawer__content {
@@ -1283,6 +1258,55 @@
   transform: translateX(-8px);
 }
 
+.race-data-panel--with-telemetry {
+  grid-template-columns: clamp(6.5rem, 11vw, 8.7rem) minmax(220px, 1fr) minmax(190px, 0.48fr) auto;
+  min-height: 112px;
+}
+
+.race-data-telemetry {
+  position: relative;
+  z-index: 1;
+  grid-column: 3;
+  grid-row: 1;
+  align-self: stretch;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0.4rem;
+  min-width: 0;
+  padding: 0.85rem 0.65rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.13);
+}
+
+.race-data-telemetry__label {
+  color: var(--driver-color, var(--red));
+  font-family: var(--font-mono);
+  font-size: 0.58rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.race-data-telemetry__bars {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.28rem;
+  min-width: 0;
+}
+
+.race-data-sector-bar {
+  min-height: 3.85rem;
+  padding: 0.52rem 0.42rem;
+}
+
+.race-data-panel--with-telemetry .race-data-link {
+  grid-column: 4;
+}
+
+.race-data-panel.is-radio-mode .race-data-telemetry {
+  display: none;
+}
+
 .race-data-panel.is-radio-mode {
   grid-template-columns: minmax(280px, 1fr);
 }
@@ -2135,11 +2159,31 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .race-data-panel--with-telemetry {
+    grid-template-columns: minmax(4.8rem, auto) minmax(0, 1fr);
+  }
+
   .race-data-copy {
     grid-column: 2;
     padding: 0.78rem 0.95rem 0.85rem;
   }
 
+  .race-data-panel--with-telemetry .race-data-copy {
+    grid-column: 2;
+    padding-bottom: 0.35rem;
+  }
+
+  .race-data-telemetry {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    padding: 0 0.95rem 0.75rem;
+    border-left: 0;
+  }
+
+  .race-data-panel--with-telemetry .race-data-link {
+    grid-column: 1 / -1;
+  }
+
   .race-data-panel.is-radio-mode .race-data-copy {
     grid-column: 1;
     padding-left: 0.95rem;

package/src/ui/componentTemplates.js

@@ -168,13 +168,17 @@ export function createRaceCanvasMarkup({
 
 export function createRaceDataPanelMarkup({ ui = {} } = {}) {
   const sizeMode = ui.raceDataBannerSize === 'auto' ? 'auto' : 'custom';
+  const telemetryDetail = Boolean(ui.raceDataTelemetryDetail);
+  const classNames = ['race-data-panel', `race-data-panel--${sizeMode}`];
+  if (telemetryDetail) classNames.push('race-data-panel--with-telemetry');
   return `
-    <div class="race-data-panel race-data-panel--${sizeMode}" data-paddock-component="race-data-panel" data-race-data-panel aria-live="polite">
+    <div class="${classNames.join(' ')}" data-paddock-component="race-data-panel" data-race-data-panel aria-live="polite">
       <div class="race-data-copy">
         <span class="race-data-kicker" data-race-data-kicker>Project</span>
         <strong data-race-data-title>Select driver</strong>
         <span class="race-data-subtitle" data-race-data-subtitle>Race entry</span>
       </div>
+      ${telemetryDetail ? createRaceDataTelemetryMarkup() : ''}
       <strong class="race-data-number" data-race-data-number>--</strong>
       <button class="race-data-link" type="button" data-race-data-open>Open project</button>
       ${createLoadingMarkup('Race data')}
@@ -182,6 +186,22 @@ export function createRaceDataPanelMarkup({ ui = {} } = {}) {
   `;
 }
 
+function createRaceDataTelemetryMarkup() {
+  return `
+      <div class="race-data-telemetry" data-race-data-telemetry aria-label="Project sector telemetry">
+        <span class="race-data-telemetry__label">Sectors</span>
+        <div class="race-data-telemetry__bars">
+          ${[1, 2, 3].map((sector) => `
+          <div class="telemetry-sector-bar race-data-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>
+      </div>
+  `;
+}
+
 export function createCarDriverOverviewMarkup({ assets }) {
   const cells = Array.from({ length: 7 }, (_, index) => `
           <div class="car-overview-cell car-overview-cell--slot-${index + 1}" data-overview-field data-overview-slot="${index}">
@@ -368,17 +388,24 @@ export function createTelemetryPanelMarkup(options, { includeOverview = options.
 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 ?? {}),
+      raceDataTelemetryDetail: Boolean(raceDataTelemetryDetail),
+    },
+  };
   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__race">
         ${createRaceCanvasMarkup({
-          ...options,
+          ...drawerOptions,
           includeRaceDataPanel: true,
           includeTimingTower: true,
-          includeTelemetrySectorBanner: true,
           timingTowerVerticalFit,
         })}
       </div>
@@ -389,10 +416,7 @@ export function createRaceTelemetryDrawerMarkup(options, {
         </button>
       </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__header">
-          <span>Live telemetry</span>
-          <button type="button" data-telemetry-drawer-close>Close</button>
-        </div>
+        <div class="telemetry-drawer__header" aria-hidden="true"></div>
         <div class="telemetry-drawer__content">
           ${createTelemetryComponentMarkup(options)}
         </div>

package/AGENTS.md

@@ -1,86 +0,0 @@
-# AGENTS.md
-
-## Project
-
-PaddockJS is an installable browser component package for an F1-style project race simulator.
-
-The package lives independently from the portfolio website. Host websites install it and mount it with:
-
-```js
-import { mountF1Simulator } from '@inventure71/paddockjs';
-```
-
-It can also be mounted as rearrangeable package-owned pieces with:
-
-```js
-import { createPaddockSimulator } from '@inventure71/paddockjs';
-```
-
-## What Is In This Repo
-
-- `src/index.js`: public package API.
-- `src/api/`: public composable mounting controller.
-- `src/app/`: browser runtime, DOM bindings, PixiJS app lifecycle, controls, readouts, and camera orchestration.
-- `src/config/`: default options and bundled default asset mapping.
-- `src/data/`: driver/project data normalization, driver/car pairing, rating conversion, and demo data.
-- `src/rendering/`: PixiJS track rendering helpers and render interpolation.
-- `src/simulation/`: race rules, driver AI, vehicle physics, track model, and math utilities.
-- `src/ui/`: generated markup for the all-in-one shell and individually mounted UI surfaces.
-- `src/__tests__/`: package tests.
-- `assets/`: simulator-owned default assets.
-- `docs/`: package specs and design documentation.
-- `INSTALL_AND_UPDATE.md`: install/update workflow.
-
-## Required Documentation Discipline
-
-When changing simulator behavior, update docs in the same change.
-
-Use this mapping:
-
-- Public API, lifecycle, install assumptions: update `docs/system_specs.md` and `README.md` if needed.
-- Race behavior, DRS, safety car, starts, physics, collisions: update `docs/rules.md`.
-- Vocabulary or domain model: update `docs/concepts.md`.
-- Driver/entry/options/assets callback shapes: update `docs/data_contract.md`.
-- Module ownership or data/control flow: update `docs/architecture.md`.
-- Local install/update workflow: update `INSTALL_AND_UPDATE.md`.
-
-Do not leave docs describing old behavior after code changes.
-
-## Linear Work Logging
-
-For any implementation that is more than a trivial/no-op change, log the work in the PaddockJS project on Linear.
-
-The Linear update must include:
-
-- what task was done
-- how it was solved
-- any important verification or remaining follow-up
-
-## Engineering Rules
-
-- Preserve the package boundary: PaddockJS should stay reusable and host-agnostic.
-- Host-specific routing belongs in `onDriverOpen(driver)`, not package internals.
-- Host-specific project data should be passed as `drivers` and `entries`, not hardcoded into the runtime.
-- The package should own default simulator assets so hosts do not need to copy them.
-- Treat the timing board width and broadcast proportions as package-owned. Do not resize or retune timing-board width as a casual fix; preserve its intended width and solve layout bugs through internal column/content constraints unless the user explicitly asks to redesign the timing board sizing.
-- Prefer small, focused modules when extracting from `F1SimulatorApp.js`.
-- Keep simulation logic deterministic for the same seed, track seed, drivers, entries, and rules.
-- Do not claim completion without running verification.
-
-## Verification
-
-Run before claiming package changes are complete:
-
-```bash
-npm run check
-```
-
-For portfolio integration changes, also run from the portfolio repo:
-
-```bash
-cd /Users/inventure71/VSProjects/Inventure71.github.io
-npm install ../PaddockJS
-npm run check
-```
-
-Browser behavior changes need a browser smoke test against the host page.

package/src/standalone.js

@@ -1,15 +0,0 @@
-import { DEMO_PROJECT_DRIVERS, mountF1Simulator } from './index.js';
-
-const root = document.getElementById('f1-simulator-root');
-
-if (root) {
-  mountF1Simulator(root, {
-    drivers: DEMO_PROJECT_DRIVERS,
-    onDriverOpen(driver) {
-      if (driver.link) window.location.href = driver.link;
-    },
-  }).catch((error) => {
-    root.dataset.simulatorState = 'error';
-    console.error('F1 simulator failed to initialize.', error);
-  });
-}