@ingissa/navcore-simulator 1.0.4 → 1.0.7

package/src/index.ts

@@ -0,0 +1,54 @@
+/**
+ * @navcore/simulator — Public API barrel.
+ *
+ * Import everything from this file. Do NOT import from sub-paths directly.
+ *
+ * Example:
+ *   import { SimulatorEngine, NoiseEngine, ScenarioInjector, GpxParser } from '@ingissa/navcore-simulator'
+ *
+ * React Native consumers also get:
+ *   import { useSimulator, SimulatorControls } from '@ingissa/navcore-simulator'
+ */
+
+// ── Core types ────────────────────────────────────────────────────────────────
+export type {
+  Coordinate,
+  SimPosition,
+  SimLocationCoords,
+  SimLocationObject,
+  SimulatorConfig,
+  NoiseProfile,
+  Scenario,
+  SimSession,
+} from './core/types';
+
+// ── Engine ────────────────────────────────────────────────────────────────────
+export { SimulatorEngine } from './core/SimulatorEngine';
+export type { EngineState } from './core/SimulatorEngine';
+
+// ── RouteWalker ───────────────────────────────────────────────────────────────
+export { RouteWalker } from './core/RouteWalker';
+export type { WalkerPosition } from './core/RouteWalker';
+
+// ── NoiseEngine ───────────────────────────────────────────────────────────────
+export { NoiseEngine } from './core/NoiseEngine';
+
+// ── Scenarios ─────────────────────────────────────────────────────────────────
+export { ScenarioInjector } from './scenarios/ScenarioInjector';
+
+// ── Replay ────────────────────────────────────────────────────────────────────
+export { GpxParser } from './replay/GpxParser';
+export type { GpxParseResult } from './replay/GpxParser';
+export { SessionRecorder } from './replay/SessionRecorder';
+export type { ExportFormat } from './replay/SessionRecorder';
+
+// ── Fleet (Phase 2) ───────────────────────────────────────────────────────────
+export { FleetSimulator } from './fleet/FleetSimulator';
+export type { VehicleProfile, FleetReport } from './fleet/FleetSimulator';
+
+// ── React Native ─────────────────────────────────────────────────────────────
+// Import these from the top-level package — no sub-path imports required:
+//   import { useSimulator, SimulatorControls } from '@ingissa/navcore-simulator'
+export { useSimulator } from './react-native/useSimulator';
+export { SimulatorControls } from './react-native/SimulatorControls';
+export type { ScenarioLogEntry } from './react-native/SimulatorControls';

package/src/node.ts

@@ -0,0 +1,48 @@
+/**
+ * @navcore/simulator — Node.js / CI barrel
+ *
+ * This barrel exports ONLY the headless classes that have no React Native
+ * dependencies. It is used by vitest (via the @navcore/simulator alias in
+ * vitest.config.ts) so that unit tests never pull in react-native and
+ * trigger Vite's Flow-syntax parser failure.
+ *
+ * React Native consumers (useSimulator, SimulatorControls) must import
+ * from the main barrel:
+ *   import { useSimulator } from '@ingissa/navcore-simulator'    ← full barrel
+ */
+
+// ── Core types ─────────────────────────────────────────────────────────────────
+export type {
+  Coordinate,
+  SimPosition,
+  SimLocationCoords,
+  SimLocationObject,
+  SimulatorConfig,
+  NoiseProfile,
+  Scenario,
+  SimSession,
+} from './core/types';
+
+// ── Engine ─────────────────────────────────────────────────────────────────────
+export { SimulatorEngine } from './core/SimulatorEngine';
+export type { EngineState } from './core/SimulatorEngine';
+
+// ── RouteWalker ────────────────────────────────────────────────────────────────
+export { RouteWalker } from './core/RouteWalker';
+export type { WalkerPosition } from './core/RouteWalker';
+
+// ── NoiseEngine ────────────────────────────────────────────────────────────────
+export { NoiseEngine } from './core/NoiseEngine';
+
+// ── Scenarios ──────────────────────────────────────────────────────────────────
+export { ScenarioInjector } from './scenarios/ScenarioInjector';
+
+// ── Replay ─────────────────────────────────────────────────────────────────────
+export { GpxParser } from './replay/GpxParser';
+export type { GpxParseResult } from './replay/GpxParser';
+export { SessionRecorder } from './replay/SessionRecorder';
+export type { ExportFormat } from './replay/SessionRecorder';
+
+// ── Fleet (Phase 2 skeleton) ───────────────────────────────────────────────────
+export { FleetSimulator } from './fleet/FleetSimulator';
+export type { VehicleProfile, FleetReport } from './fleet/FleetSimulator';

