@jjlmoya/utils-cooking 1.30.0 → 1.31.0

package/src/tool/botulism-canning-safety/component.astro

@@ -0,0 +1,296 @@
+---
+import ThermalControls from './components/ThermalControls.astro';
+import AutoclaveDisplay from './components/AutoclaveDisplay.astro';
+import SporeVisualizer from './components/SporeVisualizer.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="botulism-container">
+  <div class="botulism-console">
+    <ThermalControls ui={ui} />
+    <AutoclaveDisplay ui={ui} />
+    <SporeVisualizer ui={ui} />
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const waterBathBtn = document.getElementById('toggle-water-bath-btn');
+  const pressureCannerBtn = document.getElementById('toggle-pressure-canner-btn');
+
+  const celsiusBtn = document.getElementById('toggle-celsius-btn');
+  const fahrenheitBtn = document.getElementById('toggle-fahrenheit-btn');
+  const tempUnitDisplay = document.getElementById('temp-unit-display');
+
+  const tempInput = document.getElementById('temp-input');
+  const tempSlider = document.getElementById('temp-slider');
+
+  const timeInput = document.getElementById('time-input');
+  const timeSlider = document.getElementById('time-slider');
+
+  const phInput = document.getElementById('ph-input');
+  const phSlider = document.getElementById('ph-slider');
+
+  const f0ValueDisplay = document.getElementById('f0-value-display');
+  const f0GaugeBar = document.getElementById('f0-gauge-bar');
+
+  const dValueDisplay = document.getElementById('d-value-display');
+  const dGaugeBar = document.getElementById('d-gauge-bar');
+
+  const chamberSteamLevel = document.getElementById('chamber-steam-level');
+  const pressureReadout = document.getElementById('pressure-readout');
+  const autoclaveChamberBox = document.getElementById('autoclave-chamber-box');
+
+  const logReductionValueDisplay = document.getElementById('log-reduction-value-display');
+  const canningStatusBadge = document.getElementById('canning-status-badge');
+  const canningStatusBadgeText = document.getElementById('canning-status-badge-text');
+  const canningStatusDescription = document.getElementById('canning-status-description');
+
+  let activeMethod = 'water-bath';
+  let activeTempUnit = 'celsius';
+
+  function computeThermal(temp, time) {
+    const exponent = (temp - 121.11) / 10;
+    const lethalityRate = Math.pow(10, exponent);
+    const f0Value = parseFloat((lethalityRate * time).toFixed(3));
+
+    const dValue = parseFloat((0.21 * Math.pow(10, (121.11 - temp) / 10)).toFixed(3));
+    const logReduction = dValue > 0 ? parseFloat((time / dValue).toFixed(2)) : 0;
+    return { dValue, f0Value, logReduction };
+  }
+
+  function computeSafety(input) {
+    const { ph, method, f0Value, temp, time } = input;
+    if (ph < 4.6) {
+      const minTemp = method === 'water-bath' ? 95 : 100;
+      return temp >= minTemp && time >= 10 ? 'safe' : 'marginal';
+    }
+    if (method === 'water-bath') return 'unsafe';
+    if (f0Value >= 3.0) return 'safe';
+    if (f0Value >= 1.5) return 'marginal';
+    return 'unsafe';
+  }
+
+  function calculateResults(temp, time, ph, method) {
+    const thermal = computeThermal(temp, time);
+    return {
+      dValue: thermal.dValue,
+      f0Value: thermal.f0Value,
+      logReduction: thermal.logReduction,
+      safetyStatus: computeSafety({ ph, method, f0Value: thermal.f0Value, temp, time }),
+    };
+  }
+
+  function updateChamber(temp) {
+    const steamOpacity = Math.max(0, Math.min(0.8, (temp - 90) / 40));
+    chamberSteamLevel.style.opacity = steamOpacity.toString();
+
+    if (activeMethod === 'water-bath') {
+      autoclaveChamberBox.style.display = 'none';
+      pressureReadout.textContent = '0.0 PSI';
+    } else {
+      autoclaveChamberBox.style.display = 'flex';
+      const psi = Math.max(0, (temp - 100) * 0.73);
+      pressureReadout.textContent = `${psi.toFixed(1)} PSI`;
+    }
+  }
+
+  function updateStatus(status) {
+    canningStatusBadge.className = 'canning-status-badge';
+
+    if (status === 'safe') {
+      canningStatusBadge.classList.add('safety-safe');
+      canningStatusBadgeText.textContent = ui.statusSafe;
+      canningStatusDescription.textContent = ui.statusSafeDesc;
+    } else if (status === 'marginal') {
+      canningStatusBadge.classList.add('safety-marginal');
+      canningStatusBadgeText.textContent = ui.statusMarginal;
+      canningStatusDescription.textContent = ui.statusMarginalDesc;
+    } else {
+      canningStatusBadge.classList.add('safety-unsafe');
+      canningStatusBadgeText.textContent = ui.statusUnsafe;
+      canningStatusDescription.textContent = ui.statusUnsafeDesc;
+    }
+  }
+
+  function updateSporeCells(logReduction) {
+    const floorReduction = Math.floor(logReduction);
+    for (let i = 1; i <= 12; i++) {
+      const cell = document.getElementById(`spore-cell-${i}`);
+      if (cell) {
+        if (i > floorReduction) {
+          cell.classList.add('active');
+        } else {
+          cell.classList.remove('active');
+        }
+      }
+    }
+  }
+
+  function saveState() {
+    const state = { activeMethod, activeTempUnit, temp: tempInput.value, time: timeInput.value, ph: phInput.value };
+    localStorage.setItem('cooking-botulism-state', JSON.stringify(state));
+  }
+
+  function loadState() {
+    try {
+      const state = JSON.parse(localStorage.getItem('cooking-botulism-state') || '{}');
+      if (state.activeMethod) {
+        activeMethod = state.activeMethod;
+        waterBathBtn.classList.toggle('active', state.activeMethod === 'water-bath');
+        pressureCannerBtn.classList.toggle('active', state.activeMethod === 'pressure-canner');
+      }
+      if (state.activeTempUnit) {
+        activeTempUnit = state.activeTempUnit;
+        celsiusBtn.classList.toggle('active', state.activeTempUnit === 'celsius');
+        fahrenheitBtn.classList.toggle('active', state.activeTempUnit === 'fahrenheit');
+      }
+      updateTempLimits(true);
+      if (state.temp) syncInputs(state.temp, tempSlider, tempInput);
+      if (state.time) syncInputs(state.time, timeSlider, timeInput);
+      if (state.ph) { phInput.value = state.ph; phSlider.value = state.ph; }
+    } catch {}
+  }
+
+  function render() {
+    const tempUI = parseFloat(tempInput.value) || 0;
+    const time = parseFloat(timeInput.value) || 0;
+    const ph = parseFloat(phInput.value) || 0;
+    const tempCelsius = activeTempUnit === 'fahrenheit' ? (tempUI - 32) * 5 / 9 : tempUI;
+    const results = calculateResults(tempCelsius, time, ph, activeMethod);
+
+    f0ValueDisplay.textContent = results.f0Value.toFixed(3);
+    f0GaugeBar.style.width = `${Math.min(100, (results.f0Value / 6) * 100)}%`;
+    dValueDisplay.textContent = results.dValue.toFixed(3);
+    dGaugeBar.style.width = `${Math.min(100, (results.dValue / 5.0) * 100)}%`;
+    logReductionValueDisplay.textContent = results.logReduction.toFixed(2);
+    updateChamber(tempCelsius);
+    updateStatus(results.safetyStatus);
+    updateSporeCells(results.logReduction);
+    saveState();
+  }
+
+  function syncInputs(val, slider, numInput) {
+    slider.value = val;
+    numInput.value = val;
+  }
+
+  function setTempRange() {
+    const isCelsius = activeTempUnit === 'celsius';
+    const isBath = activeMethod === 'water-bath';
+
+    if (isCelsius) {
+      tempSlider.min = '90'; tempInput.min = '90';
+      tempSlider.max = isBath ? '100' : '130';
+      tempInput.max = isBath ? '100' : '130';
+      tempUnitDisplay.textContent = '°C';
+    } else {
+      tempSlider.min = '194'; tempInput.min = '194';
+      tempSlider.max = isBath ? '212' : '266';
+      tempInput.max = isBath ? '212' : '266';
+      tempUnitDisplay.textContent = '°F';
+    }
+  }
+
+  function updateTempLimits(keepVal) {
+    const currentVal = parseFloat(tempInput.value) || 0;
+    let newVal = currentVal;
+
+    if (!keepVal) {
+      newVal = activeTempUnit === 'celsius'
+        ? Math.round((currentVal - 32) * 5 / 9)
+        : Math.round(currentVal * 9 / 5 + 32);
+    }
+
+    setTempRange();
+    newVal = Math.max(parseFloat(tempInput.min), Math.min(parseFloat(tempInput.max), newVal));
+    syncInputs(newVal, tempSlider, tempInput);
+  }
+
+  tempInput.addEventListener('input', (e) => {
+    syncInputs(e.target.value, tempSlider, tempInput);
+    render();
+  });
+
+  tempSlider.addEventListener('input', (e) => {
+    syncInputs(e.target.value, tempSlider, tempInput);
+    render();
+  });
+
+  timeInput.addEventListener('input', (e) => {
+    syncInputs(e.target.value, timeSlider, timeInput);
+    render();
+  });
+
+  timeSlider.addEventListener('input', (e) => {
+    syncInputs(e.target.value, timeSlider, timeInput);
+    render();
+  });
+
+  phInput.addEventListener('input', (e) => {
+    const cleanVal = e.target.value.replace(',', '.');
+    let val = parseFloat(cleanVal) || 0;
+    if (val < 2.0) val = 2.0;
+    if (val > 7.0) val = 7.0;
+    phSlider.value = val.toString();
+    render();
+  });
+
+  phInput.addEventListener('blur', (e) => {
+    const cleanVal = e.target.value.replace(',', '.');
+    let val = parseFloat(cleanVal) || 0;
+    if (val < 2.0) val = 2.0;
+    if (val > 7.0) val = 7.0;
+    phInput.value = val.toFixed(1);
+    phSlider.value = val.toString();
+    render();
+  });
+
+  phSlider.addEventListener('input', (e) => {
+    phInput.value = parseFloat(e.target.value).toFixed(1);
+    render();
+  });
+
+  celsiusBtn.addEventListener('click', () => {
+    if (activeTempUnit === 'celsius') return;
+    activeTempUnit = 'celsius';
+    celsiusBtn.classList.add('active');
+    fahrenheitBtn.classList.remove('active');
+    updateTempLimits(false);
+    render();
+  });
+
+  fahrenheitBtn.addEventListener('click', () => {
+    if (activeTempUnit === 'fahrenheit') return;
+    activeTempUnit = 'fahrenheit';
+    fahrenheitBtn.classList.add('active');
+    celsiusBtn.classList.remove('active');
+    updateTempLimits(false);
+    render();
+  });
+
+  waterBathBtn.addEventListener('click', () => {
+    if (activeMethod === 'water-bath') return;
+    activeMethod = 'water-bath';
+    waterBathBtn.classList.add('active');
+    pressureCannerBtn.classList.remove('active');
+    updateTempLimits(true);
+    render();
+  });
+
+  pressureCannerBtn.addEventListener('click', () => {
+    if (activeMethod === 'pressure-canner') return;
+    activeMethod = 'pressure-canner';
+    pressureCannerBtn.classList.add('active');
+    waterBathBtn.classList.remove('active');
+    updateTempLimits(true);
+    render();
+  });
+
+  loadState();
+  render();
+</script>

