@jjlmoya/utils-chrono 1.3.0 → 1.5.0

package/src/tool/watch-size-comparator/client.ts

@@ -0,0 +1,287 @@
+import { drawWatch, getFitColor, getFitRatio } from './drawing';
+
+interface WatchProfile {
+  id: string;
+  name: string;
+  diameter: number;
+  lugToLug: number;
+  thickness: number;
+}
+
+const STORAGE_KEY = 'jjlmoya_chrono_watch_sizes';
+const UNIT_KEY = 'jjlmoya_chrono_unit';
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+const canvas = document.getElementById('size-canvas') as HTMLCanvasElement;
+const ctx = canvas.getContext('2d')!;
+const watchList = document.getElementById('watch-list') as HTMLElement;
+const fitInfo = document.getElementById('fit-info') as HTMLElement;
+
+const inputName = document.getElementById('watch-name-input') as HTMLInputElement;
+const inputDiameter = document.getElementById('input-diameter') as HTMLInputElement;
+const inputL2L = document.getElementById('input-l2l') as HTMLInputElement;
+const inputThickness = document.getElementById('input-thickness') as HTMLInputElement;
+const inputWrist = document.getElementById('input-wrist') as HTMLInputElement;
+const addBtn = document.getElementById('add-watch-btn') as HTMLElement;
+const btnUnitCm = document.getElementById('btn-unit-cm') as HTMLButtonElement;
+const btnUnitIn = document.getElementById('btn-unit-in') as HTMLButtonElement;
+const unitDiameter = document.getElementById('unit-diameter') as HTMLElement;
+const unitL2l = document.getElementById('unit-l2l') as HTMLElement;
+const unitThickness = document.getElementById('unit-thickness') as HTMLElement;
+
+let watches: WatchProfile[] = [];
+let activeId = '';
+let unit: 'cm' | 'in' = 'cm';
+
+function loadUnit(): 'cm' | 'in' {
+  const stored = localStorage.getItem(UNIT_KEY);
+  return stored === 'in' ? 'in' : 'cm';
+}
+
+function saveUnit(): void {
+  localStorage.setItem(UNIT_KEY, unit);
+}
+
+function mmToDisplay(mm: number): string {
+  return unit === 'in' ? (mm / 25.4).toFixed(2) : Math.round(mm * 10) / 10 + '';
+}
+
+function mmUnit(): string {
+  return unit === 'in' ? 'in' : 'mm';
+}
+
+function getWristCm(): number {
+  const val = parseFloat(inputWrist.value);
+  return unit === 'in' ? val * 2.54 : val;
+}
+
+function loadWatches(): void {
+  const data = localStorage.getItem(STORAGE_KEY);
+  watches = data ? JSON.parse(data) : [];
+}
+
+function saveWatches(): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(watches));
+}
+
+function getFitLabel(l2l: number, wristCm: number): string {
+  const ratio = getFitRatio(l2l, wristCm);
+  if (ratio < 0.5) return ui.excellentFit || 'Excellent';
+  if (ratio < 0.58) return ui.goodFit || 'Good';
+  if (ratio < 0.65) return ui.borderlineFit || 'Borderline';
+  return ui.largeFit || 'Too Large';
+}
+
+function getFitDescription(l2l: number, wristCm: number): string {
+  const ratio = getFitRatio(l2l, wristCm);
+  if (ratio < 0.5) return ui.excellentDesc || 'Proportional-lug-to-lug stays well within your wrist.';
+  if (ratio < 0.58) return ui.goodDesc || 'Good fit-overhangs slightly but still comfortable.';
+  if (ratio < 0.65) return ui.borderlineDesc || 'Borderline-lugs approach the edge of your wrist.';
+  return ui.largeDesc || 'Too large-lugs likely overhang your wrist.';
+}
+
+function getFitBadgeClass(l2l: number, wristCm: number): string {
+  const ratio = getFitRatio(l2l, wristCm);
+  if (ratio < 0.5) return 'excellent';
+  if (ratio < 0.58) return 'good';
+  if (ratio < 0.65) return 'borderline';
+  return 'large';
+}
+
+function updateInputUnits(): void {
+  const u = mmUnit();
+  unitDiameter.textContent = u;
+  unitL2l.textContent = u;
+  unitThickness.textContent = u;
+}
+
+function updateUnitButtons(): void {
+  btnUnitCm.classList.toggle('active', unit === 'cm');
+  btnUnitIn.classList.toggle('active', unit === 'in');
+}
+
+function parseMm(input: HTMLInputElement, d: number): number {
+  const val = parseFloat(input.value);
+  return (unit === 'in' ? val * 25.4 : val) || d;
+}
+
+function onRemoveClick(w: WatchProfile): void {
+  watches = watches.filter((x) => x.id !== w.id);
+  saveWatches();
+  if (activeId === w.id) {
+    activeId = watches.length > 0 ? watches[watches.length - 1].id : '';
+  }
+  renderWatchList();
+  selectWatch(activeId);
+}
+
+function createRemoveButton(w: WatchProfile): HTMLButtonElement {
+  const btn = document.createElement('button');
+  btn.className = 'btn-remove';
+  btn.title = ui.remove || 'Remove';
+  btn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/></svg>';
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    onRemoveClick(w);
+  });
+  return btn;
+}
+
+function createWatchListItem(w: WatchProfile): HTMLDivElement {
+  const wristCm = getWristCm();
+  const item = document.createElement('div');
+  item.className = `watch-list-item ${w.id === activeId ? 'active' : ''}`;
+  item.dataset.id = w.id;
+
+  const dot = document.createElement('span');
+  dot.className = 'watch-dot';
+  dot.style.background = getFitColor(w.lugToLug, wristCm);
+
+  const nameSpan = document.createElement('span');
+  nameSpan.className = 'watch-name-label';
+  nameSpan.textContent = w.name;
+
+  const dimsSpan = document.createElement('span');
+  dimsSpan.className = 'watch-dims-label';
+  dimsSpan.textContent = `${mmToDisplay(w.diameter)}\u00d7${mmToDisplay(w.lugToLug)}${mmUnit()}`;
+
+  const badge = document.createElement('span');
+  const badgeClass = getFitBadgeClass(w.lugToLug, wristCm);
+  badge.className = `watch-fit-badge fit-${badgeClass}`;
+  badge.textContent = getFitLabel(w.lugToLug, wristCm);
+
+  item.append(dot, nameSpan, dimsSpan, badge, createRemoveButton(w));
+  item.addEventListener('click', () => { selectWatch(w.id); renderWatchList(); });
+  return item;
+}
+
+function renderWatchList(): void {
+  watchList.innerHTML = '';
+  if (watches.length === 0) {
+    watchList.innerHTML = `<div class="empty-state">${ui.addWatch || 'Add a watch'} \u2191</div>`;
+    return;
+  }
+  watches.forEach((w) => {
+    watchList.appendChild(createWatchListItem(w));
+  });
+}
+
+function updateFitInfo(w: WatchProfile, wristCm: number): void {
+  const color = getFitColor(w.lugToLug, wristCm);
+  fitInfo.innerHTML = `<strong>${getFitLabel(w.lugToLug, wristCm)}</strong> \u2014 ${getFitDescription(w.lugToLug, wristCm)}`;
+  fitInfo.style.borderLeft = `3px solid ${color}`;
+}
+
+function selectWatch(id: string): void {
+  activeId = id;
+  const w = watches.find((x) => x.id === id);
+  if (w) {
+    inputDiameter.value = mmToDisplay(w.diameter);
+    inputL2L.value = mmToDisplay(w.lugToLug);
+    inputThickness.value = mmToDisplay(w.thickness);
+    const wristCm = getWristCm();
+    drawWatch({ ctx, canvas, ui, diameter: w.diameter, l2l: w.lugToLug, thickness: w.thickness, wristCm, unit });
+    updateFitInfo(w, wristCm);
+  } else {
+    inputDiameter.value = mmToDisplay(40);
+    inputL2L.value = mmToDisplay(48);
+    inputThickness.value = mmToDisplay(12);
+    drawWatch({ ctx, canvas, ui, diameter: 40, l2l: 48, thickness: 12, wristCm: getWristCm(), unit });
+    fitInfo.innerHTML = `<strong>${ui.addWatch || 'Add a watch'}</strong> \u2014 ${ui.estimateNote || 'Enter dimensions and add a watch to see how it fits your wrist.'}`;
+    fitInfo.style.borderLeft = 'none';
+  }
+}
+
+function addWatch(): void {
+  const name = inputName.value.trim();
+  if (!name) {
+    inputName.focus();
+    return;
+  }
+  const id = 'ws_' + Date.now();
+  watches.push({
+    id,
+    name,
+    diameter: parseMm(inputDiameter, 40),
+    lugToLug: parseMm(inputL2L, 48),
+    thickness: parseMm(inputThickness, 12),
+  });
+  saveWatches();
+  activeId = id;
+  inputName.value = '';
+  renderWatchList();
+  selectWatch(id);
+}
+
+function onInputChange(): void {
+  const wristCm = getWristCm();
+  const dia = parseMm(inputDiameter, 40), l2l = parseMm(inputL2L, 48), thick = parseMm(inputThickness, 12);
+  const w = watches.find((x) => x.id === activeId);
+  if (w) {
+    w.diameter = dia;
+    w.lugToLug = l2l;
+    w.thickness = thick;
+    saveWatches();
+    drawWatch({ ctx, canvas, ui, diameter: dia, l2l, thickness: thick, wristCm, unit });
+    updateFitInfo(w, wristCm);
+    renderWatchList();
+  } else {
+    drawWatch({ ctx, canvas, ui, diameter: dia, l2l, thickness: thick, wristCm, unit });
+  }
+}
+
+function handleUnitChange(newUnit: 'cm' | 'in'): void {
+  if (unit === newUnit) return;
+  const prevCm = getWristCm();
+  const prevDiaMm = parseMm(inputDiameter, 40);
+  const prevL2lMm = parseMm(inputL2L, 48);
+  const prevThickMm = parseMm(inputThickness, 12);
+  unit = newUnit;
+  saveUnit();
+  updateUnitButtons();
+  updateInputUnits();
+
+  inputWrist.value = unit === 'in' ? (prevCm / 2.54).toFixed(1) : prevCm.toFixed(1);
+  inputWrist.min = unit === 'in' ? '4.7' : '12';
+  inputWrist.max = unit === 'in' ? '9.8' : '25';
+
+  inputDiameter.value = unit === 'in' ? (prevDiaMm / 25.4).toFixed(2) : Math.round(prevDiaMm).toString();
+  inputL2L.value = unit === 'in' ? (prevL2lMm / 25.4).toFixed(2) : Math.round(prevL2lMm).toString();
+  inputThickness.value = unit === 'in' ? (prevThickMm / 25.4).toFixed(2) : Math.round(prevThickMm).toString();
+
+  onInputChange();
+}
+
+btnUnitCm.addEventListener('click', () => handleUnitChange('cm'));
+btnUnitIn.addEventListener('click', () => handleUnitChange('in'));
+addBtn.addEventListener('click', addWatch);
+inputName.addEventListener('keydown', (e) => { if (e.key === 'Enter') addWatch(); });
+inputDiameter.addEventListener('input', onInputChange);
+inputL2L.addEventListener('input', onInputChange);
+inputThickness.addEventListener('input', onInputChange);
+inputWrist.addEventListener('input', onInputChange);
+
+unit = loadUnit();
+updateUnitButtons();
+updateInputUnits();
+
+if (unit === 'in') {
+  inputWrist.value = (17 / 2.54).toFixed(1);
+  inputWrist.min = '4.7'; inputWrist.max = '9.8';
+  inputDiameter.value = (40 / 25.4).toFixed(2);
+  inputL2L.value = (48 / 25.4).toFixed(2);
+  inputThickness.value = (12 / 25.4).toFixed(2);
+} else {
+  inputWrist.value = '17'; inputWrist.min = '12'; inputWrist.max = '25';
+}
+inputWrist.step = '0.5';
+loadWatches();
+if (watches.length > 0) {
+  activeId = watches[watches.length - 1].id;
+  renderWatchList();
+  selectWatch(activeId);
+} else {
+  selectWatch('');
+  renderWatchList();
+}