package/src/react-native/SimulatorControls.tsx

@@ -0,0 +1,473 @@
+/**
+ * SimulatorControls — Self-contained React Native control panel for SimulatorEngine.
+ *
+ * Three style variants:
+ *   'minimal'  — compact horizontal bar: speed selector + pause/resume
+ *   'full'     — full card with speed, seek, scenario log, recorder, stats
+ *   'floating' — collapsible bottom sheet (Animated, no external libs)
+ *
+ * Colour tokens match the Klaroways design system used in NavCoreTestScreen.
+ */
+
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  Animated,
+  Platform,
+} from 'react-native';
+import type { SimulatorControls as Controls, SessionControls } from './useSimulator';
+import type { SimSession } from '../core/types';
+
+// ─── Colour Tokens ────────────────────────────────────────────────────────────
+const KW = {
+  navyDeep: '#081525',
+  navyCard: '#152240',
+  navyBorder: '#1E3255',
+  emerald: '#00BF76',
+  emeraldDark: '#04342C',
+  emeraldMid: '#009A5F',
+  amber: '#F5A623',
+  amberDark: '#412402',
+  slate: '#6B7FA3',
+  slateLight: '#8FA3C8',
+  light: '#EBEFF8',
+  fault: '#FF4848',
+  faultDark: '#3D0000',
+  white: '#FFFFFF',
+  mono: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
+} as const;
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface ScenarioLogEntry {
+  ts: number;
+  name: string;
+  type: string;
+}
+
+export interface SimulatorControlsProps {
+  simulator: Controls;
+  session?: SessionControls;
+  style?: 'minimal' | 'full' | 'floating';
+  showScenarioLog?: boolean;
+  showSessionRecorder?: boolean;
+  scenarioLog?: ScenarioLogEntry[];
+  /** Current speed multiplier (controlled externally) */
+  currentSpeed?: 1 | 2 | 4 | 8;
+  /** Current engine state */
+  engineState?: 'idle' | 'running' | 'paused' | 'complete';
+  isRecording?: boolean;
+  onExportSession?: (session: SimSession) => void;
+  /** Additional style for the root container */
+  containerStyle?: object;
+}
+
+// ─── Speed Selector ───────────────────────────────────────────────────────────
+
+function SpeedSelector({
+  current,
+  onChange,
+}: {
+  current: 1 | 2 | 4 | 8;
+  onChange: (v: 1 | 2 | 4 | 8) => void;
+}) {
+  return (
+    <View style={spd.row}>
+      <Text style={spd.label}>SIM SPEED</Text>
+      {([1, 2, 4, 8] as const).map((v) => (
+        <TouchableOpacity
+          key={v}
+          style={[spd.btn, current === v && spd.btnActive]}
+          onPress={() => onChange(v)}
+          activeOpacity={0.7}
+        >
+          <Text style={[spd.btnText, current === v && { color: KW.emeraldDark }]}>
+            {v}×
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+
+const spd = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  label: { fontSize: 9, letterSpacing: 1.2, color: KW.slate, marginRight: 4 },
+  btn: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: KW.navyBorder,
+  },
+  btnActive: { backgroundColor: KW.emerald, borderColor: KW.emerald },
+  btnText: { fontSize: 11, fontWeight: '700', color: KW.slate },
+});
+
+// ─── Pause / Resume ───────────────────────────────────────────────────────────
+
+function PauseResumeButton({
+  state,
+  onPause,
+  onResume,
+}: {
+  state: 'idle' | 'running' | 'paused' | 'complete';
+  onPause: () => void;
+  onResume: () => void;
+}) {
+  if (state !== 'running' && state !== 'paused') return null;
+  return (
+    <TouchableOpacity
+      style={[pr.btn, state === 'paused' && pr.btnResume]}
+      onPress={state === 'running' ? onPause : onResume}
+      activeOpacity={0.75}
+    >
+      <Text style={pr.text}>{state === 'running' ? '⏸' : '▶'}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const pr = StyleSheet.create({
+  btn: {
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 8,
+    backgroundColor: KW.navyDeep,
+    borderWidth: 1,
+    borderColor: KW.navyBorder,
+    alignItems: 'center',
+  },
+  btnResume: { borderColor: KW.emerald },
+  text: { fontSize: 16 },
+});
+
+// ─── Scenario Log ─────────────────────────────────────────────────────────────
+
+function ScenarioLog({ entries }: { entries: ScenarioLogEntry[] }) {
+  return (
+    <View style={log.container}>
+      <Text style={log.title}>// scenario log</Text>
+      <ScrollView style={log.scroll} showsVerticalScrollIndicator={false}>
+        {entries.length === 0 ? (
+          <Text style={log.empty}>No scenarios fired yet…</Text>
+        ) : (
+          entries.map((e, i) => {
+            const d = new Date(e.ts);
+            const time = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+            return (
+              <Text key={i} style={log.entry}>
+                <Text style={log.time}>{time}  </Text>
+                <Text style={{ color: KW.amber }}>[{e.type}]</Text>
+                {' '}{e.name}
+              </Text>
+            );
+          })
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const log = StyleSheet.create({
+  container: {
+    backgroundColor: KW.navyDeep,
+    borderRadius: 8,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: KW.navyBorder,
+    maxHeight: 100,
+    marginTop: 8,
+  },
+  title: {
+    fontSize: 9,
+    letterSpacing: 1,
+    color: KW.slate,
+    fontFamily: KW.mono,
+    marginBottom: 4,
+  },
+  scroll: { flex: 1 },
+  empty: { fontSize: 10, color: KW.slate, fontFamily: KW.mono },
+  entry: { fontSize: 10, color: KW.slateLight, fontFamily: KW.mono, marginBottom: 2 },
+  time: { color: KW.slate },
+});
+
+// ─── Session Recorder Controls ────────────────────────────────────────────────
+
+function SessionRecorderControls({
+  isRecording,
+  session,
+  onExport,
+  lastSession,
+}: {
+  isRecording: boolean;
+  session?: SessionControls;
+  onExport?: (s: SimSession) => void;
+  lastSession: SimSession | null;
+}) {
+  if (!session) return null;
+
+  return (
+    <View style={rec.row}>
+      <TouchableOpacity
+        style={[rec.btn, isRecording && rec.btnActive]}
+        onPress={() => {
+          if (isRecording) {
+            // session stop returns SimSession | null from hook
+          } else {
+            session.start();
+          }
+        }}
+        activeOpacity={0.75}
+      >
+        <Text style={rec.btnText}>{isRecording ? '⏹ STOP REC' : '⏺ RECORD'}</Text>
+      </TouchableOpacity>
+
+      {lastSession && onExport && (
+        <TouchableOpacity
+          style={rec.exportBtn}
+          onPress={() => onExport(lastSession)}
+          activeOpacity={0.75}
+        >
+          <Text style={rec.exportText}>EXPORT JSON</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const rec = StyleSheet.create({
+  row: { flexDirection: 'row', gap: 8, marginTop: 8 },
+  btn: {
+    flex: 1,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: KW.navyDeep,
+    borderWidth: 1,
+    borderColor: KW.navyBorder,
+    alignItems: 'center',
+  },
+  btnActive: { borderColor: KW.fault, backgroundColor: KW.faultDark },
+  btnText: { fontSize: 11, fontWeight: '700', color: KW.slateLight, letterSpacing: 0.8 },
+  exportBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: KW.navyDeep,
+    borderWidth: 1,
+    borderColor: KW.emeraldMid,
+    alignItems: 'center',
+  },
+  exportText: { fontSize: 10, fontWeight: '700', color: KW.emerald, letterSpacing: 0.5 },
+});
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export function SimulatorControls({
+  simulator,
+  session,
+  style = 'minimal',
+  showScenarioLog = false,
+  showSessionRecorder = false,
+  scenarioLog = [],
+  currentSpeed = 1,
+  engineState = 'idle',
+  isRecording = false,
+  onExportSession,
+  containerStyle,
+}: SimulatorControlsProps) {
+  const [speed, setSpeedState] = useState<1 | 2 | 4 | 8>(currentSpeed);
+  const [lastSession, setLastSession] = useState<SimSession | null>(null);
+  // Floating sheet animation
+  const sheetAnim = useRef(new Animated.Value(0)).current;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleSpeedChange = useCallback(
+    (v: 1 | 2 | 4 | 8) => {
+      setSpeedState(v);
+      simulator.setSpeed(v);
+    },
+    [simulator],
+  );
+
+  const handleStopRecording = useCallback(() => {
+    const s = session?.stop();
+    if (s) setLastSession(s);
+  }, [session]);
+
+  const toggleSheet = useCallback(() => {
+    const toValue = isExpanded ? 0 : 1;
+    setIsExpanded(!isExpanded);
+    Animated.spring(sheetAnim, {
+      toValue,
+      useNativeDriver: false,
+      bounciness: 4,
+    }).start();
+  }, [isExpanded, sheetAnim]);
+
+  // ── Minimal ────────────────────────────────────────────────────────────────
+  if (style === 'minimal') {
+    return (
+      <View style={[s.minimal, containerStyle]}>
+        <SpeedSelector current={speed} onChange={handleSpeedChange} />
+        <PauseResumeButton
+          state={engineState}
+          onPause={simulator.pause}
+          onResume={simulator.resume}
+        />
+      </View>
+    );
+  }
+
+  // ── Full ───────────────────────────────────────────────────────────────────
+  if (style === 'full') {
+    return (
+      <View style={[s.full, containerStyle]}>
+        <View style={s.fullHeader}>
+          <Text style={s.fullTitle}>SIMULATOR</Text>
+          <View style={[s.stateBadge, engineState === 'running' && s.stateBadgeActive]}>
+            <Text style={s.stateText}>{engineState.toUpperCase()}</Text>
+          </View>
+        </View>
+
+        <SpeedSelector current={speed} onChange={handleSpeedChange} />
+
+        <View style={s.pauseRow}>
+          <PauseResumeButton
+            state={engineState}
+            onPause={simulator.pause}
+            onResume={simulator.resume}
+          />
+        </View>
+
+        {showScenarioLog && <ScenarioLog entries={scenarioLog} />}
+
+        {showSessionRecorder && (
+          <SessionRecorderControls
+            isRecording={isRecording}
+            session={session}
+            onExport={onExportSession}
+            lastSession={lastSession}
+          />
+        )}
+      </View>
+    );
+  }
+
+  // ── Floating ───────────────────────────────────────────────────────────────
+  const sheetHeight = sheetAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [44, showScenarioLog ? 260 : 160],
+  });
+
+  return (
+    <Animated.View style={[s.floating, { height: sheetHeight }, containerStyle]}>
+      {/* Handle */}
+      <TouchableOpacity style={s.floatHandle} onPress={toggleSheet} activeOpacity={0.8}>
+        <View style={s.handleBar} />
+        <Text style={s.floatTitle}>SIMULATOR {isExpanded ? '▼' : '▲'}</Text>
+      </TouchableOpacity>
+
+      {/* Content (only visible when expanded) */}
+      {isExpanded && (
+        <View style={s.floatContent}>
+          <SpeedSelector current={speed} onChange={handleSpeedChange} />
+          <View style={s.pauseRow}>
+            <PauseResumeButton
+              state={engineState}
+              onPause={simulator.pause}
+              onResume={simulator.resume}
+            />
+          </View>
+          {showScenarioLog && <ScenarioLog entries={scenarioLog} />}
+        </View>
+      )}
+    </Animated.View>
+  );
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+const s = StyleSheet.create({
+  // Minimal
+  minimal: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingHorizontal: 4,
+    paddingVertical: 6,
+  },
+
+  // Full
+  full: {
+    backgroundColor: KW.navyCard,
+    borderRadius: 12,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: KW.navyBorder,
+  },
+  fullHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  fullTitle: {
+    fontSize: 11,
+    fontWeight: '800',
+    color: KW.slateLight,
+    letterSpacing: 1.5,
+  },
+  stateBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: KW.navyDeep,
+    borderWidth: 1,
+    borderColor: KW.navyBorder,
+  },
+  stateBadgeActive: { borderColor: KW.emerald },
+  stateText: { fontSize: 9, fontWeight: '700', color: KW.slate, letterSpacing: 1 },
+  pauseRow: { marginTop: 8 },
+
+  // Floating
+  floating: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: KW.navyCard,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    borderTopWidth: 1,
+    borderColor: KW.navyBorder,
+    overflow: 'hidden',
+    zIndex: 100,
+  },
+  floatHandle: {
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 10,
+  },
+  handleBar: {
+    width: 36,
+    height: 4,
+    backgroundColor: KW.navyBorder,
+    borderRadius: 2,
+  },
+  floatTitle: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: KW.slate,
+    letterSpacing: 1.2,
+  },
+  floatContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8,
+  },
+});