@jjlmoya/utils-chrono 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-chrono",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -15,6 +15,7 @@ import { serviceIntervalTracker } from '../tool/service-interval-tracker/entry';
 import { strapLengthCalculator } from '../tool/strap-length-calculator/entry';
 import { telemeterCalculator } from '../tool/telemeter-calculator/entry';
 import { siderealTimeTracker } from '../tool/sidereal-time-tracker/entry';
+import { gearTrainExplorer } from '../tool/gear-train-explorer/entry';
 
 export const chronoCategory: ChronoCategoryEntry = {
   icon: 'mdi:clock-outline',
@@ -35,6 +36,7 @@ export const chronoCategory: ChronoCategoryEntry = {
     strapLengthCalculator,
     telemeterCalculator,
     siderealTimeTracker,
+    gearTrainExplorer,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -32,6 +32,8 @@ export { telemeterCalculator } from './tool/telemeter-calculator/entry';
 export type { TelemeterCalculatorUI, TelemeterCalculatorLocaleContent } from './tool/telemeter-calculator/entry';
 export { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
 export type { SiderealTimeTrackerUI, SiderealTimeTrackerLocaleContent } from './tool/sidereal-time-tracker/entry';
+export { gearTrainExplorer } from './tool/gear-train-explorer/entry';
+export type { GearTrainExplorerUI, GearTrainExplorerLocaleContent } from './tool/gear-train-explorer/entry';
 export { chronoCategory } from './category';
 
 import { watchAccuracyTracker } from './tool/watch-accuracy-tracker/entry';
@@ -51,6 +53,7 @@ import { serviceIntervalTracker } from './tool/service-interval-tracker/entry';
 import { strapLengthCalculator } from './tool/strap-length-calculator/entry';
 import { telemeterCalculator } from './tool/telemeter-calculator/entry';
 import { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
+import { gearTrainExplorer } from './tool/gear-train-explorer/entry';
 
-export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker];
+export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker, gearTrainExplorer];
 

package/src/tests/locale_completeness.test.ts

@@ -22,7 +22,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(17);
+    expect(ALL_TOOLS.length).toBe(18);
   });
 
 });

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { chronoCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(17);
+      expect(ALL_TOOLS.length).toBe(18);
     });
 
 

package/src/tool/gear-train-explorer/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { gearTrainExplorer } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = gearTrainExplorer.i18n[locale] || gearTrainExplorer.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/gear-train-explorer/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Watch Gear Train Explained - Horology 101',
+    url: 'https://en.wikipedia.org/wiki/Wheel_train_(horology)',
+  },
+  {
+    name: 'ETA 2824-2 Technical Documentation',
+    url: 'https://shopb2b.eta.ch/en/mecaline/2824-2-2824-2-5.html',
+  }
+];

package/src/tool/gear-train-explorer/client.ts

