@jjlmoya/utils-motor 1.1.0

package/src/tool/brakingDistanceCalculator/braking-distance-calculator.css

@@ -0,0 +1,601 @@
+.bdc-shell {
+  --n-ink: #17211f;
+  --n-muted: #66736f;
+  --n-paper: #f4efe3;
+  --n-panel: #fffaf0;
+  --n-line: #d5ccba;
+  --n-asphalt: #202827;
+  --n-asphalt-soft: #36403e;
+  --n-cream: #f7e8b4;
+  --n-amber: #f2a93b;
+  --n-red: #d44b3f;
+  --n-green: #3c8b68;
+  --n-blue: #87b9c1;
+  --n-shadow: #16211f24;
+  --v-stage: #eef3ef;
+  --v-sky-soft: #dbe6df;
+  --v-road: #4d5956;
+  --v-card: #fffaf0;
+  --v-ink: #17211f;
+  --v-muted: #5d6d68;
+  --v-lane: #fff1bd;
+  --v-lab: #fffffff2;
+  --bdc-reaction-share: 43.4%;
+  --bdc-braking-share: 56.6%;
+  --bdc-stop-share: 89%;
+  --bdc-gap-share: 46%;
+
+  container-type: inline-size;
+  color: var(--n-ink);
+}
+
+.theme-dark .bdc-shell {
+  --n-ink: #edf2e9;
+  --n-muted: #aebbb5;
+  --n-paper: #121817;
+  --n-panel: #1b2422;
+  --n-line: #394541;
+  --n-asphalt: #080c0c;
+  --n-asphalt-soft: #242e2c;
+  --n-cream: #f7df96;
+  --n-shadow: #0008;
+  --v-stage: #202827;
+  --v-sky-soft: #36403e;
+  --v-road: #303a38;
+  --v-card: #202827;
+  --v-ink: #f7df96;
+  --v-muted: #aebbb5;
+  --v-lane: #f7df96;
+  --v-lab: #28322fcc;
+}
+
+.bdc-dashboard {
+  display: grid;
+  grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.45fr);
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 1.5rem;
+  background: var(--n-paper);
+  box-shadow: 0 1.5rem 4rem var(--n-shadow);
+}
+
+.bdc-controls {
+  display: grid;
+  gap: 1.35rem;
+  padding: clamp(1.25rem, 3vw, 2rem);
+  background: var(--n-panel);
+  border-right: 1px solid var(--n-line);
+}
+
+.bdc-toggle-row,
+.bdc-choice,
+.bdc-slider,
+.bdc-surfaces {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.bdc-toggle-row {
+  grid-template-columns: 1fr 1fr;
+}
+
+.bdc-choice {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.bdc-choice > span,
+.bdc-surfaces > span {
+  grid-column: 1 / -1;
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.bdc-choice button,
+.bdc-surface-grid button {
+  min-height: 2.6rem;
+  border: 1px solid var(--n-line);
+  border-radius: 0.7rem;
+  color: var(--n-ink);
+  background: var(--n-paper);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.bdc-choice button[aria-pressed="true"],
+.bdc-surface-grid button[aria-pressed="true"] {
+  border-color: var(--n-ink);
+  color: var(--n-panel);
+  background: var(--n-ink);
+}
+
+.bdc-slider {
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  color: var(--n-muted);
+  font-size: 0.85rem;
+}
+
+.bdc-slider strong {
+  color: var(--n-ink);
+  font-size: 1rem;
+}
+
+.bdc-slider input {
+  grid-column: 1 / -1;
+  width: 100%;
+  accent-color: var(--n-amber);
+}
+
+.bdc-surface-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.55rem;
+}
+
+.bdc-deceleration {
+  margin-top: 1rem;
+}
+
+.bdc-advanced {
+  padding-top: 0.85rem;
+  border-top: 1px dashed var(--n-line);
+}
+
+.bdc-advanced summary {
+  color: var(--n-muted);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+
+.bdc-visual {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto auto auto auto auto;
+  min-height: 38rem;
+  overflow: hidden;
+  background: var(--v-stage);
+  color: var(--v-ink);
+}
+
+.bdc-sky {
+  position: relative;
+  min-height: 13rem;
+  background: linear-gradient(180deg, var(--v-stage), var(--v-sky-soft));
+}
+
+.bdc-moon {
+  position: absolute;
+  top: 2rem;
+  right: 8%;
+  width: 4.5rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--n-amber);
+  box-shadow: 0 0 3rem color-mix(in srgb, var(--n-amber) 55%, transparent);
+  opacity: 0.88;
+}
+
+.bdc-status-lamp {
+  position: absolute;
+  left: clamp(1rem, 4vw, 3rem);
+  top: 2.2rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  max-width: 26rem;
+}
+
+.bdc-status-lamp span {
+  flex: 0 0 auto;
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-top: 0.28rem;
+  border-radius: 50%;
+  background: var(--n-amber);
+  box-shadow: 0 0 1rem var(--n-amber);
+}
+
+.bdc-shell[data-status="normal"] .bdc-status-lamp span {
+  background: var(--n-green);
+  box-shadow: 0 0 1rem var(--n-green);
+}
+
+.bdc-shell[data-status="critical"] .bdc-status-lamp span {
+  background: var(--n-red);
+  box-shadow: 0 0 1rem var(--n-red);
+}
+
+.bdc-status-lamp p {
+  margin: 0;
+  color: var(--v-ink);
+  font-size: clamp(1.05rem, 2vw, 1.35rem);
+  line-height: 1.35;
+}
+
+.bdc-road {
+  position: relative;
+  min-height: 12rem;
+  margin: 0 clamp(1rem, 4vw, 3rem);
+  border-top: 0.28rem solid var(--v-lane);
+  border-bottom: 0.28rem solid var(--v-lane);
+  background: repeating-linear-gradient(90deg, transparent 0 8%, var(--v-lane) 8% 12%, transparent 12% 20%) center / 100% 0.24rem no-repeat, var(--v-road);
+}
+
+.bdc-road::before {
+  content: '';
+  position: absolute;
+  inset: -6rem 0 auto;
+  height: 6rem;
+  background: linear-gradient(90deg, transparent, var(--n-amber), transparent);
+  clip-path: polygon(0 100%, 50% 0, 100% 100%);
+  opacity: 0.13;
+}
+
+.bdc-segment {
+  position: absolute;
+  inset-block: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0.25rem;
+  min-width: 4rem;
+  padding: 1rem;
+}
+
+.bdc-reaction {
+  left: 0;
+  width: var(--bdc-reaction-share);
+  background: linear-gradient(90deg, transparent, var(--n-blue));
+}
+
+.bdc-braking {
+  left: var(--bdc-reaction-share);
+  width: var(--bdc-braking-share);
+  background: linear-gradient(90deg, var(--n-amber), transparent);
+}
+
+.bdc-segment span,
+.bdc-road-label,
+.bdc-brake-marker span,
+.bdc-stop-marker span {
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.bdc-segment strong {
+  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
+}
+
+.bdc-brake-marker,
+.bdc-stop-marker {
+  position: absolute;
+  inset-block: 0;
+  z-index: 2;
+  width: 0.2rem;
+  background: var(--n-red);
+}
+
+.bdc-brake-marker {
+  left: var(--bdc-reaction-share);
+}
+
+.bdc-stop-marker {
+  left: var(--bdc-stop-share);
+}
+
+.bdc-brake-marker span,
+.bdc-stop-marker span {
+  position: absolute;
+  bottom: calc(100% + 0.6rem);
+  left: 50%;
+  color: var(--v-ink);
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+.bdc-start {
+  position: absolute;
+  bottom: calc(100% + 0.6rem);
+  left: 0;
+  color: var(--v-ink);
+}
+
+.bdc-vehicle {
+  position: absolute;
+  left: 1rem;
+  top: 35%;
+  width: 4.4rem;
+  height: 2rem;
+  border-radius: 1.2rem 1.6rem 0.4rem 0.4rem;
+  background: var(--n-red);
+  box-shadow: 0.7rem 0 1.2rem var(--n-amber);
+}
+
+.bdc-lead-vehicle {
+  position: absolute;
+  z-index: 4;
+  left: var(--bdc-gap-share);
+  top: 18%;
+  width: 4rem;
+  height: 1.85rem;
+  border-radius: 1.2rem 1.6rem 0.4rem 0.4rem;
+  background: var(--n-cream);
+  box-shadow: 0 0 1.2rem #f7e8b466;
+  transform: translateX(-50%);
+}
+
+.bdc-lead-vehicle::before,
+.bdc-lead-vehicle::after {
+  content: '';
+  position: absolute;
+  bottom: -0.5rem;
+  width: 0.95rem;
+  aspect-ratio: 1;
+  border: 0.18rem solid var(--n-line);
+  border-radius: 50%;
+  background: var(--n-asphalt);
+}
+
+.bdc-lead-vehicle::before {
+  left: 0.5rem;
+}
+
+.bdc-lead-vehicle::after {
+  right: 0.5rem;
+}
+
+.bdc-lead-vehicle span {
+  position: absolute;
+  top: calc(100% + 0.65rem);
+  left: 50%;
+  color: var(--v-lane);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  transform: translateX(-50%);
+}
+
+@container (max-width: 56rem) {
+  .bdc-dashboard {
+    grid-template-columns: 1fr;
+  }
+
+  .bdc-controls {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+}
+
+.bdc-shell[data-simulating="true"] .bdc-vehicle {
+  animation: bdc-stop-run 2.8s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
+}
+
+.bdc-shell[data-simulating="complete"] .bdc-vehicle {
+  left: var(--bdc-stop-share);
+  transform: translateX(-50%);
+}
+
+.bdc-shell:has(.bdc-gap-lab[data-gap-status="insufficient"])[data-simulating="complete"] .bdc-lead-vehicle {
+  background: var(--n-red);
+  box-shadow: 0 0 2rem var(--n-red);
+}
+
+@keyframes bdc-stop-run {
+  from {
+    left: 1rem;
+    transform: translateX(0);
+  }
+
+  to {
+    left: var(--bdc-stop-share);
+    transform: translateX(-50%);
+  }
+}
+
+.bdc-gap-lab {
+  display: grid;
+  gap: 0.85rem;
+  margin: 1.1rem clamp(1rem, 4vw, 3rem) 0;
+  padding: 1rem;
+  border: 1px solid color-mix(in srgb, var(--n-amber) 45%, var(--n-line));
+  background: var(--v-lab);
+}
+
+.bdc-gap-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.bdc-gap-heading > div > span {
+  font-size: 0.72rem;
+  font-weight: 850;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.bdc-gap-heading p {
+  max-width: 30rem;
+  margin: 0.3rem 0 0;
+  color: var(--v-ink);
+  font-size: 0.82rem;
+  line-height: 1.35;
+}
+
+.bdc-gap-heading button {
+  flex: 0 0 auto;
+  min-height: 2.6rem;
+  padding: 0.65rem 1rem;
+  border: 1px solid var(--v-ink);
+  border-radius: 999px;
+  color: var(--v-stage);
+  background: var(--v-ink);
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.bdc-gap-slider {
+  color: var(--v-ink);
+}
+
+.bdc-gap-slider strong {
+  color: var(--v-ink);
+}
+
+.bdc-gap-values {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.65rem;
+}
+
+.bdc-gap-values div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.65rem 0.75rem;
+  background: color-mix(in srgb, var(--v-stage) 72%, transparent);
+}
+
+.bdc-gap-values span {
+  color: var(--v-muted);
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.bdc-gap-values strong {
+  color: var(--v-ink);
+}
+
+.bdc-gap-lab[data-gap-status="enough"] {
+  border-color: var(--n-green);
+}
+
+.bdc-gap-lab[data-gap-status="enough"] .bdc-gap-values div:last-child strong {
+  color: #81d6aa;
+}
+
+.bdc-gap-lab[data-gap-status="insufficient"] {
+  border-color: var(--n-red);
+}
+
+.bdc-gap-lab[data-gap-status="insufficient"] .bdc-gap-values div:last-child strong {
+  color: #ff8f84;
+}
+
+.bdc-gap-hint {
+  margin: 0;
+  color: var(--v-muted);
+  font-size: 0.7rem;
+  line-height: 1.35;
+}
+
+.bdc-vehicle::before,
+.bdc-vehicle::after {
+  content: '';
+  position: absolute;
+  bottom: -0.55rem;
+  width: 1.05rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--n-asphalt);
+  border: 0.2rem solid var(--n-line);
+}
+
+.bdc-vehicle::before {
+  left: 0.55rem;
+}
+
+.bdc-vehicle::after {
+  right: 0.55rem;
+}
+
+.bdc-result-ribbon {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  margin: clamp(1rem, 4vw, 3rem);
+  background: var(--n-line);
+  border: 1px solid var(--n-line);
+}
+
+.bdc-result-ribbon div {
+  display: grid;
+  gap: 0.2rem;
+  padding: 1rem;
+  background: var(--v-card);
+}
+
+.bdc-result-ribbon span {
+  color: var(--v-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.bdc-result-ribbon strong {
+  color: var(--v-ink);
+  font-size: clamp(1.6rem, 4vw, 2.7rem);
+}
+
+.bdc-vehicle-note,
+.bdc-notice {
+  margin: 0 clamp(1rem, 4vw, 3rem) 0.75rem;
+  color: var(--v-muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.bdc-notice {
+  margin-bottom: 1.5rem;
+  color: var(--v-ink);
+}
+
+@media (max-width: 800px) {
+  .bdc-dashboard {
+    grid-template-columns: 1fr;
+  }
+
+  .bdc-controls {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+
+  .bdc-visual {
+    min-height: 34rem;
+  }
+
+  .bdc-road {
+    margin-inline: 1rem;
+  }
+
+  .bdc-gap-heading {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .bdc-gap-values {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bdc-shell[data-simulating="true"] .bdc-vehicle {
+    animation-duration: 0.01ms;
+  }
+}

package/src/tool/brakingDistanceCalculator/component.astro

@@ -0,0 +1,117 @@
+---
+import './braking-distance-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="bdc-shell" data-braking-distance-calculator data-status="warning">
+  <div class="bdc-dashboard">
+    <section class="bdc-controls" aria-label={ui.estimateNotice}>
+      <div class="bdc-toggle-row">
+        <div class="bdc-choice" role="group" aria-label={ui.unitLabel}>
+          <span>{ui.unitLabel}</span>
+          <button type="button" data-unit-button data-value="kmh" aria-pressed="true">{ui.metricUnit}</button>
+          <button type="button" data-unit-button data-value="mph" aria-pressed="false">{ui.imperialUnit}</button>
+        </div>
+        <div class="bdc-choice" role="group" aria-label={ui.vehicleLabel}>
+          <span>{ui.vehicleLabel}</span>
+          <button type="button" data-vehicle-button data-value="car" aria-pressed="true">{ui.carLabel}</button>
+          <button type="button" data-vehicle-button data-value="motorcycle" aria-pressed="false">{ui.motorcycleLabel}</button>
+        </div>
+      </div>
+
+      <label class="bdc-slider" for="bdc-speed">
+        <span>{ui.speedLabel}</span>
+        <strong><output data-output="bdc-speed">80</output></strong>
+        <input id="bdc-speed" type="range" min="10" max="200" step="5" value="80" aria-label={ui.speedLabel} />
+      </label>
+
+      <label class="bdc-slider" for="bdc-reaction-time">
+        <span>{ui.reactionTimeLabel}</span>
+        <strong><output data-output="bdc-reaction-time">2.5</output> s</strong>
+        <input id="bdc-reaction-time" type="range" min="0.5" max="4" step="0.1" value="2.5" aria-label={ui.reactionTimeLabel} />
+      </label>
+
+      <label class="bdc-slider" for="bdc-grade">
+        <span>{ui.gradeLabel}</span>
+        <strong><output data-output="bdc-grade">0</output>%</strong>
+        <input id="bdc-grade" type="range" min="-12" max="12" step="1" value="0" aria-label={ui.gradeLabel} />
+      </label>
+
+      <div class="bdc-surfaces" role="group" aria-label={ui.roadConditionLabel}>
+        <span>{ui.roadConditionLabel}</span>
+        <div class="bdc-surface-grid">
+          <button type="button" data-surface-button data-deceleration="3.4" aria-pressed="true">{ui.dryRoadLabel}</button>
+          <button type="button" data-surface-button data-deceleration="1.7" aria-pressed="false">{ui.wetRoadLabel}</button>
+          <button type="button" data-surface-button data-deceleration="0.85" aria-pressed="false">{ui.snowRoadLabel}</button>
+          <button type="button" data-surface-button data-deceleration="0.34" aria-pressed="false">{ui.iceRoadLabel}</button>
+        </div>
+      </div>
+
+      <details class="bdc-advanced">
+        <summary>{ui.advancedLabel}</summary>
+        <label class="bdc-slider bdc-deceleration" for="bdc-deceleration">
+          <span>{ui.decelerationLabel}</span>
+          <strong><output data-output="bdc-deceleration">3.4</output> m/s2</strong>
+          <input id="bdc-deceleration" type="range" min="0.2" max="8" step="0.1" value="3.4" aria-label={ui.decelerationLabel} />
+        </label>
+      </details>
+    </section>
+
+    <section class="bdc-visual" aria-live="polite">
+      <div class="bdc-sky">
+        <div class="bdc-moon"></div>
+        <div class="bdc-status-lamp"><span></span><p data-bdc-status>{ui.warningMessage}</p></div>
+      </div>
+      <div class="bdc-road">
+        <div class="bdc-road-label bdc-start">{ui.roadStartLabel}</div>
+        <div class="bdc-segment bdc-reaction">
+          <span>{ui.reactionDistanceLabel}</span>
+          <strong data-bdc-reaction>55.6 m</strong>
+        </div>
+        <div class="bdc-brake-marker"><span>{ui.brakePointLabel}</span></div>
+        <div class="bdc-segment bdc-braking">
+          <span>{ui.brakingDistanceLabel}</span>
+          <strong data-bdc-braking>72.6 m</strong>
+        </div>
+        <div class="bdc-stop-marker"><span>{ui.stopPointLabel}</span></div>
+        <div class="bdc-lead-vehicle" aria-hidden="true"><i></i><b></b><span>{ui.leadVehicleLabel}</span></div>
+        <div class="bdc-vehicle" aria-hidden="true"><i></i><b></b></div>
+      </div>
+      <section class="bdc-gap-lab" data-gap-status="insufficient" aria-label={ui.safetyExperimentLabel}>
+        <div class="bdc-gap-heading">
+          <div><span>{ui.safetyExperimentLabel}</span><p data-bdc-gap-message>{ui.insufficientGapMessage}</p></div>
+          <button type="button" data-bdc-simulate>{ui.simulateLabel}</button>
+        </div>
+        <label class="bdc-slider bdc-gap-slider" for="bdc-gap-seconds">
+          <span>{ui.gapTimeLabel}</span>
+          <strong><output data-output="bdc-gap-seconds">3.0</output> s</strong>
+          <input id="bdc-gap-seconds" type="range" min="0.5" max="8" step="0.1" value="3" aria-label={ui.gapTimeLabel} />
+        </label>
+        <div class="bdc-gap-values">
+          <div><span>{ui.availableDistanceLabel}</span><strong data-bdc-gap-distance>66.7 m</strong></div>
+          <div><span data-bdc-margin-label>{ui.shortfallLabel}</span><strong data-bdc-margin>61.5 m</strong></div>
+        </div>
+        <p class="bdc-gap-hint">{ui.safetyExperimentHint}</p>
+      </section>
+      <div class="bdc-result-ribbon">
+        <div><span>{ui.totalDistanceLabel}</span><strong data-bdc-total>128.2 m</strong></div>
+        <div><span>{ui.totalTimeLabel}</span><strong data-bdc-time>9.0 s</strong></div>
+      </div>
+      <p class="bdc-vehicle-note" data-bdc-vehicle-note>{ui.carNote}</p>
+      <p class="bdc-notice">{ui.estimateNotice}</p>
+    </section>
+  </div>
+</div>
+
+<script is:inline id="bdc-copy" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initBrakingDistanceCalculator } from './controller';
+
+  const copy = document.querySelector<HTMLScriptElement>('#bdc-copy');
+  if (copy?.textContent) initBrakingDistanceCalculator(JSON.parse(copy.textContent));
+</script>