package/src/tool/watch-size-comparator/component.astro

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

package/src/tool/watch-size-comparator/components/WatchForm.astro

@@ -0,0 +1,121 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="comparator-panel">
+  <div class="panel-section">
+    <div class="section-label">{labels.yourWatches || "Your Watches"}</div>
+    <div class="watch-input-row">
+      <input
+        type="text"
+        id="watch-name-input"
+        placeholder={labels.watchNamePlaceholder || "e.g. Rolex Submariner"}
+      />
+      <button type="button" class="btn-add" id="add-watch-btn"
+        >{labels.addWatch || "Add Watch"}</button
+      >
+    </div>
+  </div>
+
+  <div class="dims-grid" id="dims-grid">
+    <div class="dim-field">
+      <label for="input-diameter"
+        >{labels.caseDiameter || "Case Diameter"}</label
+      >
+      <div class="input-with-unit">
+        <input
+          type="number"
+          id="input-diameter"
+          min="20"
+          max="60"
+          value="40"
+          step="0.5"
+        />
+        <span class="dim-unit" id="unit-diameter">mm</span>
+      </div>
+    </div>
+    <div class="dim-field">
+      <label for="input-l2l">{labels.lugToLug || "Lug-to-Lug"}</label>
+      <div class="input-with-unit">
+        <input
+          type="number"
+          id="input-l2l"
+          min="30"
+          max="80"
+          value="48"
+          step="0.5"
+        />
+        <span class="dim-unit" id="unit-l2l">mm</span>
+      </div>
+    </div>
+    <div class="dim-field">
+      <label for="input-thickness">{labels.thickness || "Thickness"}</label>
+      <div class="input-with-unit">
+        <input
+          type="number"
+          id="input-thickness"
+          min="5"
+          max="25"
+          value="12"
+          step="0.5"
+        />
+        <span class="dim-unit" id="unit-thickness">mm</span>
+      </div>
+    </div>
+    <div class="dim-field">
+      <label for="input-wrist">{labels.wristSize || "Wrist Size"}</label>
+      <div class="wrist-row">
+        <input
+          type="number"
+          id="input-wrist"
+          min="12"
+          max="25"
+          value="17"
+          step="0.5"
+        />
+        <div class="unit-toggle">
+          <button type="button" class="unit-btn active" id="btn-unit-cm">{labels.unitCm || "CM"}</button>
+          <button type="button" class="unit-btn" id="btn-unit-in">{labels.unitInches || "IN"}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="visualizer-wrapper">
+    <canvas id="size-canvas" width="480" height="260"></canvas>
+  </div>
+
+  <div class="legend-row">
+    <span class="legend-item">
+      <span class="legend-swatch" style="background:#22c55e"></span>
+      {labels.excellentFit || "Excellent Fit"}
+    </span>
+    <span class="legend-item">
+      <span class="legend-swatch" style="background:#86efac"></span>
+      {labels.goodFit || "Good Fit"}
+    </span>
+    <span class="legend-item">
+      <span class="legend-swatch" style="background:#facc15"></span>
+      {labels.borderlineFit || "Borderline"}
+    </span>
+    <span class="legend-item">
+      <span class="legend-swatch" style="background:#ef4444"></span>
+      {labels.largeFit || "Too Large"}
+    </span>
+  </div>
+
+  <div class="info-box" id="fit-info">
+    <strong>{labels.fitsWell || "Fits well"}</strong>-{
+      labels.excellentDesc ||
+        "Case diameter is proportional to your wrist. Lug-to-lug stays within your wrist width."
+    }
+  </div>
+
+  <div class="watch-list" id="watch-list">
+    <div class="empty-state">{labels.addWatch || "Add a watch"} ↑</div>
+  </div>
+</div>

