@jjlmoya/utils-diy 1.11.0 → 1.13.0

package/src/tool/workshopFractionConverter/client.ts

@@ -0,0 +1,183 @@
+import type { Fraction, HistoryEntry } from './types-client';
+import { convertFraction, reverseSearch } from './converter';
+import { displayResult, displayReverseResult } from './ui-updater';
+
+export class WorkshopFractionConverter {
+  history: HistoryEntry[] = [];
+  currentMode = 'forward';
+  currentPrecision = 'carpentry';
+  ui: Record<string, string> = {};
+  constructor(ui?: Record<string, string>) {
+    if (ui) this.ui = ui;
+    this.setupEventListeners();
+    this.loadHistory();
+  }
+  setupEventListeners() {
+    document.querySelectorAll('#wfc-mode-toggle .wfc-mode-btn').forEach((btn) => {
+      btn.addEventListener('click', (e: Event) => this.handleModeToggle(e));
+    });
+    document.querySelectorAll('#wfc-precision-toggle .wfc-mode-btn').forEach((btn) => {
+      btn.addEventListener('click', (e: Event) => this.handlePrecisionToggle(e));
+    });
+    document.querySelectorAll('.wfc-stepper-btn').forEach((btn) => {
+      btn.addEventListener('click', (e: Event) => this.handleStepper(e));
+    });
+    document.querySelectorAll('.wfc-preset-btn').forEach((btn) => {
+      btn.addEventListener('click', (e: Event) => this.handlePreset(e));
+    });
+    this.setupActionButtons();
+    this.setupInputListeners();
+  }
+  setupActionButtons() {
+    document.getElementById('wfc-convert-btn')?.addEventListener('click', () => this.convert());
+    document.getElementById('wfc-clear-btn')?.addEventListener('click', () => this.clear());
+    document.getElementById('wfc-copy-btn')?.addEventListener('click', () => this.copyResult());
+    document.getElementById('wfc-save-btn')?.addEventListener('click', () => this.saveToHistory());
+  }
+  setupInputListeners() {
+    document.getElementById('wfc-whole')?.addEventListener('change', () => this.convert());
+    document.getElementById('wfc-numerator')?.addEventListener('change', () => this.convert());
+    document.getElementById('wfc-denominator')?.addEventListener('change', () => this.convert());
+    document.getElementById('wfc-reverse-mm')?.addEventListener('change', () => this.convert());
+  }
+  handleModeToggle(e: Event) {
+    const target = e.target as HTMLElement;
+    document.querySelectorAll('#wfc-mode-toggle .wfc-mode-btn').forEach((b) => b.classList.remove('active'));
+    target.classList.add('active');
+    this.currentMode = target.dataset.mode || 'forward';
+    this.toggleMode(this.currentMode);
+  }
+  handlePrecisionToggle(e: Event) {
+    const target = e.target as HTMLElement;
+    document.querySelectorAll('#wfc-precision-toggle .wfc-mode-btn').forEach((b) => b.classList.remove('active'));
+    target.classList.add('active');
+    this.currentPrecision = target.dataset.precision || 'carpentry';
+  }
+  handleStepper(e: Event) {
+    const target = e.target as HTMLElement;
+    const stepper = target.dataset.stepper || '';
+    const [field, direction] = stepper.split('-');
+    let inputId = '';
+    if (field === 'whole') inputId = 'wfc-whole';
+    else if (field === 'num') inputId = 'wfc-numerator';
+    else if (field === 'denom') inputId = 'wfc-denominator';
+    const input = document.getElementById(inputId) as HTMLInputElement | null;
+    if (!input) return;
+    const value = parseInt(input.value, 10) || 0;
+    const newValue = direction === 'up' ? value + 1 : Math.max(0, value - 1);
+    input.value = String(newValue);
+    this.convert();
+  }
+  handlePreset(e: Event) {
+    const target = e.target as HTMLElement;
+    const preset = target.dataset.preset || '';
+    const [num, denom] = preset.split('/').map((x) => parseInt(x, 10));
+    const wholeInput = document.getElementById('wfc-whole') as HTMLInputElement | null;
+    const numInput = document.getElementById('wfc-numerator') as HTMLInputElement | null;
+    const denomInput = document.getElementById('wfc-denominator') as HTMLSelectElement | null;
+    if (wholeInput) wholeInput.value = '0';
+    if (numInput) numInput.value = String(num);
+    if (denomInput) denomInput.value = String(denom);
+    document.querySelectorAll('.wfc-preset-btn').forEach((btn) => btn.classList.remove('active'));
+    target.classList.add('active');
+    this.convert();
+  }
+  toggleMode(mode: string) {
+    const forwardInput = document.getElementById('wfc-forward-input');
+    const reverseInput = document.getElementById('wfc-reverse-input');
+    if (mode === 'forward') {
+      forwardInput?.classList.remove('wfc-hidden');
+      reverseInput?.classList.add('wfc-hidden');
+    } else {
+      forwardInput?.classList.add('wfc-hidden');
+      reverseInput?.classList.remove('wfc-hidden');
+    }
+  }
+  convert() {
+    if (this.currentMode === 'forward') {
+      this.convertForward();
+    } else {
+      this.convertReverse();
+    }
+  }
+  convertForward() {
+    const whole = parseInt((document.getElementById('wfc-whole') as HTMLInputElement).value, 10) || 0;
+    const numerator = parseInt((document.getElementById('wfc-numerator') as HTMLInputElement).value, 10) || 0;
+    const denominator = parseInt((document.getElementById('wfc-denominator') as HTMLSelectElement).value, 10) || 1;
+    const input: Fraction = { whole, numerator, denominator };
+    displayResult(convertFraction(input), this.currentPrecision, this.ui);
+  }
+  convertReverse() {
+    const mm = parseFloat((document.getElementById('wfc-reverse-mm') as HTMLInputElement).value) || 0;
+    if (mm === 0) {
+      document.getElementById('wfc-no-result')?.classList.remove('wfc-hidden');
+      document.getElementById('wfc-result-content')?.classList.add('wfc-hidden');
+      return;
+    }
+    displayReverseResult(reverseSearch(mm), this.currentPrecision, this.ui);
+  }
+  copyResult() {
+    const fractionEl = document.getElementById('wfc-result-fraction');
+    const mmEl = document.getElementById('wfc-result-mm');
+    const fraction = fractionEl?.textContent || '';
+    const mm = mmEl?.textContent || '';
+    const text = `${fraction} = ${mm}`;
+    navigator.clipboard.writeText(text);
+  }
+  saveToHistory() {
+    const fractionEl = document.getElementById('wfc-result-fraction');
+    const mmEl = document.getElementById('wfc-result-mm');
+    const fraction = fractionEl?.textContent || '';
+    const mm = mmEl?.textContent || '';
+    const entry = { fraction, mm, time: Date.now() };
+    this.history.unshift(entry);
+    if (this.history.length > 20) this.history.pop();
+    this.saveHistoryLocal();
+    this.renderHistory();
+  }
+  loadHistory() {
+    const stored = localStorage.getItem('wfc-history');
+    if (stored) {
+      this.history = JSON.parse(stored);
+      this.renderHistory();
+    }
+  }
+  saveHistoryLocal() {
+    localStorage.setItem('wfc-history', JSON.stringify(this.history));
+  }
+  renderHistory() {
+    const list = document.getElementById('wfc-history-list');
+    if (!list) return;
+    if (this.history.length === 0) {
+      list.innerHTML = `<div style="text-align: center; color: #9ca3af; font-size: 0.85rem;">${this.ui.historyEmpty || 'No measurements yet'}</div>`;
+      return;
+    }
+    list.innerHTML = this.buildHistoryHTML();
+    this.attachHistoryHandlers(list);
+  }
+  buildHistoryHTML() {
+    return this.history
+      .map((item, idx) => `<div class="wfc-history-item"><span><span class="wfc-history-item-fraction">${item.fraction}</span> = ${item.mm}</span><button class="wfc-history-remove" data-idx="${idx}">${this.ui.historyRemove || 'Remove'}</button></div>`)
+      .join('');
+  }
+  attachHistoryHandlers(list: HTMLElement) {
+    list.querySelectorAll('.wfc-history-remove').forEach((btn) => {
+      btn.addEventListener('click', (e: Event) => {
+        const target = e.target as HTMLElement;
+        const idx = parseInt(target.dataset.idx || '0', 10);
+        this.history.splice(idx, 1);
+        this.saveHistoryLocal();
+        this.renderHistory();
+      });
+    });
+  }
+  clear() {
+    (document.getElementById('wfc-whole') as HTMLInputElement).value = '0';
+    (document.getElementById('wfc-numerator') as HTMLInputElement).value = '0';
+    (document.getElementById('wfc-denominator') as HTMLSelectElement).value = '1';
+    (document.getElementById('wfc-reverse-mm') as HTMLInputElement).value = '';
+    document.getElementById('wfc-no-result')?.classList.remove('wfc-hidden');
+    document.getElementById('wfc-result-content')?.classList.add('wfc-hidden');
+    document.querySelectorAll('.wfc-preset-btn').forEach((btn) => btn.classList.remove('active'));
+  }
+}

