@jjlmoya/utils-chrono 1.6.0 → 1.7.0

package/src/tool/strap-length-calculator/drawing.ts

@@ -0,0 +1,265 @@
+function createSvgElement(tag: string, attrs: Record<string, string>): SVGElement {
+  const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+  Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+  return el;
+}
+
+export interface FlatLayoutParams {
+  svg: SVGSVGElement;
+  wrist: number;
+  lug: number;
+  totalStrap: number;
+  bespokeLong: number;
+  bespokeShort: number;
+}
+
+function drawShortStrap(
+  svg: SVGSVGElement,
+  startX: number,
+  centerY: number,
+  shortWidth: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: startX.toString(),
+    y: (centerY - 12).toString(),
+    width: shortWidth.toString(),
+    height: '24',
+    rx: '4',
+    fill: 'rgba(160, 110, 80, 0.85)',
+    stroke: 'rgba(160, 110, 80, 0.95)',
+    'stroke-width': '1.5',
+  }));
+  svg.appendChild(createSvgElement('rect', {
+    x: (startX - 14).toString(),
+    y: (centerY - 16).toString(),
+    width: '14',
+    height: '32',
+    rx: '3',
+    fill: 'var(--border-color, #ccc)',
+    stroke: 'var(--text-base, #888)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawWatchCase(
+  svg: SVGSVGElement,
+  watchX: number,
+  centerY: number,
+  watchWidth: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: watchX.toString(),
+    y: (centerY - 22).toString(),
+    width: watchWidth.toString(),
+    height: '44',
+    rx: '22',
+    fill: 'rgba(230, 230, 235, 0.15)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '2',
+  }));
+  svg.appendChild(createSvgElement('circle', {
+    cx: (watchX + watchWidth / 2).toString(),
+    cy: centerY.toString(),
+    r: '16',
+    fill: 'rgba(255, 255, 255, 0.05)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawLongStrap(
+  svg: SVGSVGElement,
+  longX: number,
+  centerY: number,
+  longWidth: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: longX.toString(),
+    y: (centerY - 12).toString(),
+    width: longWidth.toString(),
+    height: '24',
+    rx: '4',
+    fill: 'rgba(160, 110, 80, 0.85)',
+    stroke: 'rgba(160, 110, 80, 0.95)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawStrapHoles(
+  svg: SVGSVGElement,
+  longX: number,
+  centerY: number,
+  holeParams: { scale: number; longWidth: number },
+): void {
+  const holeCount = 7;
+  const holeSpacing = 6.5 * holeParams.scale;
+  const firstHoleOffset = 35 * holeParams.scale;
+  for (let i = 0; i < holeCount; i++) {
+    const hx = longX + firstHoleOffset + (i * holeSpacing);
+    if (hx < longX + holeParams.longWidth - 8) {
+      svg.appendChild(createSvgElement('circle', {
+        cx: hx.toString(),
+        cy: centerY.toString(),
+        r: '2',
+        fill: 'rgba(0, 0, 0, 0.4)',
+      }));
+    }
+  }
+}
+
+function drawPinIndicator(
+  svg: SVGSVGElement,
+  pinX: number,
+  label: string,
+): void {
+  svg.appendChild(createSvgElement('line', {
+    x1: pinX.toString(),
+    y1: '15',
+    x2: pinX.toString(),
+    y2: '105',
+    stroke: 'var(--accent, #f43f5e)',
+    'stroke-width': '2',
+    'stroke-dasharray': '4 3',
+  }));
+  const pinLabel = createSvgElement('text', {
+    x: pinX.toString(),
+    y: '10',
+    fill: 'var(--accent, #f43f5e)',
+    'font-size': '10',
+    'font-weight': '700',
+    'text-anchor': 'middle',
+  });
+  pinLabel.textContent = label;
+  svg.appendChild(pinLabel);
+}
+
+export function drawFlatLayout(params: FlatLayoutParams): void {
+  const { svg, lug, bespokeLong, bespokeShort, totalStrap } = params;
+  svg.innerHTML = '';
+
+  const scale = 2.2;
+  const centerY = 60;
+  const watchWidth = lug * scale;
+  const shortWidth = bespokeShort * scale;
+  const longWidth = bespokeLong * scale;
+
+  const startX = 300 - (watchWidth / 2) - shortWidth;
+  const watchX = startX + shortWidth;
+  const longX = watchX + watchWidth;
+
+  drawShortStrap(svg, startX, centerY, shortWidth);
+  drawWatchCase(svg, watchX, centerY, watchWidth);
+  drawLongStrap(svg, longX, centerY, longWidth);
+  drawStrapHoles(svg, longX, centerY, { scale, longWidth });
+
+  const pinDistance = totalStrap - bespokeShort;
+  const pinX = longX + (pinDistance * scale);
+  drawPinIndicator(svg, pinX, 'Active Fit');
+}
+
+function drawWristBackground(
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+  dims: { rx: number; ry: number },
+): void {
+  svg.appendChild(createSvgElement('ellipse', {
+    cx: cx.toString(),
+    cy: cy.toString(),
+    rx: dims.rx.toString(),
+    ry: dims.ry.toString(),
+    fill: 'rgba(230, 230, 235, 0.05)',
+    stroke: 'var(--border-color, #ccc)',
+    'stroke-width': '1.5',
+    'stroke-dasharray': '4 4',
+  }));
+}
+
+function drawWristWatchHead(
+  svg: SVGSVGElement,
+  cx: number,
+  watchParams: { watchX: number; watchY: number; watchWidth: number },
+): void {
+  const { watchX, watchY, watchWidth } = watchParams;
+  svg.appendChild(createSvgElement('rect', {
+    x: watchX.toString(),
+    y: (watchY - 6).toString(),
+    width: watchWidth.toString(),
+    height: '12',
+    rx: '3',
+    fill: 'rgba(230, 230, 235, 0.15)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '2',
+  }));
+  svg.appendChild(createSvgElement('ellipse', {
+    cx: cx.toString(),
+    cy: (watchY - 6).toString(),
+    rx: (watchWidth * 0.35).toString(),
+    ry: '5',
+    fill: 'rgba(255, 255, 255, 0.05)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawWristStraps(
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+  strapParams: { watchX: number; watchY: number; watchWidth: number; rx: number; ry: number },
+): void {
+  const { watchX, watchY, watchWidth, rx, ry } = strapParams;
+  svg.appendChild(createSvgElement('path', {
+    d: `M ${watchX} ${watchY} Q ${cx - rx - 10} ${cy - 10} ${cx} ${cy + ry}`,
+    fill: 'none',
+    stroke: 'rgba(160, 110, 80, 0.85)',
+    'stroke-width': '4',
+  }));
+  svg.appendChild(createSvgElement('path', {
+    d: `M ${watchX + watchWidth} ${watchY} Q ${cx + rx + 10} ${cy - 10} ${cx} ${cy + ry}`,
+    fill: 'none',
+    stroke: 'rgba(160, 110, 80, 0.85)',
+    'stroke-width': '4',
+  }));
+}
+
+function drawWristBuckle(
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+  ry: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: (cx - 6).toString(),
+    y: (cy + ry - 4).toString(),
+    width: '12',
+    height: '8',
+    rx: '1.5',
+    fill: 'var(--border-color, #ccc)',
+    stroke: 'var(--text-base, #888)',
+    'stroke-width': '1',
+  }));
+}
+
+export function drawWristProfile(
+  svg: SVGSVGElement,
+  wrist: number,
+  lug: number,
+): void {
+  svg.innerHTML = '';
+
+  const cx = 150;
+  const cy = 100;
+  const rx = 85;
+  const ry = 52;
+
+  drawWristBackground(svg, cx, cy, { rx, ry });
+
+  const watchY = cy - ry;
+  const watchWidth = Math.min(80, lug * 1.5);
+  const watchX = cx - watchWidth / 2;
+
+  drawWristWatchHead(svg, cx, { watchX, watchY, watchWidth });
+  drawWristStraps(svg, cx, cy, { watchX, watchY, watchWidth, rx, ry });
+  drawWristBuckle(svg, cx, cy, ry);
+}

package/src/tool/strap-length-calculator/entry.ts

@@ -0,0 +1,52 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type StrapLengthCalculatorUI = {
+  title: string;
+  wristLabel: string;
+  wristPlaceholder: string;
+  lugLabel: string;
+  lugPlaceholder: string;
+  fitLabel: string;
+  fitTight: string;
+  fitRegular: string;
+  fitLoose: string;
+  unitLabel: string;
+  standardLabel: string;
+  bespokeLabel: string;
+  natoLabel: string;
+  longSide: string;
+  shortSide: string;
+  totalLength: string;
+  millimeters: string;
+  inches: string;
+  sizeXS: string;
+  sizeS: string;
+  sizeM: string;
+  sizeL: string;
+  sizeXL: string;
+  sizeXXL: string;
+};
+
+export type StrapLengthCalculatorLocaleContent = ToolLocaleContent<StrapLengthCalculatorUI>;
+
+export const strapLengthCalculator: ChronoToolEntry<StrapLengthCalculatorUI> = {
+  id: 'strap-length-calculator',
+  icons: { bg: 'mdi:ruler', fg: 'mdi:tape-measure' },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').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/strap-length-calculator/helpers.ts

@@ -0,0 +1,110 @@
+export interface StrapCalculationInput {
+  wrist: number;
+  lug: number;
+  fit: 'tight' | 'regular' | 'loose';
+  unit: 'mm' | 'in';
+}
+
+export interface StrapCalculationResult {
+  standardText: string;
+  sizeKey: string;
+  bespokeLong: number;
+  bespokeShort: number;
+  natoText: string;
+}
+
+export function toMillimeters(val: number, unit: 'mm' | 'in'): number {
+  if (unit === 'in') {
+    return Math.round(val * 25.4);
+  }
+  return val;
+}
+
+export function formatLength(val: number, unit: 'mm' | 'in'): string {
+  if (unit === 'in') {
+    const inches = val / 25.4;
+    return `${inches.toFixed(2)} in`;
+  }
+  return `${Math.round(val)} mm`;
+}
+
+interface StandardSize {
+  long: number;
+  short: number;
+  sizeKey: string;
+}
+
+function getStandardSizing(wristMm: number): StandardSize {
+  if (wristMm < 152) {
+    return { long: 105, short: 70, sizeKey: 'xs' };
+  }
+  if (wristMm < 165) {
+    return { long: 110, short: 70, sizeKey: 's' };
+  }
+  if (wristMm < 178) {
+    return { long: 115, short: 75, sizeKey: 'm' };
+  }
+  if (wristMm < 190) {
+    return { long: 120, short: 80, sizeKey: 'l' };
+  }
+  if (wristMm < 203) {
+    return { long: 125, short: 85, sizeKey: 'xl' };
+  }
+  return { long: 130, short: 90, sizeKey: 'xxl' };
+}
+
+function getFitAllowance(fit: 'tight' | 'regular' | 'loose'): number {
+  if (fit === 'tight') {
+    return 32;
+  }
+  if (fit === 'loose') {
+    return 42;
+  }
+  return 37;
+}
+
+function formatStandardText(long: number, short: number, unit: 'mm' | 'in'): string {
+  if (unit === 'in') {
+    const lIn = long / 25.4;
+    const sIn = short / 25.4;
+    return `${lIn.toFixed(2)} / ${sIn.toFixed(2)} in`;
+  }
+  return `${long} / ${short} mm`;
+}
+
+function getNatoLength(wristMm: number): number {
+  if (wristMm < 160) {
+    return 260;
+  }
+  if (wristMm >= 190) {
+    return 300;
+  }
+  return 280;
+}
+
+function formatNatoText(len: number, unit: 'mm' | 'in'): string {
+  if (unit === 'in') {
+    const lenIn = len / 25.4;
+    return `${lenIn.toFixed(2)} in`;
+  }
+  return `${len} mm`;
+}
+
+export function calculateStrap(input: StrapCalculationInput): StrapCalculationResult {
+  const wristMm = toMillimeters(input.wrist, input.unit);
+  const lugMm = input.lug;
+  const fitAllowance = getFitAllowance(input.fit);
+  const std = getStandardSizing(wristMm);
+  const totalStrap = wristMm - lugMm + fitAllowance;
+  const bespokeShort = Math.round(totalStrap * 0.38);
+  const bespokeLong = totalStrap - bespokeShort;
+  const natoLen = getNatoLength(wristMm);
+
+  return {
+    standardText: formatStandardText(std.long, std.short, input.unit),
+    sizeKey: std.sizeKey,
+    bespokeLong,
+    bespokeShort,
+    natoText: formatNatoText(natoLen, input.unit),
+  };
+}