@jjlmoya/utils-motor 1.3.0 → 1.4.0

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 }} />}

package/src/tool/motorcycleSkidMarkSpeedEstimator/storage.ts

@@ -0,0 +1,49 @@
+import {
+  isBrakeUse,
+  isSurfaceId,
+  isUnitSystem,
+  type BrakeUse,
+  type SurfaceId,
+  type UnitSystem,
+} from './logic';
+
+export interface SavedSkidState {
+  lengthMeters: number;
+  unit: UnitSystem;
+  surface: SurfaceId;
+  friction: number;
+  gradePercent: number;
+  brakeUse: BrakeUse;
+}
+
+const STORAGE_KEY = 'jjlmoya:motorcycle-skid-mark-speed-estimator';
+
+function isSavedSkidState(value: unknown): value is SavedSkidState {
+  if (!value || typeof value !== 'object') return false;
+  const state = value as SavedSkidState;
+  return (
+    typeof state.lengthMeters === 'number' &&
+    isUnitSystem(state.unit) &&
+    isSurfaceId(state.surface) &&
+    typeof state.friction === 'number' &&
+    typeof state.gradePercent === 'number' &&
+    isBrakeUse(state.brakeUse)
+  );
+}
+
+export function loadSkidState(): SavedSkidState | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed: unknown = JSON.parse(raw);
+    return isSavedSkidState(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveSkidState(state: SavedSkidState): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {}
+}

package/src/tool/motorcycleSkidMarkSpeedEstimator/ui.ts

@@ -0,0 +1,46 @@
+export interface MotorcycleSkidMarkSpeedEstimatorUI extends Record<string, string> {
+  unitMetric: string;
+  unitImperial: string;
+  disclaimer: string;
+  lengthLabel: string;
+  lengthHint: string;
+  gradeLabel: string;
+  gradeHint: string;
+  surfaceLabel: string;
+  frictionLabel: string;
+  frictionHint: string;
+  brakeLabel: string;
+  brakeBoth: string;
+  brakeFront: string;
+  brakeRear: string;
+  brakeUnknown: string;
+  speedLabel: string;
+  rangeLabel: string;
+  dragHint: string;
+  emptyMessage: string;
+  invalidMessage: string;
+  readyMessage: string;
+  educationalBadge: string;
+  surfaceDryAsphalt: string;
+  surfaceWetAsphalt: string;
+  surfaceDryConcrete: string;
+  surfaceGravel: string;
+  surfaceGrass: string;
+  surfaceIce: string;
+  surfaceCustom: string;
+  sensitivityLabel: string;
+  lowAssumption: string;
+  highAssumption: string;
+  gradeUphill: string;
+  gradeDownhill: string;
+  gradeLevel: string;
+  measureHint: string;
+  stencilUnitKmh: string;
+  stencilUnitMph: string;
+  lengthUnitM: string;
+  lengthUnitFt: string;
+  percentSuffix: string;
+  dragLowLabel: string;
+  dragMidLabel: string;
+  dragHighLabel: string;
+}

package/src/tools.ts

@@ -1,7 +1,8 @@
 export { ALL_ENTRIES } from './entries';
 import { BRAKING_DISTANCE_CALCULATOR_TOOL } from './tool/brakingDistanceCalculator';
 import { CAR_MOTORCYCLE_GEAR_RATIO_CALCULATOR_TOOL } from './tool/carMotorcycleGearRatioCalculator';
+import { MOTORCYCLE_SKID_MARK_SPEED_ESTIMATOR_TOOL } from './tool/motorcycleSkidMarkSpeedEstimator';
 import { REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL } from './tool/realFuelConsumptionCalculator';
 import { TIRE_PRESSURE_CONVERTER_TOOL } from './tool/tirePressureConverter';
 
-export const ALL_TOOLS = [BRAKING_DISTANCE_CALCULATOR_TOOL, REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL, CAR_MOTORCYCLE_GEAR_RATIO_CALCULATOR_TOOL, TIRE_PRESSURE_CONVERTER_TOOL];
+export const ALL_TOOLS = [BRAKING_DISTANCE_CALCULATOR_TOOL, REAL_FUEL_CONSUMPTION_CALCULATOR_TOOL, CAR_MOTORCYCLE_GEAR_RATIO_CALCULATOR_TOOL, TIRE_PRESSURE_CONVERTER_TOOL, MOTORCYCLE_SKID_MARK_SPEED_ESTIMATOR_TOOL];