@jjlmoya/utils-chrono 1.9.0 → 1.11.0

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

@@ -0,0 +1,120 @@
+import type { MovementDef } from './movements';
+import { getCtx, getMov, getHovered, getFontFam, setMov, setHovered, detectTheme, c, W, H } from './state';
+import { drawGear, drawPallet, drawBalance, drawConnection } from './gears';
+
+export function drawBackground() {
+  const ctx = getCtx();
+  const bg0 = c('#1e1e3a', '#f5f0e8');
+  const bg1 = c('#16162e', '#eae4d8');
+  const bg2 = c('#0c0c18', '#ddd6c8');
+  const grad = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, 400);
+  grad.addColorStop(0, bg0);
+  grad.addColorStop(0.5, bg1);
+  grad.addColorStop(1, bg2);
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, W, H);
+}
+
+export function drawTitleBar(label: string) {
+  const ctx = getCtx();
+  ctx.fillStyle = c('rgba(212,175,55,0.7)', 'rgba(120,80,10,0.85)');
+  ctx.font = '600 14px ' + getFontFam();
+  ctx.textAlign = 'left';
+  ctx.fillText(label + ' — Gear Train', 16, 24);
+  ctx.fillStyle = c('rgba(160,160,184,0.55)', 'rgba(60,50,30,0.7)');
+  ctx.font = '11px ' + getFontFam();
+  ctx.fillText('Mainspring to Balance Wheel', 16, 40);
+}
+
+export function drawLabels() {
+  const ctx = getCtx();
+  const mov = getMov();
+  const hover = getHovered();
+  ctx.font = '10px ' + getFontFam();
+  ctx.textAlign = 'center';
+  for (let i = 0; i < mov.gears.length; i++) {
+    const g = mov.gears[i];
+    ctx.fillStyle = hover === i ? c('#ffd700', '#7a5a00') : c('rgba(200,200,220,0.8)', 'rgba(40,30,15,0.85)');
+    ctx.fillText(g.label, g.x, g.y + g.r + 14);
+    const rpmTxt = g.rpm < 1 ? (g.rpm * 60).toFixed(1) + '/h' : g.rpm.toFixed(1) + ' rpm';
+    ctx.fillStyle = hover === i ? c('rgba(255,215,0,0.6)', 'rgba(100,70,10,0.7)') : c('rgba(160,160,184,0.5)', 'rgba(60,50,30,0.65)');
+    ctx.font = '9px ' + getFontFam();
+    ctx.fillText(rpmTxt, g.x, g.y + g.r + 24);
+    ctx.font = '10px ' + getFontFam();
+  }
+}
+
+export function drawExtraLabels() {
+  const ctx = getCtx();
+  const mov = getMov();
+  const p = mov.pallet;
+  const b = mov.balance;
+  ctx.font = '10px ' + getFontFam();
+  ctx.textAlign = 'center';
+  ctx.fillStyle = c('rgba(200,200,220,0.8)', 'rgba(40,30,15,0.85)');
+  ctx.fillText('Pallet Fork', p.x, p.y + 22);
+  ctx.fillStyle = c('rgba(160,160,184,0.5)', 'rgba(60,50,30,0.65)');
+  ctx.font = '9px ' + getFontFam();
+  ctx.fillText(p.bph + ' bph', p.x, p.y + 32);
+  ctx.font = '10px ' + getFontFam();
+  ctx.fillStyle = c('rgba(200,200,220,0.8)', 'rgba(40,30,15,0.85)');
+  ctx.fillText('Balance Wheel', b.x, b.y + b.r + 16);
+  ctx.fillStyle = c('rgba(160,160,184,0.5)', 'rgba(60,50,30,0.65)');
+  ctx.font = '9px ' + getFontFam();
+  ctx.fillText(b.hz + ' Hz / ' + b.vph + ' vph', b.x, b.y + b.r + 26);
+}
+
+export function drawPowerFlowLine() {
+  const ctx = getCtx();
+  const mov = getMov();
+  const gears = mov.gears;
+  ctx.beginPath();
+  ctx.moveTo(gears[0].x + gears[0].r + 5, gears[0].y);
+  for (let i = 1; i < gears.length; i++) {
+    ctx.lineTo(gears[i].x - gears[i].r - 5, gears[i].y);
+  }
+  const eg = gears[gears.length - 1];
+  ctx.lineTo(eg.x + eg.r + 15, eg.y);
+  ctx.lineTo(mov.pallet.x - 15, mov.pallet.y);
+  ctx.lineTo(mov.pallet.x, mov.pallet.y);
+  ctx.strokeStyle = c('rgba(212,175,55,0.08)', 'rgba(139,105,20,0.12)');
+  ctx.lineWidth = 60; ctx.stroke();
+  ctx.strokeStyle = c('rgba(212,175,55,0.12)', 'rgba(139,105,20,0.15)');
+  ctx.lineWidth = 2;
+  ctx.setLineDash([4, 6]); ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function drawConnections(mov: MovementDef, highlight: number | null) {
+  const gears = mov.gears;
+  for (let i = 0; i < gears.length; i++) {
+    if (i < gears.length - 1) {
+      const g1 = gears[i], g2 = gears[i + 1];
+      drawConnection({ x1: g1.x + g1.r * 0.7, y1: g1.y, x2: g2.x - g2.r * 0.7, y2: g2.y, active: highlight === i || highlight === i + 1 });
+    }
+  }
+  const lg = gears[gears.length - 1];
+  drawConnection({ x1: lg.x + lg.r * 0.7, y1: lg.y, x2: mov.pallet.x - 10, y2: mov.pallet.y, active: highlight === gears.length - 1 });
+  drawConnection({ x1: mov.pallet.x, y1: mov.pallet.y, x2: mov.balance.x, y2: mov.balance.y, active: highlight === gears.length - 1 });
+}
+
+export function drawScene(mov: MovementDef, opts: { angles: number[]; palletPhase: number; balancePhase: number; highlight: number | null; hover: number | null }) {
+  const ctx = getCtx();
+  setMov(mov);
+  setHovered(opts.hover);
+  detectTheme();
+  ctx.save();
+  ctx.clearRect(0, 0, W, H);
+  drawBackground();
+  drawTitleBar(mov.label);
+  drawConnections(mov, opts.highlight);
+  for (let i = 0; i < mov.gears.length; i++) {
+    const g = mov.gears[i];
+    drawGear({ x: g.x, y: g.y, r: g.r, teeth: g.teeth, angle: opts.angles[i], color: g.color, highlight: opts.hover === i });
+  }
+  drawPallet(mov.pallet.x, mov.pallet.y, opts.palletPhase);
+  drawBalance(mov.balance.x, mov.balance.y, mov.balance.r, opts.balancePhase);
+  drawLabels();
+  drawExtraLabels();
+  ctx.restore();
+}

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

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

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

@@ -0,0 +1,30 @@
+import type { MovementDef } from './movements';
+
+let _ctx: CanvasRenderingContext2D;
+let _mov: MovementDef;
+let _hovered: number | null = null;
+let _isDark = true;
+let _fontFam = 'system-ui, sans-serif';
+
+export function getCtx() { return _ctx; }
+export function getMov() { return _mov; }
+export function getHovered() { return _hovered; }
+export function isDark() { return _isDark; }
+export function getFontFam() { return _fontFam; }
+export function setMov(m: MovementDef) { _mov = m; }
+export function setHovered(h: number | null) { _hovered = h; }
+
+export function setCtx(ctx: CanvasRenderingContext2D) {
+  _ctx = ctx;
+  _fontFam = getComputedStyle(document.body).fontFamily || _fontFam;
+}
+
+export function detectTheme() {
+  const bg = window.getComputedStyle(document.body).backgroundColor;
+  _isDark = !bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent' ? true : parseInt(bg.replace(/[^\d,]/g, '').split(',')[0]) < 128;
+}
+
+export function c(h: string, l: string): string { return _isDark ? h : l; }
+
+export const W = 900;
+export const H = 520;

package/src/tool/sidereal-time-tracker/bibliography.astro

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

package/src/tool/sidereal-time-tracker/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Sidereal Time - Wikipedia',
+    url: 'https://en.wikipedia.org/wiki/Sidereal_time',
+  },
+  {
+    name: 'Greenwich Mean Sidereal Time - US Naval Observatory',
+    url: 'https://aa.usno.navy.mil/data/siderealtime',
+  },
+  {
+    name: 'Patek Philippe Celestial - Astronomical Watches complication',
+    url: 'https://www.patek.com/en/service/taking-care-of-your-watch/settings/celestial',
+  },
+];