package/src/tool/watch-size-comparator/drawing/index.ts

@@ -0,0 +1,79 @@
+import { drawWatchBody } from './watch';
+import { drawDimensionArrows, drawVertDimension } from './measures';
+import { getFitColor, getFitRatio } from './utils';
+
+export { getFitColor, getFitRatio };
+
+interface LabelInfo {
+  primary: string; secondary: string; color: string; dimColor: string;
+}
+
+function u(obj: Record<string, string>, key: string, fallback: string): string {
+  return obj[key] || fallback;
+}
+
+function drawWarning(ctx: CanvasRenderingContext2D, cx: number, H: number, message: string): void {
+  ctx.save();
+  ctx.fillStyle = '#ef4444';
+  ctx.font = 'bold 11px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText('\u26A0 ' + message, cx, H - 44);
+  ctx.restore();
+}
+
+function drawInfoLabel(ctx: CanvasRenderingContext2D, cx: number, y: number, info: LabelInfo): void {
+  ctx.save();
+  ctx.fillStyle = info.color;
+  ctx.font = 'bold 12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'top';
+  ctx.fillText(info.primary, cx, y);
+  ctx.fillStyle = info.dimColor;
+  ctx.font = '10px sans-serif';
+  ctx.fillText(info.secondary, cx, y + 16);
+  ctx.restore();
+}
+
+function d(mm: number, u: 'cm' | 'in'): string {
+  return u === 'in' ? (mm / 25.4).toFixed(1) : (Math.round(mm * 10) / 10).toFixed(1).replace(/\.0$/, '');
+}
+function du(u: 'cm' | 'in'): string {
+  return u === 'in' ? 'in' : 'mm';
+}
+
+export function drawWatch(p: { ctx: CanvasRenderingContext2D; canvas: HTMLCanvasElement; ui: Record<string, string>; diameter: number; l2l: number; thickness: number; wristCm: number; unit: 'cm' | 'in' }): void {
+  const { canvas, ui, diameter, l2l, thickness, wristCm, unit } = p;
+  const ctx = p.ctx, W = canvas.width, H = canvas.height;
+  const tooLargeMsg = u(ui, 'watchTooLarge', 'Watch extends beyond wrist');
+  const caseLabel = u(ui, 'caseDiameter', '').trim(), l2lLabel = u(ui, 'lugToLug', 'L2L').trim();
+  const wristLabel = u(ui, 'wristSize', 'wrist').trim(), thickLabel = u(ui, 'thickness', 'thick').trim();
+  ctx.clearRect(0, 0, W, H);
+
+  const wristWidthMm = (wristCm * 10) / Math.PI;
+  const maxDim = Math.max(diameter, l2l);
+  const scale = Math.min((W - 80) / maxDim, (H - 100) / l2l);
+
+  const cx = W / 2, cy = H / 2 + 8, r = (diameter / 2) * scale;
+  const l2lPx = l2l * scale, wristPx = wristWidthMm * scale;
+  const color = getFitColor(l2l, wristCm), isTooWide = l2lPx > wristPx;
+  const dimColor = 'rgba(128,128,128,0.5)', ratio = Math.round((l2l / wristWidthMm) * 100);
+
+  const wristDisplay = unit === 'in' ? (wristCm / 2.54).toFixed(1) + 'in' : wristCm + 'cm';
+
+  drawWatchBody(ctx, { cx, cy, r, l2lPx, color });
+
+  if (isTooWide) {
+    drawWarning(ctx, cx, H, tooLargeMsg);
+  }
+
+  drawDimensionArrows(ctx, { cx, y: cy + r + 22, halfW: r, label: `${d(diameter, unit)}${du(unit)} ${caseLabel}`.trim(), color });
+
+  if (Math.abs(l2lPx - r * 2) > 2) {
+    const dimX = cx + Math.max(wristPx / 2, l2lPx / 2) + 26;
+    drawVertDimension(ctx, { x: dimX, y1: cy - l2lPx / 2, y2: cy + l2lPx / 2, label: `${d(l2l, unit)}${du(unit)} ${l2lLabel}`.trim(), color: dimColor });
+  }
+
+  drawDimensionArrows(ctx, { cx, y: H - 14, halfW: wristPx / 2, label: `${wristDisplay} ${wristLabel}`.trim(), color: dimColor });
+  drawInfoLabel(ctx, cx, 8, { primary: `${d(diameter, unit)}\u00d7${d(l2l, unit)}\u00d7${d(thickness, unit)}${du(unit)}`, secondary: `${ratio}% ${wristLabel} width \u00b7 ${d(thickness, unit)}${du(unit)} ${thickLabel}`, color, dimColor });
+}