@@ -0,0 +1,146 @@
+const canvas = document.getElementById('gear-canvas') as HTMLCanvasElement;
+const ctx = canvas.getContext('2d')!;
+
+import { MOVEMENTS } from './movements';
+import type { MovementDef } from './movements';
+import { setCtx, setMov as setMovement, setHovered } from './state';
+import { drawScene } from './scene';
+
+setCtx(ctx);
+
+const REF_W = 900;
+const REF_H = 520;
+
+let currentMov: MovementDef = MOVEMENTS['2824'];
+let speedMult = 1;
+let paused = false;
+let angles: number[] = currentMov.gears.map(() => 0);
+let palletPhase = 0;
+let balancePhase = 0;
+let highlightedGear: number | null = null;
+let hoveredGear: number | null = null;
+
+function resizeCanvas() {
+  const parent = canvas.parentElement!;
+  const displayW = parent.clientWidth;
+  const displayH = displayW * (REF_H / REF_W);
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  canvas.style.width = displayW + 'px';
+  canvas.style.height = displayH + 'px';
+  canvas.width = displayW * dpr;
+  canvas.height = displayH * dpr;
+  ctx.setTransform(displayW / REF_W * dpr, 0, 0, displayH / REF_H * dpr, 0, 0);
+}
+
+function updateStats() {
+  const g = currentMov.gears;
+  const setText = (id: string, v: string) => { const el = document.getElementById('rpm-' + id); if (el) el.textContent = v; };
+  setText('barrel', (g[0].rpm * 60).toFixed(2) + '/h');
+  setText('center', (g[1].rpm * 60).toFixed(1) + '/h');
+  setText('third', (g[2].rpm * 60).toFixed(1) + '/h');
+  setText('fourth', g[3].rpm.toFixed(1) + ' rpm');
+  setText('escape', g[4].rpm.toFixed(0) + ' rpm');
+  const bphEl = document.getElementById('bph-pallet');
+  if (bphEl) bphEl.textContent = currentMov.pallet.bph.toString();
+  const hzEl = document.getElementById('hz-balance');
+  if (hzEl) hzEl.textContent = currentMov.balance.hz.toString();
+  const vphEl = document.getElementById('vph-balance');
+  if (vphEl) vphEl.textContent = currentMov.balance.vph.toString();
+}
+
+function render() {
+  setMovement(currentMov);
+  setHovered(hoveredGear);
+  drawScene(currentMov, { angles, palletPhase, balancePhase, highlight: highlightedGear, hover: hoveredGear });
+  const step = highlightedGear !== null ? highlightedGear : -1;
+  document.querySelectorAll('.flow-bar .step').forEach((el, idx) => {
+    el.classList.toggle('active', idx <= step);
+  });
+}
+
+function tick() {
+  if (paused) return;
+  const dt = 1;
+  const gears = currentMov.gears;
+  for (let i = 0; i < gears.length; i++) {
+    angles[i] += gears[i].visualSpeed * speedMult * dt * 0.08;
+  }
+  const bf = currentMov.pallet.bph / 3600;
+  palletPhase += bf * speedMult * dt * 0.06;
+  balancePhase += currentMov.balance.hz * speedMult * dt * 0.2;
+}
+
+function animate() {
+  tick();
+  render();
+  requestAnimationFrame(animate);
+}
+
+function switchMovement(id: string) {
+  currentMov = MOVEMENTS[id];
+  angles = currentMov.gears.map(() => 0);
+  palletPhase = 0;
+  balancePhase = 0;
+  highlightedGear = null;
+  updateStats();
+  document.querySelectorAll('[data-mov]').forEach((b) => {
+    b.classList.toggle('active', (b as HTMLElement).dataset.mov === id);
+  });
+}
+
+function setSpeed(mult: number) {
+  speedMult = mult;
+  paused = mult === 0;
+  document.querySelectorAll('[data-spd]').forEach((b) => {
+    const spd = parseFloat((b as HTMLElement).dataset.spd || '1');
+    b.classList.toggle('active', spd === mult);
+  });
+}
+
+function hitTest(mx: number, my: number): number | null {
+  for (let i = 0; i < currentMov.gears.length; i++) {
+    if (Math.sqrt((mx - currentMov.gears[i].x) ** 2 + (my - currentMov.gears[i].y) ** 2) < currentMov.gears[i].r + 10) return i;
+  }
+  if (Math.sqrt((mx - currentMov.pallet.x) ** 2 + (my - currentMov.pallet.y) ** 2) < 20) return 5;
+  if (Math.sqrt((mx - currentMov.balance.x) ** 2 + (my - currentMov.balance.y) ** 2) < currentMov.balance.r + 8) return 6;
+  return null;
+}
+
+function onCanvasMove(e: MouseEvent) {
+  const rect = canvas.getBoundingClientRect();
+  const mx = (e.clientX - rect.left) / rect.width * REF_W;
+  const my = (e.clientY - rect.top) / rect.height * REF_H;
+  const found = hitTest(mx, my);
+  if (found !== hoveredGear) highlightGear(found);
+  canvas.style.cursor = found !== null ? 'pointer' : 'default';
+}
+
+function highlightGear(idx: number | null) {
+  hoveredGear = idx;
+  highlightedGear = idx;
+  document.querySelectorAll('.data-card').forEach((c) => c.classList.remove('highlighted'));
+  if (idx !== null && idx < 7) {
+    document.querySelectorAll('.data-card')[idx]?.classList.add('highlighted');
+  }
+}
+
+function initControls() {
+  document.querySelectorAll('[data-mov]').forEach((b) => {
+    b.addEventListener('click', () => switchMovement((b as HTMLElement).dataset.mov || '2824'));
+  });
+  document.querySelectorAll('[data-spd]').forEach((b) => {
+    b.addEventListener('click', () => setSpeed(parseFloat((b as HTMLElement).dataset.spd || '1')));
+  });
+  document.querySelectorAll('.data-card').forEach((card, idx) => {
+    card.addEventListener('mouseenter', () => highlightGear(idx));
+    card.addEventListener('mouseleave', () => highlightGear(null));
+  });
+  canvas.addEventListener('mousemove', onCanvasMove);
+  canvas.addEventListener('mouseleave', () => highlightGear(null));
+}
+
+new ResizeObserver(resizeCanvas).observe(canvas.parentElement!);
+resizeCanvas();
+updateStats();
+initControls();
+animate();

