@jjlmoya/utils-motor 1.3.0 → 1.5.0

package/src/tool/motorcycleSkidMarkSpeedEstimator/logic.ts

@@ -0,0 +1,179 @@
+export const GRAVITY = 9.80665;
+export const METERS_PER_FOOT = 0.3048;
+export const MPS_TO_KMH = 3.6;
+export const MPS_TO_MPH = 2.236936292;
+export const MIN_FRICTION = 0.05;
+export const MAX_FRICTION = 1.2;
+export const MIN_LENGTH_M = 1;
+export const MAX_LENGTH_M = 200;
+export const MIN_GRADE = -20;
+export const MAX_GRADE = 20;
+
+export type UnitSystem = 'metric' | 'imperial';
+export type BrakeUse = 'both' | 'front' | 'rear' | 'unknown';
+export type SurfaceId =
+  | 'dry-asphalt'
+  | 'wet-asphalt'
+  | 'dry-concrete'
+  | 'gravel'
+  | 'grass'
+  | 'ice'
+  | 'custom';
+
+export interface SurfaceSpec {
+  id: SurfaceId;
+  mu: number;
+  muLow: number;
+  muHigh: number;
+}
+
+export interface SkidInput {
+  lengthMeters: number;
+  friction: number;
+  gradePercent: number;
+  surface: SurfaceId;
+  brakeUse: BrakeUse;
+}
+
+export interface SpeedBand {
+  lowMps: number;
+  midMps: number;
+  highMps: number;
+  dragLow: number;
+  dragMid: number;
+  dragHigh: number;
+}
+
+export interface SkidEstimate {
+  status: 'ready' | 'invalid';
+  band: SpeedBand | null;
+  friction: number;
+  lengthMeters: number;
+}
+
+export const SURFACE_SPECS: readonly SurfaceSpec[] = [
+  { id: 'dry-asphalt', mu: 0.7, muLow: 0.55, muHigh: 0.85 },
+  { id: 'wet-asphalt', mu: 0.5, muLow: 0.35, muHigh: 0.65 },
+  { id: 'dry-concrete', mu: 0.75, muLow: 0.6, muHigh: 0.9 },
+  { id: 'gravel', mu: 0.5, muLow: 0.35, muHigh: 0.7 },
+  { id: 'grass', mu: 0.4, muLow: 0.25, muHigh: 0.55 },
+  { id: 'ice', mu: 0.1, muLow: 0.05, muHigh: 0.18 },
+  { id: 'custom', mu: 0.7, muLow: 0.6, muHigh: 0.8 },
+];
+
+const BRAKE_SPAN: Record<BrakeUse, { low: number; mid: number; high: number }> = {
+  both: { low: 1, mid: 1, high: 1 },
+  front: { low: 0.7, mid: 0.7, high: 0.7 },
+  rear: { low: 0.45, mid: 0.45, high: 0.45 },
+  unknown: { low: 0.45, mid: 0.7, high: 1 },
+};
+
+export function isUnitSystem(value: string): value is UnitSystem {
+  return value === 'metric' || value === 'imperial';
+}
+
+export function isBrakeUse(value: string): value is BrakeUse {
+  return value === 'both' || value === 'front' || value === 'rear' || value === 'unknown';
+}
+
+export function isSurfaceId(value: string): value is SurfaceId {
+  return SURFACE_SPECS.some((spec) => spec.id === value);
+}
+
+const DEFAULT_SURFACE: SurfaceSpec = { id: 'dry-asphalt', mu: 0.7, muLow: 0.55, muHigh: 0.85 };
+
+export function getSurfaceSpec(id: SurfaceId): SurfaceSpec {
+  return SURFACE_SPECS.find((spec) => spec.id === id) ?? DEFAULT_SURFACE;
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function lengthToMeters(length: number, unit: UnitSystem): number {
+  const safe = Number.isFinite(length) ? Math.max(0, length) : 0;
+  return unit === 'imperial' ? safe * METERS_PER_FOOT : safe;
+}
+
+export function metersToLength(meters: number, unit: UnitSystem): number {
+  const safe = Number.isFinite(meters) ? Math.max(0, meters) : 0;
+  return unit === 'imperial' ? safe / METERS_PER_FOOT : safe;
+}
+
+export function speedFromMps(mps: number, unit: UnitSystem): number {
+  const safe = Number.isFinite(mps) ? Math.max(0, mps) : 0;
+  return unit === 'imperial' ? safe * MPS_TO_MPH : safe * MPS_TO_KMH;
+}
+
+export function parsePositiveNumber(raw: string): number | null {
+  const value = Number.parseFloat(raw);
+  if (!Number.isFinite(value) || value <= 0) return null;
+  return value;
+}
+
+export function parseSignedNumber(raw: string): number | null {
+  const value = Number.parseFloat(raw);
+  if (!Number.isFinite(value)) return null;
+  return value;
+}
+
+export function dragFactor(friction: number, efficiency: number, gradePercent: number): number {
+  const mu = clamp(friction, MIN_FRICTION, MAX_FRICTION);
+  const n = clamp(efficiency, 0, 1);
+  const grade = clamp(gradePercent, MIN_GRADE, MAX_GRADE) / 100;
+  return mu * n + grade;
+}
+
+export function speedFromSkid(lengthMeters: number, drag: number): number | null {
+  if (!(lengthMeters > 0) || !(drag > 0)) return null;
+  return Math.sqrt(2 * GRAVITY * drag * lengthMeters);
+}
+
+function customSensitivity(friction: number): { low: number; high: number } {
+  return {
+    low: clamp(friction - 0.1, MIN_FRICTION, MAX_FRICTION),
+    high: clamp(friction + 0.1, MIN_FRICTION, MAX_FRICTION),
+  };
+}
+
+function frictionBand(input: SkidInput): { low: number; mid: number; high: number } {
+  const spec = getSurfaceSpec(input.surface);
+  if (input.surface === 'custom') {
+    const span = customSensitivity(input.friction);
+    return { low: span.low, mid: clamp(input.friction, MIN_FRICTION, MAX_FRICTION), high: span.high };
+  }
+  return { low: spec.muLow, mid: spec.mu, high: spec.muHigh };
+}
+
+function buildBand(input: SkidInput): SpeedBand | null {
+  const brakes = BRAKE_SPAN[input.brakeUse];
+  const mu = frictionBand(input);
+  const dragLow = dragFactor(mu.low, brakes.low, input.gradePercent);
+  const dragMid = dragFactor(mu.mid, brakes.mid, input.gradePercent);
+  const dragHigh = dragFactor(mu.high, brakes.high, input.gradePercent);
+  const low = speedFromSkid(input.lengthMeters, dragLow);
+  const mid = speedFromSkid(input.lengthMeters, dragMid);
+  const high = speedFromSkid(input.lengthMeters, dragHigh);
+  if (low === null || mid === null || high === null) return null;
+  return { lowMps: low, midMps: mid, highMps: high, dragLow, dragMid, dragHigh };
+}
+
+export function estimateSkidSpeed(input: SkidInput): SkidEstimate {
+  const lengthMeters = clamp(input.lengthMeters, MIN_LENGTH_M, MAX_LENGTH_M);
+  const friction = clamp(input.friction, MIN_FRICTION, MAX_FRICTION);
+  const band = buildBand({ ...input, lengthMeters, friction });
+  if (!band) {
+    return { status: 'invalid', band: null, friction, lengthMeters };
+  }
+  return { status: 'ready', band, friction, lengthMeters };
+}
+
+export function markRatio(lengthMeters: number): number {
+  const clamped = clamp(lengthMeters, MIN_LENGTH_M, MAX_LENGTH_M);
+  const t = Math.log(clamped) / Math.log(MAX_LENGTH_M);
+  return 0.28 + t * 0.64;
+}
+
+export function gradeTilt(gradePercent: number): number {
+  return clamp(gradePercent, MIN_GRADE, MAX_GRADE) * 0.55;
+}

package/src/tool/motorcycleSkidMarkSpeedEstimator/motorcycle-skid-mark-speed-estimator.css

@@ -0,0 +1,523 @@
+.trace {
+  --trace-bg-primary: #f8fafc;
+  --trace-bg-secondary: #fff;
+  --trace-bg-card: rgba(255, 255, 255, 0.95);
+  --trace-border: #e2e8f0;
+  --trace-border-active: #0284c7;
+  --trace-text-primary: #0f172a;
+  --trace-text-muted: #64748b;
+  --trace-accent-cyan: #0284c7;
+  --trace-accent-amber: #d97706;
+  --trace-accent-red: #dc2626;
+  --trace-road-asphalt: #334155;
+  --trace-grit-color: #475569;
+  --trace-rubber-mark: #0f172a;
+  --trace-metal-silver: #475569;
+  --trace-hud-bg: rgba(255, 255, 255, 0.92);
+  --trace-hud-shadow: rgba(0, 0, 0, 0.12);
+  --trace-input-bg: #f1f5f9;
+  --trace-segmented-bg: #f1f5f9;
+  --trace-span: 0.55;
+  --trace-tilt: 0deg;
+
+  color: var(--trace-text-primary);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.theme-dark .trace {
+  --trace-bg-primary: #0f172a;
+  --trace-bg-secondary: #1e293b;
+  --trace-bg-card: rgba(30, 41, 59, 0.85);
+  --trace-border: rgba(255, 255, 255, 0.1);
+  --trace-border-active: #38bdf8;
+  --trace-text-primary: #f8fafc;
+  --trace-text-muted: #94a3b8;
+  --trace-accent-cyan: #38bdf8;
+  --trace-accent-amber: #f59e0b;
+  --trace-accent-red: #ef4444;
+  --trace-road-asphalt: #334155;
+  --trace-grit-color: #475569;
+  --trace-rubber-mark: #0f172a;
+  --trace-metal-silver: #cbd5e1;
+  --trace-hud-bg: rgba(15, 23, 42, 0.88);
+  --trace-hud-shadow: rgba(0, 0, 0, 0.6);
+  --trace-input-bg: rgba(15, 23, 42, 0.8);
+  --trace-segmented-bg: rgba(15, 23, 42, 0.6);
+}
+
+.trace * {
+  box-sizing: border-box;
+}
+
+.trace-card {
+  background: var(--trace-bg-primary);
+  border: 1px solid var(--trace-border);
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 20px 25px -5px var(--trace-hud-shadow), 0 8px 10px -6px var(--trace-hud-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.trace-header {
+  background: var(--trace-bg-secondary);
+  padding: 1.25rem 1.5rem;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1.5rem;
+  align-items: center;
+  border-bottom: 1px solid var(--trace-border);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.trace-control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.trace-label-sm {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--trace-text-muted);
+}
+
+.trace-segmented {
+  display: inline-flex;
+  background: var(--trace-segmented-bg);
+  padding: 0.25rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--trace-border);
+  gap: 0.25rem;
+}
+
+.trace-pill {
+  border: none;
+  background: transparent;
+  color: var(--trace-text-muted);
+  padding: 0.45rem 0.85rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  border-radius: 0.45rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.trace-pill:hover {
+  color: var(--trace-text-primary);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.theme-dark .trace-pill:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.trace-pill.is-stencil,
+.trace-pill.is-lock {
+  background: var(--trace-accent-cyan);
+  color: #fff;
+  font-weight: 600;
+  box-shadow: 0 0 12px rgba(2, 132, 199, 0.3);
+}
+
+.theme-dark .trace-pill.is-stencil,
+.theme-dark .trace-pill.is-lock {
+  color: #0f172a;
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
+}
+
+.trace-pill-unit {
+  font-size: 0.7rem;
+  opacity: 0.85;
+  font-weight: 400;
+}
+
+.trace-length-group {
+  max-width: 220px;
+  justify-self: center;
+  width: 100%;
+}
+
+.trace-length-input-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 100%;
+}
+
+.trace-input-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--trace-text-muted);
+}
+
+.trace-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: var(--trace-input-bg);
+  border: 1px solid var(--trace-border);
+  border-radius: 0.6rem;
+  overflow: hidden;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.trace-input-wrapper:focus-within {
+  border-color: var(--trace-accent-cyan);
+  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
+}
+
+.trace-numeric-input {
+  background: transparent;
+  border: none;
+  color: var(--trace-text-primary);
+  padding: 0.5rem 0.75rem;
+  font-size: 1.1rem;
+  font-weight: 700;
+  width: 100%;
+  outline: none;
+}
+
+.trace-unit-badge {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--trace-accent-cyan);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.theme-dark .trace-unit-badge {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.trace-canvas-container {
+  position: relative;
+  background: #1e293b;
+  cursor: ew-resize;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
+}
+
+.trace-hud-overlay {
+  position: absolute;
+  top: 1.25rem;
+  left: 1.25rem;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.trace-hud-badge {
+  background: var(--trace-hud-bg);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--trace-border);
+  border-radius: 0.75rem;
+  padding: 0.85rem 1.25rem;
+  box-shadow: 0 10px 25px -5px var(--trace-hud-shadow);
+}
+
+.trace-hud-caption {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--trace-text-muted);
+  display: block;
+  margin-bottom: 0.2rem;
+}
+
+.trace-hud-speed {
+  font-size: 2.2rem;
+  font-weight: 800;
+  color: var(--trace-accent-cyan);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.trace-hud-range {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--trace-text-muted);
+  margin-top: 0.25rem;
+}
+
+.trace[data-eval='invalid'] .trace-hud-speed {
+  font-size: 1.25rem;
+  color: var(--trace-accent-red);
+  text-shadow: none;
+}
+
+.trace-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 260px;
+  transform: rotate(var(--trace-tilt));
+  transform-origin: center center;
+  transition: transform 0.3s ease;
+}
+
+.trace-fill-road {
+  fill: var(--trace-road-asphalt);
+  transition: fill 0.4s ease;
+}
+
+.trace-fill-grit {
+  fill: var(--trace-grit-color);
+}
+
+.trace-lane {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.4);
+  stroke-width: 5;
+  stroke-dasharray: 28 20;
+}
+
+.trace-scar-line {
+  fill: none;
+  stroke: var(--trace-rubber-mark);
+  stroke-linecap: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: calc(1 - var(--trace-span));
+  transition: stroke-dashoffset 0.1s linear, opacity 0.3s ease;
+}
+
+.trace-scar-rear {
+  stroke-width: 20;
+}
+
+.trace-scar-front {
+  stroke-width: 12;
+}
+
+.trace-stria {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.25);
+  stroke-width: 2;
+  stroke-dasharray: 1;
+  stroke-dashoffset: calc(1 - var(--trace-span));
+  transition: stroke-dashoffset 0.1s linear;
+}
+
+.trace[data-brake='rear'] .trace-scar-front,
+.trace[data-brake='front'] .trace-scar-rear {
+  opacity: 0.15;
+}
+
+.trace[data-brake='unknown'] .trace-scar-line {
+  opacity: 0.45;
+}
+
+.trace-tyre {
+  fill: #090d16;
+}
+
+.trace-hub {
+  fill: var(--trace-metal-silver);
+}
+
+.trace-rotor {
+  fill: none;
+  stroke: var(--trace-metal-silver);
+  stroke-width: 4;
+  transition: all 0.3s ease;
+}
+
+.trace[data-brake='rear'] .trace-rotor-rear,
+.trace[data-brake='both'] .trace-rotor-rear,
+.trace[data-brake='front'] .trace-rotor-front,
+.trace[data-brake='both'] .trace-rotor-front {
+  fill: var(--trace-accent-amber);
+  stroke: var(--trace-accent-amber);
+}
+
+.trace-swing,
+.trace-bars,
+.trace-pipe,
+.trace-rider {
+  fill: none;
+  stroke: var(--trace-accent-cyan);
+  stroke-width: 4.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.trace-body,
+.trace-saddle {
+  fill: #1e293b;
+  stroke: var(--trace-accent-cyan);
+  stroke-width: 2;
+}
+
+.trace-head {
+  fill: var(--trace-accent-cyan);
+}
+
+.trace-controls-bottom {
+  background: var(--trace-bg-secondary);
+  padding: 1.25rem 1.5rem;
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 1.5rem;
+  border-top: 1px solid var(--trace-border);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.trace-section-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--trace-text-muted);
+  margin: 0 0 0.75rem;
+}
+
+.trace-surface-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 0.5rem;
+}
+
+.trace-surface-chip {
+  background: var(--trace-segmented-bg);
+  border: 1px solid var(--trace-border);
+  border-radius: 0.6rem;
+  color: var(--trace-text-primary);
+  padding: 0.6rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.trace-surface-chip:hover {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: var(--trace-text-muted);
+}
+
+.theme-dark .trace-surface-chip:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.trace-surface-dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  background: var(--trace-text-muted);
+  flex-shrink: 0;
+}
+
+.trace-surface-chip[data-tone='dry'] .trace-surface-dot { background: #64748b; }
+.trace-surface-chip[data-tone='wet'] .trace-surface-dot { background: #0284c7; }
+.trace-surface-chip[data-tone='concrete'] .trace-surface-dot { background: #94a3b8; }
+.trace-surface-chip[data-tone='gravel'] .trace-surface-dot { background: #d97706; }
+.trace-surface-chip[data-tone='earth'] .trace-surface-dot { background: #16a34a; }
+.trace-surface-chip[data-tone='ice'] .trace-surface-dot { background: #0284c7; }
+.trace-surface-chip[data-tone='steel'] .trace-surface-dot { background: #dc2626; }
+
+.trace-surface-chip.is-core {
+  border-color: var(--trace-accent-cyan);
+  background: rgba(2, 132, 199, 0.1);
+  color: var(--trace-accent-cyan);
+  font-weight: 600;
+  box-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
+}
+
+.theme-dark .trace-surface-chip.is-core {
+  background: rgba(56, 189, 248, 0.12);
+  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
+}
+
+.trace-sliders-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.trace-slider-card {
+  background: var(--trace-segmented-bg);
+  border: 1px solid var(--trace-border);
+  border-radius: 0.6rem;
+  padding: 0.75rem 1rem;
+}
+
+.trace-slider-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.trace-slider-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--trace-text-muted);
+}
+
+.trace-small-input {
+  background: var(--trace-input-bg);
+  border: 1px solid var(--trace-border);
+  border-radius: 0.4rem;
+  color: var(--trace-accent-cyan);
+  font-size: 0.85rem;
+  font-weight: 700;
+  width: 4rem;
+  padding: 0.2rem 0.4rem;
+  text-align: right;
+  outline: none;
+}
+
+.trace-small-input:focus {
+  border-color: var(--trace-accent-cyan);
+}
+
+.trace-slider-val-badge {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--trace-accent-cyan);
+}
+
+.trace-range-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--trace-border);
+  outline: none;
+  accent-color: var(--trace-accent-cyan);
+  cursor: pointer;
+}
+
+/* Dynamic surface environment colors */
+.trace[data-surface='wet-asphalt'] .trace-fill-road { fill: #1e293b; }
+.trace[data-surface='dry-concrete'] .trace-fill-road { fill: #475569; }
+.trace[data-surface='gravel'] .trace-fill-road { fill: #451a03; }
+.trace[data-surface='grass'] .trace-fill-road { fill: #064e3b; }
+.trace[data-surface='ice'] .trace-fill-road { fill: #1e3a8a; }
+
+@media (max-width: 900px) {
+  .trace-header {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .trace-length-group {
+    max-width: 100%;
+  }
+
+  .trace-controls-bottom {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/motorcycleSkidMarkSpeedEstimator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { motorcycleSkidMarkSpeedEstimator } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = motorcycleSkidMarkSpeedEstimator.i18n[locale] ?? motorcycleSkidMarkSpeedEstimator.i18n.en;
+const content = await loader?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}