package/src/tool/workshopFractionConverter/component.astro

@@ -0,0 +1,226 @@
+---
+import type { WorkshopFractionConverterUI } from './ui';
+
+interface Props { ui?: WorkshopFractionConverterUI; }
+const { ui } = Astro.props;
+const t = (ui ?? {}) as WorkshopFractionConverterUI;
+---
+
+<div class="wfc-root" data-wfc-root data-ui={JSON.stringify(t)}>
+  <div class="wfc-card">
+    <div class="wfc-grid">
+      <div class="wfc-sidebar">
+        <div class="wfc-field">
+          <label class="wfc-field-label">{t.labelFraction}</label>
+          <div class="wfc-mode-toggle" id="wfc-mode-toggle">
+            <button class="wfc-mode-btn active" data-mode="forward">
+              {t.modeForward}
+            </button>
+            <button class="wfc-mode-btn" data-mode="reverse">
+              {t.modeReverse}
+            </button>
+          </div>
+        </div>
+
+        <div class="wfc-field" id="wfc-forward-input" data-forward-input>
+          <label class="wfc-field-label">{t.labelFraction}</label>
+          <div class="wfc-fraction-input">
+            <div class="wfc-fraction-column">
+              <span class="wfc-fraction-label">{t.labelWhole}</span>
+              <div class="wfc-stepper-group">
+                <button class="wfc-stepper-btn" data-stepper="whole-down">−</button>
+                <button class="wfc-stepper-btn" data-stepper="whole-up">+</button>
+              </div>
+              <input
+                type="number"
+                class="wfc-input-number"
+                id="wfc-whole"
+                value="0"
+                min="0"
+                max="999"
+                inputmode="numeric"
+              />
+            </div>
+            <div class="wfc-fraction-column">
+              <span class="wfc-fraction-label">{t.labelNumerator}</span>
+              <div class="wfc-stepper-group">
+                <button class="wfc-stepper-btn" data-stepper="num-down">−</button>
+                <button class="wfc-stepper-btn" data-stepper="num-up">+</button>
+              </div>
+              <input
+                type="number"
+                class="wfc-input-number"
+                id="wfc-numerator"
+                value="0"
+                min="0"
+                max="64"
+                inputmode="numeric"
+              />
+            </div>
+            <div class="wfc-fraction-column">
+              <span class="wfc-fraction-label">{t.labelDenominator}</span>
+              <div class="wfc-stepper-group">
+                <button class="wfc-stepper-btn" data-stepper="denom-down">−</button>
+                <button class="wfc-stepper-btn" data-stepper="denom-up">+</button>
+              </div>
+              <select class="wfc-input-number" id="wfc-denominator" style="appearance: none;">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="4">4</option>
+                <option value="8">8</option>
+                <option value="16">16</option>
+                <option value="32">32</option>
+                <option value="64">64</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="wfc-field">
+            <label class="wfc-field-label">{t.labelFraction}</label>
+            <div class="wfc-presets" id="wfc-presets">
+              <button class="wfc-preset-btn" data-preset="1/4">1/4"</button>
+              <button class="wfc-preset-btn" data-preset="1/2">1/2"</button>
+              <button class="wfc-preset-btn" data-preset="3/8">3/8"</button>
+              <button class="wfc-preset-btn" data-preset="5/16">5/16"</button>
+              <button class="wfc-preset-btn" data-preset="3/16">3/16"</button>
+              <button class="wfc-preset-btn" data-preset="1/8">1/8"</button>
+              <button class="wfc-preset-btn" data-preset="1/16">1/16"</button>
+              <button class="wfc-preset-btn" data-preset="5/8">5/8"</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="wfc-field wfc-hidden" id="wfc-reverse-input" data-reverse-input>
+          <label class="wfc-field-label">{t.reverseSearchLabel}</label>
+          <div style="display: flex; gap: 0.5rem;">
+            <input
+              type="number"
+              class="wfc-input-number"
+              id="wfc-reverse-mm"
+              placeholder="12.7"
+              min="0.1"
+              max="999"
+              step="0.1"
+              inputmode="decimal"
+              style="flex: 1;"
+            />
+            <span style="align-self: flex-end; padding-bottom: 0.75rem; color: #6b7280;">mm</span>
+          </div>
+        </div>
+
+        <div class="wfc-field">
+          <label class="wfc-field-label">{t.precisionLabel}</label>
+          <div class="wfc-mode-toggle" id="wfc-precision-toggle">
+            <button class="wfc-mode-btn active" data-precision="carpentry">
+              {t.precisionCarpentry}
+            </button>
+            <button class="wfc-mode-btn" data-precision="metal">
+              {t.precisionMetal}
+            </button>
+          </div>
+        </div>
+
+        <div class="wfc-button-group">
+          <button class="wfc-button wfc-button-primary" id="wfc-convert-btn">
+            {t.buttonConvert}
+          </button>
+          <button class="wfc-button wfc-button-secondary" id="wfc-clear-btn">
+            {t.buttonClear}
+          </button>
+        </div>
+
+        <div class="wfc-history" id="wfc-history">
+          <div class="wfc-history-title">{t.historyTitle}</div>
+          <div class="wfc-history-list" id="wfc-history-list">
+            <div style="text-align: center; color: #9ca3af; font-size: 0.85rem;">
+              {t.historyEmpty}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="wfc-main" id="wfc-main-content">
+        <div id="wfc-no-result" style="text-align: center; padding: 3rem 0; color: #9ca3af;">
+          <p>{t.helpText}</p>
+        </div>
+
+        <div class="wfc-hidden" id="wfc-result-content">
+          <div class="wfc-result-box">
+            <div class="wfc-result-title">{t.resultTitle}</div>
+            <div class="wfc-result-row">
+              <span class="wfc-result-label">{t.resultFraction}</span>
+              <span class="wfc-result-value wfc-text-mono" id="wfc-result-fraction">
+                0"
+              </span>
+            </div>
+            <div class="wfc-result-row">
+              <span class="wfc-result-label">{t.resultInches}</span>
+              <span class="wfc-result-value wfc-text-mono" id="wfc-result-inches">
+                0.00"
+              </span>
+            </div>
+            <div class="wfc-result-row">
+              <span class="wfc-result-label">{t.resultMillimeters}</span>
+              <span class="wfc-result-value wfc-text-mono" id="wfc-result-mm">
+                0.00 mm
+              </span>
+            </div>
+          </div>
+
+          <div class="wfc-visual-scale">
+            <div style="font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 0.75rem;">
+              {t.labelVisualReference}
+            </div>
+            <div class="wfc-scale-ruler" id="wfc-scale-ruler">
+              <div class="wfc-scale-indicator" id="wfc-scale-indicator" style="width: 0;"></div>
+            </div>
+            <div style="font-size: 0.75rem; color: #6b7280;">
+              <span id="wfc-scale-text">0 mm</span>
+            </div>
+          </div>
+
+          <div>
+            <div class="wfc-result-title">{t.matchTitle}</div>
+            <div class="wfc-match-cards">
+              <div class="wfc-match-card" id="wfc-fastener-match">
+                <div class="wfc-match-header">
+                  <span class="wfc-match-name" id="wfc-fastener-name">−</span>
+                  <span class="wfc-match-badge" id="wfc-fastener-badge">−</span>
+                </div>
+                <div class="wfc-match-details" id="wfc-fastener-details">
+                  {t.matchClosestFastener}
+                </div>
+              </div>
+
+              <div class="wfc-match-card" id="wfc-socket-match">
+                <div class="wfc-match-header">
+                  <span class="wfc-match-name" id="wfc-socket-name">−</span>
+                  <span class="wfc-match-badge" id="wfc-socket-badge">−</span>
+                </div>
+                <div class="wfc-match-details" id="wfc-socket-details">
+                  {t.matchClosestSocket}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="wfc-button-group">
+            <button class="wfc-button wfc-button-primary" id="wfc-copy-btn">
+              {t.buttonCopyResult}
+            </button>
+            <button class="wfc-button wfc-button-secondary" id="wfc-save-btn">
+              {t.buttonSaveToHistory}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { WorkshopFractionConverter } from './client';
+  const root = document.querySelector('[data-wfc-root]');
+  const ui = JSON.parse(root?.getAttribute('data-ui') || '{}');
+  new WorkshopFractionConverter(ui);
+</script>

