@jjlmoya/utils-chrono 1.10.0 → 1.16.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/gmt-world-timer/bibliography.astro

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

package/src/tool/gmt-world-timer/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Time Zone Map - TimeAndDate', url: 'https://www.timeanddate.com/time/map/' },
+  { name: 'IANA Time Zone Database', url: 'https://www.iana.org/time-zones' },
+  { name: 'UTC - Coordinated Universal Time', url: 'https://www.timeanddate.com/time/utc.html' },
+];

package/src/tool/gmt-world-timer/client.ts

@@ -0,0 +1,250 @@
+const STORAGE_KEY = 'gmt-world-timer-zones';
+
+interface ZoneItem {
+  id: string;
+  label: string;
+}
+
+const DEFAULT_ZONES: ZoneItem[] = [
+  { id: 'America/New_York', label: 'New York' },
+  { id: 'Europe/London', label: 'London' },
+  { id: 'Europe/Paris', label: 'Paris' },
+  { id: 'Asia/Tokyo', label: 'Tokyo' },
+];
+
+const ALL_ZONES: ZoneItem[] = [
+  { id: 'Pacific/Midway', label: 'Midway' },
+  { id: 'Pacific/Honolulu', label: 'Honolulu' },
+  { id: 'America/Anchorage', label: 'Anchorage' },
+  { id: 'America/Los_Angeles', label: 'Los Angeles' },
+  { id: 'America/Denver', label: 'Denver' },
+  { id: 'America/Chicago', label: 'Chicago' },
+  { id: 'America/New_York', label: 'New York' },
+  { id: 'America/Halifax', label: 'Halifax' },
+  { id: 'America/Argentina/Buenos_Aires', label: 'Buenos Aires' },
+  { id: 'Atlantic/Azores', label: 'Azores' },
+  { id: 'Europe/London', label: 'London' },
+  { id: 'Europe/Paris', label: 'Paris' },
+  { id: 'Europe/Berlin', label: 'Berlin' },
+  { id: 'Europe/Madrid', label: 'Madrid' },
+  { id: 'Europe/Rome', label: 'Rome' },
+  { id: 'Europe/Athens', label: 'Athens' },
+  { id: 'Europe/Moscow', label: 'Moscow' },
+  { id: 'Asia/Dubai', label: 'Dubai' },
+  { id: 'Asia/Karachi', label: 'Karachi' },
+  { id: 'Asia/Kolkata', label: 'Kolkata' },
+  { id: 'Asia/Dhaka', label: 'Dhaka' },
+  { id: 'Asia/Bangkok', label: 'Bangkok' },
+  { id: 'Asia/Shanghai', label: 'Shanghai' },
+  { id: 'Asia/Singapore', label: 'Singapore' },
+  { id: 'Asia/Tokyo', label: 'Tokyo' },
+  { id: 'Asia/Seoul', label: 'Seoul' },
+  { id: 'Australia/Sydney', label: 'Sydney' },
+  { id: 'Pacific/Noumea', label: 'Noumea' },
+  { id: 'Pacific/Auckland', label: 'Auckland' },
+];
+
+let zones: ZoneItem[] = [];
+
+function loadZones(): void {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed: ZoneItem[] = JSON.parse(raw);
+      zones = parsed.filter((z) => ALL_ZONES.some((a) => a.id === z.id));
+    }
+  } catch {
+    zones = [];
+  }
+  if (zones.length === 0) zones = [...DEFAULT_ZONES];
+}
+
+function saveZones(): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(zones));
+}
+
+function getOffsetLabel(tz: string): string {
+  try {
+    const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts();
+    const off = parts.find((p) => p.type === 'timeZoneName');
+    return off ? off.value : '';
+  } catch {
+    return '';
+  }
+}
+
+function getZoneDate(tz: string): Date {
+  const now = new Date();
+  const localMs = now.getMilliseconds();
+  const localOff = now.getTimezoneOffset();
+  const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'longOffset' }).formatToParts(now);
+  const offPart = parts.find((p) => p.type === 'timeZoneName');
+  if (!offPart || !offPart.value) return now;
+  const m = offPart.value.match(/GMT([+-]\d+)(?::(\d+))?/);
+  if (!m) return now;
+  const sign = m[1].startsWith('+') ? 1 : -1;
+  const h = parseInt(m[1].slice(1));
+  const min = m[2] ? parseInt(m[2]) : 0;
+  const tzOff = sign * (h * 60 + min);
+  const utcMs = now.getTime() + localOff * 60000;
+  return new Date(utcMs + tzOff * 60000 + localMs * 0);
+}
+
+function makeClockSVG(tz: string): string {
+  const d = getZoneDate(tz);
+  const h = d.getHours() % 12;
+  const m = d.getMinutes();
+  const s = d.getSeconds();
+  const ms = d.getMilliseconds();
+  const hA = (h / 12) * 360 + (m / 60) * 30;
+  const mA = (m / 60) * 360 + (s / 60) * 6;
+  const sA = (s / 60) * 360 + (ms / 1000) * 6;
+  const tick = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((a) => {
+    const rad = (a - 90) * (Math.PI / 180);
+    const r1 = a % 90 === 0 ? 34 : 37;
+    const x1 = 50 + r1 * Math.cos(rad);
+    const y1 = 50 + r1 * Math.sin(rad);
+    const x2 = 50 + 43 * Math.cos(rad);
+    const y2 = 50 + 43 * Math.sin(rad);
+    const w = a % 90 === 0 ? '1.8' : '1';
+    return `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="var(--clock-marks)" stroke-width="${w}" stroke-linecap="round"/>`;
+  }).join('');
+  return `<svg class="gmt-card-clock" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="46" fill="var(--clock-face)" stroke="var(--clock-bezel)" stroke-width="1.6"/>
+    ${tick}
+    <line x1="50" y1="50" x2="50" y2="27" stroke="var(--clock-hour)" stroke-width="3" stroke-linecap="round" transform="rotate(${hA.toFixed(1)},50,50)"/>
+    <line x1="50" y1="50" x2="50" y2="14" stroke="var(--clock-min)" stroke-width="1.8" stroke-linecap="round" transform="rotate(${mA.toFixed(1)},50,50)"/>
+    <line x1="50" y1="55" x2="50" y2="8" stroke="var(--clock-sec)" stroke-width="1" stroke-linecap="round" transform="rotate(${sA.toFixed(1)},50,50)"/>
+    <circle cx="50" cy="50" r="3" fill="var(--clock-hour)"/>
+  </svg>`;
+}
+
+function getTimeStr(tz: string): string {
+  try {
+    return new Intl.DateTimeFormat('en', {
+      timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+    }).format(new Date());
+  } catch {
+    return '--:--:--';
+  }
+}
+
+function renderCard(z: ZoneItem): string {
+  const id = z.id.replace(/\//g, '-');
+  return `<div class="gmt-card" data-zone="${z.id}" id="card-${id}">
+    <button class="gmt-card-remove" data-remove="${z.id}" aria-label="Remove">&#x2715;</button>
+    <div class="gmt-card-clock-w" id="clock-${id}">${makeClockSVG(z.id)}</div>
+    <div class="gmt-card-info">
+      <div class="gmt-card-city">${z.label}</div>
+      <div class="gmt-card-time" id="time-${id}">${getTimeStr(z.id)}</div>
+      <div class="gmt-card-offset" id="off-${id}">${getOffsetLabel(z.id)}</div>
+    </div>
+  </div>`;
+}
+
+function renderGrid(): void {
+  const grid = document.getElementById('gmt-grid')!;
+  grid.innerHTML = zones.map(renderCard).join('');
+  grid.querySelectorAll('[data-remove]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const id = (btn as HTMLElement).dataset.remove!;
+      removeZone(id);
+    });
+  });
+}
+
+function updateCards(): void {
+  for (const z of zones) {
+    const id = z.id.replace(/\//g, '-');
+    const clockEl = document.getElementById(`clock-${id}`);
+    const timeEl = document.getElementById(`time-${id}`);
+    if (clockEl) clockEl.innerHTML = makeClockSVG(z.id);
+    if (timeEl) timeEl.textContent = getTimeStr(z.id);
+  }
+  requestAnimationFrame(updateCards);
+}
+
+function addZone(z: ZoneItem): void {
+  if (zones.some((existing) => existing.id === z.id)) return;
+  zones.push(z);
+  saveZones();
+  renderGrid();
+}
+
+function removeZone(id: string): void {
+  zones = zones.filter((z) => z.id !== id);
+  saveZones();
+  renderGrid();
+  if (zones.length === 0) {
+    zones = [...DEFAULT_ZONES];
+    saveZones();
+    renderGrid();
+  }
+}
+
+function filterZones(q: string): ZoneItem[] {
+  return ALL_ZONES.filter((z) => {
+    const l = z.label.toLowerCase();
+    const i = z.id.toLowerCase();
+    return l.includes(q) || i.includes(q);
+  }).slice(0, 10);
+}
+
+function renderDropdownItems(dd: HTMLElement, matches: ZoneItem[]): void {
+  dd.innerHTML = matches
+    .map((z) => {
+      const taken = zones.some((existing) => existing.id === z.id);
+      return `<div class="gmt-dd-item ${taken ? 'taken' : ''}" data-add="${z.id}">
+        <span>${z.label}</span>
+        <span class="gmt-dd-offset">${getOffsetLabel(z.id)}</span>
+      </div>`;
+    })
+    .join('');
+  dd.querySelectorAll('[data-add]').forEach((el) => {
+    el.addEventListener('click', () => {
+      const zid = (el as HTMLElement).dataset.add!;
+      const zone = ALL_ZONES.find((z) => z.id === zid);
+      if (zone) addZone(zone);
+      (document.getElementById('gmt-search') as HTMLInputElement).value = '';
+      dd.classList.remove('open');
+    });
+  });
+  dd.classList.add('open');
+}
+
+function renderDropdown(query: string): void {
+  const dd = document.getElementById('gmt-dropdown')!;
+  const q = query.toLowerCase().trim();
+  if (!q) { dd.classList.remove('open'); return; }
+  const matches = filterZones(q);
+  if (matches.length === 0) {
+    dd.innerHTML = '<div class="gmt-dd-empty">No cities found</div>';
+    dd.classList.add('open');
+    return;
+  }
+  renderDropdownItems(dd, matches);
+}
+
+function init(): void {
+  loadZones();
+  renderGrid();
+  requestAnimationFrame(updateCards);
+
+  const search = document.getElementById('gmt-search') as HTMLInputElement;
+  const dd = document.getElementById('gmt-dropdown')!;
+
+  search.addEventListener('input', () => renderDropdown(search.value));
+  search.addEventListener('focus', () => {
+    if (search.value.trim()) renderDropdown(search.value);
+  });
+  document.addEventListener('click', (e) => {
+    if (!(e.target as HTMLElement).closest('.gmt-search-w')) {
+      dd.classList.remove('open');
+    }
+  });
+  search.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') dd.classList.remove('open');
+  });
+}
+
+init();