package/src/tool/watch-size-comparator/drawing/measures.ts

@@ -0,0 +1,57 @@
+export function drawDimensionArrows(ctx: CanvasRenderingContext2D, p: { cx: number; y: number; halfW: number; label: string; color: string }): void {
+  const { cx, y, halfW, label, color } = p;
+  const x1 = cx - halfW, x2 = cx + halfW;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1;
+  ctx.font = '10px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'top';
+  ctx.beginPath();
+  ctx.moveTo(x1, y);
+  ctx.lineTo(x2, y);
+  ctx.stroke();
+  const a = 4;
+  ctx.beginPath();
+  ctx.moveTo(x1, y - a);
+  ctx.lineTo(x1, y + a);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x2, y - a);
+  ctx.lineTo(x2, y + a);
+  ctx.stroke();
+  ctx.fillText(label, cx, y + 5);
+  ctx.restore();
+}
+
+export function drawVertDimension(ctx: CanvasRenderingContext2D, p: { x: number; y1: number; y2: number; label: string; color: string }): void {
+  const { x, y1, y2, label, color } = p;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 1;
+  ctx.font = '10px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.beginPath();
+  ctx.moveTo(x, y1);
+  ctx.lineTo(x, y2);
+  ctx.stroke();
+  const a = 4;
+  ctx.beginPath();
+  ctx.moveTo(x - a, y1);
+  ctx.lineTo(x + a, y1);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x - a, y2);
+  ctx.lineTo(x + a, y2);
+  ctx.stroke();
+  ctx.save();
+  ctx.translate(x - 10, (y1 + y2) / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText(label, 0, 0);
+  ctx.restore();
+  ctx.restore();
+}