package/src/tool/botulism-canning-safety/components/AutoclaveDisplay.astro

@@ -0,0 +1,62 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="autoclave-diagnostics">
+  <div class="diagnostic-title">{ui.indicatorSectionTitle}</div>
+
+  <div class="gauges-flex-row">
+    <div class="gauge-display-panel f0-panel">
+      <div class="gauge-label-row">
+        <span class="gauge-label-text">{ui.f0Label}</span>
+        <div class="info-tooltip-container">
+          <svg viewBox="0 0 24 24" class="info-icon-svg" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <line x1="12" y1="8" x2="12.01" y2="8"></line>
+          </svg>
+          <span class="info-tooltip-text">{ui.f0Tooltip}</span>
+        </div>
+      </div>
+      <div class="f0-digital-value" id="f0-value-display">0.00</div>
+      <div class="gauge-bar-track">
+        <div id="f0-gauge-bar" class="gauge-bar-fill f0-fill"></div>
+      </div>
+    </div>
+
+    <div class="gauge-display-panel d-panel">
+      <div class="gauge-label-row">
+        <span class="gauge-label-text">{ui.dLabel}</span>
+        <div class="info-tooltip-container">
+          <svg viewBox="0 0 24 24" class="info-icon-svg" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <line x1="12" y1="8" x2="12.01" y2="8"></line>
+          </svg>
+          <span class="info-tooltip-text">{ui.dTooltip}</span>
+        </div>
+      </div>
+      <div class="d-digital-value">
+        <span id="d-value-display">0.21</span>
+        <span class="d-unit">{ui.dValueUnit}</span>
+      </div>
+      <div class="gauge-bar-track">
+        <div id="d-gauge-bar" class="gauge-bar-fill d-fill"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="autoclave-chamber-box" id="autoclave-chamber-box">
+    <svg viewBox="0 0 200 120" class="chamber-svg">
+      <rect x="20" y="10" width="160" height="100" rx="10" ry="10" class="chamber-metal-bg"></rect>
+      <rect x="25" y="15" width="150" height="90" rx="8" ry="8" class="chamber-window"></rect>
+      <rect id="chamber-steam-level" x="25" y="15" width="150" height="90" rx="8" ry="8" class="chamber-steam"></rect>
+      <line x1="25" y1="60" x2="175" y2="60" class="chamber-grid-line"></line>
+      <text x="100" y="65" text-anchor="middle" class="chamber-pressure-readout" id="pressure-readout">0.0 PSI</text>
+    </svg>
+  </div>
+</div>