package/src/tool/gear-train-explorer/component.astro

@@ -0,0 +1,17 @@
+---
+import GearPanel from './components/GearPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<link href="./gear-train-explorer.css" rel="stylesheet" />
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <GearPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/gear-train-explorer/components/GearPanel.astro

@@ -0,0 +1,102 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="canvas-wrapper">
+  <canvas id="gear-canvas" width="900" height="520"></canvas>
+</div>
+
+<div class="controls-row">
+  <div class="control-group">
+    <span class="control-label">{labels.movementLabel || 'Movement'}</span>
+    <div class="btn-group">
+      <button class="active" data-mov="2824">ETA 2824</button>
+      <button data-mov="elprimero">El Primero</button>
+      <button data-mov="vintage">Vintage 18k</button>
+    </div>
+  </div>
+  <div class="control-group">
+    <span class="control-label">{labels.speedLabel || 'Speed'}</span>
+    <div class="btn-group">
+      <button data-spd="0.5">0.5x</button>
+      <button class="active" data-spd="1">1x</button>
+      <button data-spd="2">2x</button>
+      <button data-spd="5">5x</button>
+      <button data-spd="0">P</button>
+    </div>
+  </div>
+</div>
+
+<div class="data-grid" id="gear-data-grid">
+  <div class="data-card" data-gear="barrel">
+    <div class="name">{labels.barrelLabel || 'Barrel'}</div>
+    <div class="stats">
+      <span><span class="val" id="rpm-barrel">0</span> rpm</span>
+      <span>72t</span>
+    </div>
+  </div>
+  <div class="data-card" data-gear="center">
+    <div class="name">{labels.centerWheelLabel || 'Center'}</div>
+    <div class="stats">
+      <span><span class="val" id="rpm-center">0</span> rpm</span>
+      <span>60t</span>
+    </div>
+  </div>
+  <div class="data-card" data-gear="third">
+    <div class="name">{labels.thirdWheelLabel || 'Third'}</div>
+    <div class="stats">
+      <span><span class="val" id="rpm-third">0</span> rpm</span>
+      <span>50t</span>
+    </div>
+  </div>
+  <div class="data-card" data-gear="fourth">
+    <div class="name">{labels.fourthWheelLabel || 'Fourth'}</div>
+    <div class="stats">
+      <span><span class="val" id="rpm-fourth">0</span> rpm</span>
+      <span>60t</span>
+    </div>
+  </div>
+  <div class="data-card" data-gear="escape">
+    <div class="name">{labels.escapeWheelLabel || 'Escape'}</div>
+    <div class="stats">
+      <span><span class="val" id="rpm-escape">0</span> rpm</span>
+      <span id="escape-teeth">15t</span>
+    </div>
+  </div>
+  <div class="data-card" data-gear="pallet">
+    <div class="name">{labels.palletForkLabel || 'Pallet'}</div>
+    <div class="stats">
+      <span><span class="val" id="bph-pallet">28800</span> bph</span>
+    </div>
+  </div>
+  <div class="data-card" data-gear="balance">
+    <div class="name">{labels.balanceWheelLabel || 'Balance'}</div>
+    <div class="stats">
+      <span><span class="val" id="hz-balance">4</span> Hz</span>
+      <span><span class="val" id="vph-balance">28800</span> vph</span>
+    </div>
+  </div>
+</div>
+
+<div class="flow-bar">
+  <div class="flow-label">{labels.powerFlowLabel || 'Power Flow'}</div>
+  <div class="flow-path">
+    <span class="step active" data-step="0">Barrel</span>
+    <span class="arrow">&rarr;</span>
+    <span class="step" data-step="1">Center</span>
+    <span class="arrow">&rarr;</span>
+    <span class="step" data-step="2">Third</span>
+    <span class="arrow">&rarr;</span>
+    <span class="step" data-step="3">Fourth</span>
+    <span class="arrow">&rarr;</span>
+    <span class="step" data-step="4">Escape</span>
+    <span class="arrow">&rarr;</span>
+    <span class="step" data-step="5">Pallet</span>
+    <span class="arrow">&rarr;</span>
+    <span class="step" data-step="6">Balance</span>
+  </div>
+</div>