package/src/tool/sidereal-time-tracker/client.ts

@@ -0,0 +1,278 @@
+import { getJulianDate, getLST, formatHours } from './helpers';
+
+let simulatedTime = Date.now();
+let lastFrameTime = Date.now();
+let speedMultiplier = 1;
+let longitude = 0;
+let longitudeFormat: 'decimal' | 'dms' = 'decimal';
+let hemisphere: 'N' | 'S' = 'N';
+let audioEnabled = false;
+let audioCtx: AudioContext | null = null;
+let lastTickSecond = -1;
+
+try {
+  const storedLon = localStorage.getItem('sid-longitude');
+  if (storedLon) longitude = parseFloat(storedLon);
+  const storedFormat = localStorage.getItem('sid-longitude-format');
+  if (storedFormat === 'decimal' || storedFormat === 'dms') {
+    longitudeFormat = storedFormat;
+  }
+  const storedHem = localStorage.getItem('sid-hemisphere');
+  if (storedHem === 'N' || storedHem === 'S') {
+    hemisphere = storedHem;
+  }
+} catch {
+}
+
+function saveSettings(): void {
+  try {
+    localStorage.setItem('sid-longitude', longitude.toString());
+    localStorage.setItem('sid-longitude-format', longitudeFormat);
+    localStorage.setItem('sid-hemisphere', hemisphere);
+  } catch {
+  }
+}
+
+function formatDMS(deg: number): string {
+  const direction = deg >= 0 ? 'E' : 'W';
+  const absDeg = Math.abs(deg);
+  const degrees = Math.floor(absDeg);
+  const minutes = Math.round((absDeg - degrees) * 60);
+  return `${degrees}° ${minutes.toString().padStart(2, '0')}' ${direction}`;
+}
+
+function updateLongitudeLabel(): void {
+  const label = document.getElementById('sid-label-longitude-val');
+  if (!label) return;
+  if (longitudeFormat === 'decimal') {
+    label.textContent = `${longitude.toFixed(1)}°`;
+  } else {
+    label.textContent = formatDMS(longitude);
+  }
+}
+
+function updateHemisphere(): void {
+  const northGroup = document.getElementById('sid-constellations-north');
+  const southGroup = document.getElementById('sid-constellations-south');
+  if (northGroup && southGroup) {
+    if (hemisphere === 'N') {
+      northGroup.style.display = 'block';
+      southGroup.style.display = 'none';
+    } else {
+      northGroup.style.display = 'none';
+      southGroup.style.display = 'block';
+    }
+  }
+}
+
+function initAudio(): void {
+  if (!audioCtx) {
+    const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    audioCtx = new AudioContextClass();
+  }
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume();
+  }
+}
+
+function playTick(freq: number): void {
+  if (!audioCtx || !audioEnabled) return;
+  const osc = audioCtx.createOscillator();
+  const gain = audioCtx.createGain();
+  osc.type = 'sine';
+  osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
+  gain.gain.setValueAtTime(0.015, audioCtx.currentTime);
+  gain.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.08);
+  osc.connect(gain);
+  gain.connect(audioCtx.destination);
+  osc.start();
+  osc.stop(audioCtx.currentTime + 0.08);
+}
+
+function updateHands(date: Date, lst: number): void {
+  const sec = date.getUTCSeconds() + date.getUTCMilliseconds() / 1000;
+  const min = date.getUTCMinutes() + sec / 60;
+  const hour = date.getUTCHours() + min / 60;
+
+  const elSec = document.getElementById('sid-hand-sec');
+  const elMin = document.getElementById('sid-hand-solar-min');
+  const elHour = document.getElementById('sid-hand-solar-hour');
+  const elSidHour = document.getElementById('sid-hand-sid-hour');
+  const elSphere = document.getElementById('sid-celestial-sphere');
+
+  if (elSec) elSec.style.transform = `rotate(${sec * 6}deg)`;
+  if (elMin) elMin.style.transform = `rotate(${min * 6}deg)`;
+  if (elHour) elHour.style.transform = `rotate(${(hour % 12) * 30}deg)`;
+  if (elSidHour) elSidHour.style.transform = `rotate(${lst * 15}deg)`;
+  if (elSphere) elSphere.style.transform = `rotate(${-lst * 15}deg)`;
+}
+
+function handleTickSound(date: Date): void {
+  const solarSec = date.getUTCSeconds();
+  if (solarSec !== lastTickSecond) {
+    lastTickSecond = solarSec;
+    const isHourCross = date.getUTCMinutes() === 0 && solarSec === 0;
+    playTick(isHourCross ? 1400 : 900);
+  }
+}
+
+function setText(id: string, text: string): void {
+  const el = document.getElementById(id);
+  if (el) {
+    el.textContent = text;
+  }
+}
+
+function updateDisplay(): void {
+  const date = new Date(simulatedTime);
+  const lst = getLST(date, longitude);
+  const jd = getJulianDate(date);
+
+  handleTickSound(date);
+  updateHands(date, lst);
+
+  const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
+  let diff = Math.abs(utcHours - lst);
+  if (diff > 12) {
+    diff = 24 - diff;
+  }
+
+  setText('sid-val-solar', formatHours(utcHours));
+  setText('sid-val-sidereal', formatHours(lst));
+  setText('sid-val-drift', `${Math.floor(diff * 60)}m ${Math.floor((diff * 3600) % 60)}s`);
+  setText('sid-val-julian', jd.toFixed(5));
+}
+
+function tick(): void {
+  const now = Date.now();
+  const delta = now - lastFrameTime;
+  lastFrameTime = now;
+  simulatedTime += delta * speedMultiplier;
+
+  updateDisplay();
+  requestAnimationFrame(tick);
+}
+
+function setupSpeedButtons(): void {
+  const btns = ['sid-btn-speed-1', 'sid-btn-speed-100', 'sid-btn-speed-10000'];
+  btns.forEach((id) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('click', () => {
+      btns.forEach((b) => document.getElementById(b)?.classList.remove('active'));
+      el.classList.add('active');
+      speedMultiplier = parseFloat(el.getAttribute('data-speed') || '1');
+      initAudio();
+    });
+  });
+}
+
+function setupFormatButtons(): void {
+  const decimalBtn = document.getElementById('sid-btn-format-decimal');
+  const dmsBtn = document.getElementById('sid-btn-format-dms');
+  if (decimalBtn && dmsBtn) {
+    decimalBtn.addEventListener('click', () => {
+      decimalBtn.classList.add('active');
+      dmsBtn.classList.remove('active');
+      longitudeFormat = 'decimal';
+      updateLongitudeLabel();
+      saveSettings();
+    });
+    dmsBtn.addEventListener('click', () => {
+      dmsBtn.classList.add('active');
+      decimalBtn.classList.remove('active');
+      longitudeFormat = 'dms';
+      updateLongitudeLabel();
+      saveSettings();
+    });
+  }
+}
+
+function setupHemisphereButtons(): void {
+  const northBtn = document.getElementById('sid-btn-hem-north');
+  const southBtn = document.getElementById('sid-btn-hem-south');
+  if (northBtn && southBtn) {
+    northBtn.addEventListener('click', () => {
+      northBtn.classList.add('active');
+      southBtn.classList.remove('active');
+      hemisphere = 'N';
+      updateHemisphere();
+      saveSettings();
+    });
+    southBtn.addEventListener('click', () => {
+      southBtn.classList.add('active');
+      northBtn.classList.remove('active');
+      hemisphere = 'S';
+      updateHemisphere();
+      saveSettings();
+    });
+  }
+}
+
+function setupLocationButton(slider: HTMLInputElement): void {
+  const locateBtn = document.getElementById('sid-btn-locate');
+  if (!locateBtn) return;
+  locateBtn.addEventListener('click', () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((pos) => {
+        const lon = pos.coords.longitude;
+        slider.value = lon.toFixed(1);
+        longitude = lon;
+        updateLongitudeLabel();
+        saveSettings();
+      }, () => {});
+    }
+  });
+}
+
+function setupAudioButton(): void {
+  const audioBtn = document.getElementById('sid-btn-audio');
+  if (!audioBtn) return;
+  audioBtn.addEventListener('click', () => {
+    initAudio();
+    audioEnabled = !audioEnabled;
+    audioBtn.textContent = audioEnabled ? 'ON' : 'OFF';
+    audioBtn.classList.toggle('active', audioEnabled);
+  });
+}
+
+function setupEventListeners(): void {
+  const slider = document.getElementById('sid-input-longitude') as HTMLInputElement;
+  if (slider) {
+    slider.value = longitude.toString();
+    slider.addEventListener('input', () => {
+      longitude = parseFloat(slider.value);
+      updateLongitudeLabel();
+      saveSettings();
+    });
+    setupLocationButton(slider);
+  }
+  setupAudioButton();
+  setupSpeedButtons();
+  setupFormatButtons();
+  setupHemisphereButtons();
+}
+
+let initiated = false;
+function init(): void {
+  if (initiated) return;
+  initiated = true;
+  lastFrameTime = Date.now();
+  simulatedTime = Date.now();
+  setupEventListeners();
+
+  updateLongitudeLabel();
+  updateHemisphere();
+
+  document.getElementById('sid-btn-format-decimal')?.classList.toggle('active', longitudeFormat === 'decimal');
+  document.getElementById('sid-btn-format-dms')?.classList.toggle('active', longitudeFormat === 'dms');
+  document.getElementById('sid-btn-hem-north')?.classList.toggle('active', hemisphere === 'N');
+  document.getElementById('sid-btn-hem-south')?.classList.toggle('active', hemisphere === 'S');
+
+  requestAnimationFrame(tick);
+}
+
+document.addEventListener('DOMContentLoaded', init);
+if (document.readyState !== 'loading') {
+  init();
+}

package/src/tool/sidereal-time-tracker/component.astro

@@ -0,0 +1,15 @@
+---
+import SiderealPanel from './components/SiderealPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <SiderealPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>