package/src/tool/botulism-canning-safety/components/SporeVisualizer.astro

@@ -0,0 +1,48 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="spore-deactivation-visualizer">
+  <div class="visualizer-header-title">{ui.visualizerSectionTitle}</div>
+
+  <div class="spore-reduction-grid">
+    <div id="spore-cell-1" class="spore-cell active"></div>
+    <div id="spore-cell-2" class="spore-cell active"></div>
+    <div id="spore-cell-3" class="spore-cell active"></div>
+    <div id="spore-cell-4" class="spore-cell active"></div>
+    <div id="spore-cell-5" class="spore-cell active"></div>
+    <div id="spore-cell-6" class="spore-cell active"></div>
+    <div id="spore-cell-7" class="spore-cell active"></div>
+    <div id="spore-cell-8" class="spore-cell active"></div>
+    <div id="spore-cell-9" class="spore-cell active"></div>
+    <div id="spore-cell-10" class="spore-cell active"></div>
+    <div id="spore-cell-11" class="spore-cell active"></div>
+    <div id="spore-cell-12" class="spore-cell active"></div>
+  </div>
+
+  <div class="spore-reduction-log-readout">
+    <span class="log-reduction-num" id="log-reduction-value-display">0.0</span>
+    <div class="log-reduction-label-row">
+      <span class="log-reduction-label">{ui.logReductionLabel} (D)</span>
+      <div class="info-tooltip-container">
+        <svg viewBox="0 0 24 24" class="info-icon-svg" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="16" x2="12" y2="12"></line>
+          <line x1="12" y1="8" x2="12.01" y2="8"></line>
+        </svg>
+        <span class="info-tooltip-text">{ui.logReductionTooltip}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="safety-indicator-card">
+    <div id="canning-status-badge" class="canning-status-badge safety-unsafe">
+      <span id="canning-status-badge-text">{ui.statusUnsafe}</span>
+    </div>
+    <p id="canning-status-description" class="canning-status-desc">{ui.statusUnsafeDesc}</p>
+  </div>
+</div>