package/src/tool/gear-train-explorer/entry.ts

@@ -0,0 +1,53 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type GearTrainExplorerUI = {
+  title: string;
+  barrelLabel: string;
+  centerWheelLabel: string;
+  thirdWheelLabel: string;
+  fourthWheelLabel: string;
+  escapeWheelLabel: string;
+  palletForkLabel: string;
+  balanceWheelLabel: string;
+  rpmLabel: string;
+  teethLabel: string;
+  gearRatioLabel: string;
+  powerFlowLabel: string;
+  movementLabel: string;
+  speedLabel: string;
+  speedNormal: string;
+  speedSlow: string;
+  speedPaused: string;
+  mov2824: string;
+  movElPrimero: string;
+  movVintage: string;
+  step1: string;
+  step2: string;
+  step3: string;
+  tipTitle: string;
+  tipContent: string;
+};
+
+export type GearTrainExplorerLocaleContent = ToolLocaleContent<GearTrainExplorerUI>;
+
+export const gearTrainExplorer: ChronoToolEntry<GearTrainExplorerUI> = {
+  id: 'gear-train-explorer',
+  icons: { bg: 'mdi:cog-transfer', fg: 'mdi:cog-clockwise' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/gear-train-explorer/gear-train-explorer.css

@@ -0,0 +1,172 @@
+.tool-main-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  margin: 0 auto;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-shadow: var(--shadow-base);
+}
+
+.canvas-wrapper {
+  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  border: 1px solid rgba(212, 175, 55, 0.15);
+}
+
+canvas#gear-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.controls-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.control-label {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-base);
+  opacity: 0.5;
+}
+
+.control-group .btn-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.control-group .btn-group button {
+  padding: 0.25rem 0.55rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  border: 1px solid var(--border-base);
+  border-radius: 0.4rem;
+  background: var(--bg-page);
+  color: var(--text-base);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.control-group .btn-group button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.control-group .btn-group button.active {
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg-page));
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.data-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
+  gap: 0.35rem;
+}
+
+.data-card {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  transition: all 0.2s ease;
+  cursor: default;
+}
+
+.data-card:hover {
+  border-color: var(--accent);
+}
+
+.data-card.highlighted {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 6%, var(--bg-page));
+  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
+.data-card .name {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+  margin-bottom: 0.15rem;
+}
+
+.data-card .stats {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.data-card .stats span {
+  font-size: 0.65rem;
+  color: var(--text-base);
+  opacity: 0.75;
+}
+
+.data-card .stats .val {
+  color: var(--accent);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  opacity: 1;
+}
+
+.flow-bar {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.6rem;
+}
+
+.flow-bar .flow-label {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-base);
+  opacity: 0.5;
+  margin-bottom: 0.2rem;
+}
+
+.flow-bar .flow-path {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  flex-wrap: wrap;
+}
+
+.flow-bar .flow-path .step {
+  font-size: 0.65rem;
+  color: var(--text-base);
+  opacity: 0.4;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.2rem;
+  transition: all 0.25s ease;
+}
+
+.flow-bar .flow-path .step.active {
+  opacity: 1;
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--bg-page));
+}
+
+.flow-bar .flow-path .arrow {
+  color: var(--text-base);
+  opacity: 0.2;
+  font-size: 0.7rem;
+}