package/src/tool/gmt-world-timer/component.astro

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

package/src/tool/gmt-world-timer/components/GmtPanel.astro

@@ -0,0 +1,18 @@
+---
+interface Props { labels: Record<string, string>; }
+const { labels } = Astro.props;
+---
+
+<div class="gmt-tool">
+  <div class="gmt-search-w">
+    <input
+      type="text"
+      class="gmt-search"
+      id="gmt-search"
+      placeholder={labels.searchPlaceholder || 'Search city or time zone...'}
+      autocomplete="off"
+    />
+    <div class="gmt-dropdown" id="gmt-dropdown"></div>
+  </div>
+  <div class="gmt-grid" id="gmt-grid"></div>
+</div>

package/src/tool/gmt-world-timer/entry.ts

@@ -0,0 +1,34 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type GMTWorldTimerUI = {
+  title: string;
+  searchPlaceholder: string;
+  addLabel: string;
+  removeLabel: string;
+  noResults: string;
+  yourZones: string;
+};
+
+export type GMTWorldTimerLocaleContent = ToolLocaleContent<GMTWorldTimerUI>;
+
+export const gmtWorldTimer: ChronoToolEntry<GMTWorldTimerUI> = {
+  id: 'gmt-world-timer',
+  icons: { bg: 'mdi:web', fg: 'mdi:clock-time-eight' },
+  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),
+  },
+};