package/src/tool/botulism-canning-safety/components/ThermalControls.astro

@@ -0,0 +1,60 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="canning-controller-panel">
+  <div class="controller-section">
+    <div class="controller-title">{ui.methodLabel}</div>
+    <div class="method-toggle-group">
+      <button type="button" id="toggle-water-bath-btn" class="method-select-btn active">{ui.waterBath}</button>
+      <button type="button" id="toggle-pressure-canner-btn" class="method-select-btn">{ui.pressureCanner}</button>
+    </div>
+  </div>
+
+  <div class="controller-section">
+    <div class="controller-title">Temperature Unit</div>
+    <div class="method-toggle-group">
+      <button type="button" id="toggle-celsius-btn" class="method-select-btn active">°C</button>
+      <button type="button" id="toggle-fahrenheit-btn" class="method-select-btn">°F</button>
+    </div>
+  </div>
+
+  <div class="controller-section parameters-box">
+    <div class="parameter-row">
+      <div class="param-header-label">
+        <label for="temp-input">{ui.tempLabel}</label>
+        <div class="param-input-wrapper">
+          <input type="number" id="temp-input" value="100" min="90" max="130" step="1" class="param-number" />
+          <span class="param-unit" id="temp-unit-display">{ui.cLabel}</span>
+        </div>
+      </div>
+      <input type="range" id="temp-slider" min="90" max="130" step="1" value="100" class="autoclave-slider" />
+    </div>
+
+    <div class="parameter-row">
+      <div class="param-header-label">
+        <label for="time-input">{ui.timeLabel}</label>
+        <div class="param-input-wrapper">
+          <input type="number" id="time-input" value="30" min="1" max="180" step="1" class="param-number" />
+          <span class="param-unit">{ui.minLabel}</span>
+        </div>
+      </div>
+      <input type="range" id="time-slider" min="1" max="180" step="1" value="30" class="autoclave-slider" />
+    </div>
+
+    <div class="parameter-row">
+      <div class="param-header-label">
+        <label for="ph-input">{ui.phLabel}</label>
+        <div class="param-input-wrapper">
+          <input type="text" id="ph-input" value="5.0" class="param-number" inputmode="decimal" />
+          <span class="param-unit">pH</span>
+        </div>
+      </div>
+      <input type="range" id="ph-slider" min="2.0" max="7.0" step="0.1" value="5.0" class="autoclave-slider" />
+    </div>
+  </div>
+</div>

package/src/tool/botulism-canning-safety/entry.ts

@@ -0,0 +1,26 @@
+import type { CookingToolEntry } from '../../types';
+
+export const botulismCanningSafety: CookingToolEntry = {
+  id: 'botulism-canning-safety',
+  icons: {
+    bg: 'mdi:alert-decagram',
+    fg: 'mdi:flask-round-bottom',
+  },
+  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),
+  },
+};