package/src/tool/watch-size-comparator/drawing/utils.ts

@@ -0,0 +1,37 @@
+export interface RectConfig {
+  x: number; y: number; w: number; h: number; r: number;
+}
+
+export function roundRect(ctx: CanvasRenderingContext2D, p: RectConfig): void {
+  const { x, y, w, h, r } = p;
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.arcTo(x + w, y, x + w, y + r, r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+  ctx.lineTo(x + r, y + h);
+  ctx.arcTo(x, y + h, x, y + h - r, r);
+  ctx.lineTo(x, y + r);
+  ctx.arcTo(x, y, x + r, y, r);
+  ctx.closePath();
+}
+
+export function hexToRgba(hex: string, a: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+export function getFitRatio(l2l: number, wristCm: number): number {
+  return l2l / (wristCm * 10);
+}
+
+export function getFitColor(l2l: number, wristCm: number): string {
+  const ratio = getFitRatio(l2l, wristCm);
+  if (ratio < 0.5) return '#22c55e';
+  if (ratio < 0.58) return '#86efac';
+  if (ratio < 0.65) return '#facc15';
+  return '#ef4444';
+}

package/src/tool/watch-size-comparator/drawing/watch.ts

@@ -0,0 +1,78 @@
+import { roundRect, hexToRgba } from './utils';
+import type { RectConfig } from './utils';
+
+function drawLugs(ctx: CanvasRenderingContext2D, p: { cx: number; cy: number; l2lPx: number; lugW: number; lugH: number; color: string }): void {
+  const { cx, cy, l2lPx, lugW, lugH, color } = p;
+  const lx = cx - lugW / 2;
+  const topLug: RectConfig = { x: lx, y: cy - l2lPx / 2, w: lugW, h: lugH, r: 2 };
+  const botLug: RectConfig = { x: lx, y: cy + l2lPx / 2 - lugH, w: lugW, h: lugH, r: 2 };
+
+  roundRect(ctx, topLug);
+  ctx.fillStyle = hexToRgba(color, 0.2);
+  ctx.fill();
+  ctx.strokeStyle = hexToRgba(color, 0.5);
+  ctx.lineWidth = 1.2;
+  ctx.stroke();
+
+  roundRect(ctx, botLug);
+  ctx.fillStyle = hexToRgba(color, 0.2);
+  ctx.fill();
+  ctx.strokeStyle = hexToRgba(color, 0.5);
+  ctx.lineWidth = 1.2;
+  ctx.stroke();
+}
+
+function drawWatchCase(ctx: CanvasRenderingContext2D, p: { cx: number; cy: number; r: number; color: string }): void {
+  const { cx, cy, r, color } = p;
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.15)';
+  ctx.shadowBlur = 10;
+  ctx.shadowOffsetY = 2;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fillStyle = hexToRgba(color, 0.15);
+  ctx.fill();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2.5;
+  ctx.stroke();
+  ctx.restore();
+}
+
+function drawDial(ctx: CanvasRenderingContext2D, p: { cx: number; cy: number; r: number; color: string }): void {
+  const { cx, cy, r, color } = p;
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(cx, cy, r * 0.75, 0, Math.PI * 2);
+  ctx.fillStyle = hexToRgba(color, 0.08);
+  ctx.fill();
+  ctx.strokeStyle = hexToRgba(color, 0.3);
+  ctx.lineWidth = 0.5;
+  ctx.stroke();
+  ctx.restore();
+
+  for (let i = 0; i < 12; i++) {
+    const a = (i * 30 - 90) * Math.PI / 180;
+    const outer = r * 0.7, inner = r * 0.62;
+    ctx.beginPath();
+    ctx.moveTo(cx + Math.cos(a) * inner, cy + Math.sin(a) * inner);
+    ctx.lineTo(cx + Math.cos(a) * outer, cy + Math.sin(a) * outer);
+    ctx.strokeStyle = hexToRgba(color, 0.4);
+    ctx.lineWidth = i % 3 === 0 ? 1.5 : 0.8;
+    ctx.stroke();
+  }
+
+  ctx.beginPath();
+  ctx.arc(cx, cy, 2, 0, Math.PI * 2);
+  ctx.fillStyle = hexToRgba(color, 0.7);
+  ctx.fill();
+}
+
+export function drawWatchBody(ctx: CanvasRenderingContext2D, p: { cx: number; cy: number; r: number; l2lPx: number; color: string }): void {
+  const { cx, cy, r, l2lPx, color } = p;
+  const lugH = (l2lPx - r * 2) / 2;
+  if (lugH > 0) {
+    drawLugs(ctx, { cx, cy, l2lPx, lugW: r * 0.6, lugH, color });
+  }
+  drawWatchCase(ctx, { cx, cy, r, color });
+  drawDial(ctx, { cx, cy, r, color });
+}