package/src/tool/workshopFractionConverter/converter.ts

@@ -0,0 +1,110 @@
+import type { Fraction, ConversionResult, ReverseSearchResult } from './types-client';
+import { STANDARD_FASTENERS, STANDARD_SOCKETS } from './types-client';
+
+export function fractionToInches(input: Fraction) {
+  if (input.denominator === 0) return 0;
+  return input.whole + input.numerator / input.denominator;
+}
+
+export function inchesToMillimeters(inches: number) {
+  return inches * 25.4;
+}
+
+export function formatFraction(input: Fraction) {
+  if (input.denominator === 0 || (input.numerator === 0 && input.denominator === 1)) {
+    return `${input.whole}"`;
+  }
+  if (input.whole === 0) {
+    return `${input.numerator}/${input.denominator}"`;
+  }
+  return `${input.whole} ${input.numerator}/${input.denominator}"`;
+}
+
+export function findClosestFastener(mm: number) {
+  if (STANDARD_FASTENERS.length === 0) return null;
+  let closest = STANDARD_FASTENERS[0];
+  let minDiff = Math.abs(closest.mm - mm);
+  for (const fastener of STANDARD_FASTENERS) {
+    const diff = Math.abs(fastener.mm - mm);
+    if (diff < minDiff) {
+      minDiff = diff;
+      closest = fastener;
+    }
+  }
+  const pct = (minDiff / mm) * 100;
+  return {
+    name: closest.name,
+    size_mm: closest.mm,
+    size_inch: closest.inch,
+    difference_mm: closest.mm - mm,
+    difference_pct: pct,
+  };
+}
+
+export function findClosestSocket(mm: number) {
+  if (STANDARD_SOCKETS.length === 0) return null;
+  let closest = STANDARD_SOCKETS[0];
+  let minDiff = Math.abs(closest.mm - mm);
+  for (const socket of STANDARD_SOCKETS) {
+    const diff = Math.abs(socket.mm - mm);
+    if (diff < minDiff) {
+      minDiff = diff;
+      closest = socket;
+    }
+  }
+  const pct = (minDiff / mm) * 100;
+  return {
+    name: closest.name,
+    size_mm: closest.mm,
+    size_inch: closest.inch,
+    difference_mm: closest.mm - mm,
+    difference_pct: pct,
+  };
+}
+
+export function mmToFraction(mm: number): Fraction {
+  const inches = mm / 25.4;
+  const whole = Math.floor(inches);
+  const fractional = inches - whole;
+  const denominators = [2, 4, 8, 16, 32, 64];
+  let bestNum = 0;
+  let bestDenom = 1;
+  let bestError = Math.abs(fractional);
+  for (const denom of denominators) {
+    const num = Math.round(fractional * denom);
+    const error = Math.abs(fractional - num / denom);
+    if (error < bestError) {
+      bestError = error;
+      bestNum = num;
+      bestDenom = denom;
+    }
+  }
+  if (bestNum === bestDenom) {
+    return { whole: whole + 1, numerator: 0, denominator: 1 };
+  }
+  return { whole, numerator: bestNum, denominator: bestDenom };
+}
+
+export function convertFraction(input: Fraction): ConversionResult {
+  const inches = fractionToInches(input);
+  const mm = inchesToMillimeters(inches);
+  return {
+    fraction: input,
+    inches,
+    millimeters: mm,
+    closestFastener: findClosestFastener(mm),
+    closestSocket: findClosestSocket(mm),
+  };
+}
+
+export function reverseSearch(millimeters: number): ReverseSearchResult {
+  const inches = millimeters / 25.4;
+  const fraction = mmToFraction(millimeters);
+  return {
+    input_mm: millimeters,
+    closest_fraction: fraction,
+    inches,
+    closestFastener: findClosestFastener(millimeters),
+    closestSocket: findClosestSocket(millimeters),
+  };
+}