@jjlmoya/utils-cooking 1.29.0 → 1.31.0

package/src/tool/ice-cream-pac-pod/component.astro

@@ -0,0 +1,291 @@
+---
+import SugarFormulators from './components/SugarFormulators.astro';
+import IceCryoGauge from './components/IceCryoGauge.astro';
+import ScoopVisualizer from './components/ScoopVisualizer.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="ice-cream-container">
+  <div class="cryo-card">
+    <div class="cryo-grid">
+
+      <div class="cryo-inputs-column">
+        <SugarFormulators ui={ui} />
+      </div>
+
+      <div class="cryo-visuals-column">
+        <IceCryoGauge ui={ui} />
+        <ScoopVisualizer ui={ui} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const metricBtn = document.getElementById('toggle-metric-btn');
+  const imperialBtn = document.getElementById('toggle-imperial-btn');
+
+  const baseInput = document.getElementById('base-weight-input');
+  const baseSlider = document.getElementById('base-weight-slider');
+  const tempInput = document.getElementById('target-temp-input');
+  const tempSlider = document.getElementById('target-temp-slider');
+
+  const sucroseInput = document.getElementById('sucrose-input');
+  const sucroseSlider = document.getElementById('sucrose-slider');
+  const dextroseInput = document.getElementById('dextrose-input');
+  const dextroseSlider = document.getElementById('dextrose-slider');
+  const glucoseInput = document.getElementById('glucose-input');
+  const glucoseSlider = document.getElementById('glucose-slider');
+  const invertedInput = document.getElementById('inverted-input');
+  const invertedSlider = document.getElementById('inverted-slider');
+  const trehaloseInput = document.getElementById('trehalose-input');
+  const trehaloseSlider = document.getElementById('trehalose-slider');
+
+  const targetPacDisplay = document.getElementById('target-pac-display');
+  const pacValueDisplay = document.getElementById('pac-value-display');
+  const podValueDisplay = document.getElementById('pod-value-display');
+  const solidsValueDisplay = document.getElementById('solids-value-display');
+
+  const pacFill = document.getElementById('pac-popsicle-fill');
+  const podFill = document.getElementById('pod-popsicle-fill');
+  const solidsFill = document.getElementById('solids-popsicle-fill');
+
+  const texStone = document.getElementById('texture-stone');
+  const texCreamy = document.getElementById('texture-creamy');
+  const texSoup = document.getElementById('texture-soup');
+  const statusGlow = document.getElementById('status-glow');
+
+  const statusBadge = document.getElementById('status-badge');
+  const statusBadgeText = document.getElementById('status-badge-text');
+  const statusDescText = document.getElementById('status-description-text');
+
+  let activeUnit = 'metric';
+
+  function bindInputSlider(input, slider, min, max) {
+    input.addEventListener('input', () => {
+      let val = parseFloat(input.value) || 0;
+      if (val < min) val = min;
+      if (val > max) val = max;
+      slider.value = val;
+      updateView();
+    });
+    slider.addEventListener('input', () => {
+      input.value = slider.value;
+      updateView();
+    });
+  }
+
+  bindInputSlider(baseInput, baseSlider, 100, 5000);
+  bindInputSlider(tempInput, tempSlider, -25, -5);
+  bindInputSlider(sucroseInput, sucroseSlider, 0, 500);
+  bindInputSlider(dextroseInput, dextroseSlider, 0, 300);
+  bindInputSlider(glucoseInput, glucoseSlider, 0, 300);
+  bindInputSlider(invertedInput, invertedSlider, 0, 300);
+  bindInputSlider(trehaloseInput, trehaloseSlider, 0, 300);
+
+  function toGrams(val) {
+    return activeUnit === 'imperial' ? val / 0.035274 : val;
+  }
+
+  function toCelsius(val) {
+    return activeUnit === 'imperial' ? (val - 32) * 5 / 9 : val;
+  }
+
+  function setStateUI(state) {
+    const isStone = state === 'stone';
+    const isSoup = state === 'soup';
+    const isCreamy = state === 'creamy';
+
+    texStone.classList.toggle('hidden', !isStone);
+    texCreamy.classList.toggle('hidden', !isCreamy);
+    texSoup.classList.toggle('hidden', !isSoup);
+
+    if (isStone) {
+      statusGlow.className = 'bowl-status-glow glow-stone';
+      statusBadge.className = 'status-badge danger';
+      statusBadgeText.textContent = ui.stoneState;
+      statusDescText.textContent = ui.stoneDesc;
+    } else if (isSoup) {
+      statusGlow.className = 'bowl-status-glow glow-soup';
+      statusBadge.className = 'status-badge inhibited';
+      statusBadgeText.textContent = ui.soupState;
+      statusDescText.textContent = ui.soupDesc;
+    } else {
+      statusGlow.className = 'bowl-status-glow glow-creamy';
+      statusBadge.className = 'status-badge optimal';
+      statusBadgeText.textContent = ui.creamyState;
+      statusDescText.textContent = ui.creamyDesc;
+    }
+  }
+
+  function setGauges(totalPAC, totalPOD, solidsPercentage) {
+    pacFill.style.height = Math.min(100, (totalPAC / 400) * 100) + '%';
+    podFill.style.height = Math.min(100, (totalPOD / 40) * 100) + '%';
+    solidsFill.style.height = Math.min(100, solidsPercentage) + '%';
+  }
+
+  function updateUI(state, values) {
+    targetPacDisplay.textContent = values.targetPAC.toString();
+    pacValueDisplay.textContent = values.totalPAC.toFixed(0);
+    podValueDisplay.textContent = values.totalPOD.toFixed(0);
+    solidsValueDisplay.textContent = values.solidsPercentage.toFixed(0) + '%';
+    setGauges(values.totalPAC, values.totalPOD, values.solidsPercentage);
+    setStateUI(state);
+  }
+
+  function computeState(totalPAC, targetPAC) {
+    const tolerance = 40;
+    if (totalPAC < targetPAC - tolerance) return 'stone';
+    if (totalPAC > targetPAC + tolerance) return 'soup';
+    return 'creamy';
+  }
+
+  function readValues() {
+    return {
+      base: parseFloat(baseInput.value) || 0,
+      temp: parseFloat(tempInput.value) || 0,
+      sucrose: parseFloat(sucroseInput.value) || 0,
+      dextrose: parseFloat(dextroseInput.value) || 0,
+      glucose: parseFloat(glucoseInput.value) || 0,
+      inverted: parseFloat(invertedInput.value) || 0,
+      trehalose: parseFloat(trehaloseInput.value) || 0,
+    };
+  }
+
+  function computeMetrics(v) {
+    const bg = toGrams(v.base);
+    const sg = toGrams(v.sucrose);
+    const dg = toGrams(v.dextrose);
+    const gg = toGrams(v.glucose);
+    const ig = toGrams(v.inverted);
+    const tg = toGrams(v.trehalose);
+
+    const waterWeight = bg * 0.7 + ig * 0.3;
+    const otherSolids = bg * 0.3;
+    const totalSolids = otherSolids + sg + dg + gg * 0.95 + ig * 0.7 + tg * 0.9;
+    const totalMixWeight = bg + sg + dg + gg + ig + tg;
+    const pacContribution = sg * 1.0 + dg * 1.9 + gg * 0.9 + ig * 1.9 + tg * 1.0;
+    const podContribution = sg * 1.0 + dg * 0.7 + gg * 0.4 + ig * 1.3 + tg * 0.45;
+
+    const totalPAC = waterWeight > 0 ? parseFloat(((pacContribution / waterWeight) * 1000).toFixed(1)) : 0;
+    const totalPOD = totalMixWeight > 0 ? parseFloat(((podContribution / totalMixWeight) * 100).toFixed(1)) : 0;
+    const solidsPct = totalMixWeight > 0 ? parseFloat(((totalSolids / totalMixWeight) * 100).toFixed(1)) : 0;
+    const targetPAC = Math.round(18 * Math.abs(toCelsius(v.temp)));
+
+    return { totalPAC, totalPOD, solidsPercentage: solidsPct, targetPAC };
+  }
+
+  const STORAGE_KEY = 'cooking-ice-cream-state';
+
+  function saveState() {
+    const state = {
+      activeUnit,
+      base: baseInput.value,
+      temp: tempInput.value,
+      sucrose: sucroseInput.value,
+      dextrose: dextroseInput.value,
+      glucose: glucoseInput.value,
+      inverted: invertedInput.value,
+      trehalose: trehaloseInput.value
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }
+
+  function loadState() {
+    try {
+      const state = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+      if (state.activeUnit) {
+        activeUnit = state.activeUnit;
+        imperialBtn.classList.toggle('active', state.activeUnit === 'imperial');
+        metricBtn.classList.toggle('active', state.activeUnit === 'metric');
+        if (state.activeUnit === 'imperial') {
+          document.querySelectorAll('.weight-unit-label').forEach(l => l.textContent = ui.ozLabel);
+          document.querySelectorAll('.temp-unit-label').forEach(t => t.textContent = ui.fLabel);
+          tempSlider.min = '-13'; tempSlider.max = '23';
+        }
+      }
+      const sliderPairs = [['base', baseInput, baseSlider], ['temp', tempInput, tempSlider],
+        ['sucrose', sucroseInput, sucroseSlider], ['dextrose', dextroseInput, dextroseSlider],
+        ['glucose', glucoseInput, glucoseSlider], ['inverted', invertedInput, invertedSlider],
+        ['trehalose', trehaloseInput, trehaloseSlider]];
+      sliderPairs.forEach(([key, input, slider]) => { if (state[key]) { input.value = state[key]; slider.value = state[key]; } });
+    } catch {}
+  }
+
+  function updateView() {
+    const v = readValues();
+    const metrics = computeMetrics(v);
+    const state = computeState(metrics.totalPAC, metrics.targetPAC);
+    updateUI(state, metrics);
+    saveState();
+  }
+
+  function convertInputs(targetUnit, inputs, sliders) {
+    inputs.forEach((input, index) => {
+      const val = parseFloat(input.value) || 0;
+      if (targetUnit === 'imperial') {
+        input.value = (val * 0.035274).toFixed(2);
+        sliders[index].max = (parseFloat(sliders[index].max) * 0.035274).toFixed(2);
+      } else {
+        input.value = Math.round(val / 0.035274).toString();
+        sliders[index].max = Math.round(parseFloat(sliders[index].max) / 0.035274).toString();
+      }
+      sliders[index].value = input.value;
+    });
+  }
+
+  function convertTemp(targetUnit) {
+    const tempVal = parseFloat(tempInput.value) || 0;
+    if (targetUnit === 'imperial') {
+      tempInput.value = Math.round((tempVal * 9 / 5) + 32).toString();
+      tempSlider.min = '-13';
+      tempSlider.max = '23';
+    } else {
+      tempInput.value = Math.round((tempVal - 32) * 5 / 9).toString();
+      tempSlider.min = '-25';
+      tempSlider.max = '-5';
+    }
+    tempSlider.value = tempInput.value;
+  }
+
+  function convertUnitsTo(targetUnit) {
+    const labels = document.querySelectorAll('.weight-unit-label');
+    const tempLabels = document.querySelectorAll('.temp-unit-label');
+
+    const inputs = [baseInput, sucroseInput, dextroseInput, glucoseInput, invertedInput, trehaloseInput];
+    const sliders = [baseSlider, sucroseSlider, dextroseSlider, glucoseSlider, invertedSlider, trehaloseSlider];
+
+    convertInputs(targetUnit, inputs, sliders);
+    convertTemp(targetUnit);
+
+    labels.forEach(l => l.textContent = targetUnit === 'imperial' ? ui.ozLabel : ui.gLabel);
+    tempLabels.forEach(t => t.textContent = targetUnit === 'imperial' ? ui.fLabel : ui.cLabel);
+  }
+
+  metricBtn.addEventListener('click', () => {
+    if (activeUnit === 'metric') return;
+    activeUnit = 'metric';
+    metricBtn.classList.add('active');
+    imperialBtn.classList.remove('active');
+    convertUnitsTo('metric');
+    updateView();
+  });
+
+  imperialBtn.addEventListener('click', () => {
+    if (activeUnit === 'imperial') return;
+    activeUnit = 'imperial';
+    imperialBtn.classList.add('active');
+    metricBtn.classList.remove('active');
+    convertUnitsTo('imperial');
+    updateView();
+  });
+
+  loadState();
+  updateView();
+</script>
+

package/src/tool/ice-cream-pac-pod/components/IceCryoGauge.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="popsicle-indicators-grid">
+  <div class="popsicle-bar pac-bar">
+    <div class="popsicle-label-top">{ui.pacLabel}</div>
+    <div class="popsicle-body-wrapper">
+      <div class="popsicle-outline">
+        <div id="pac-popsicle-fill" class="popsicle-fill pac-fill-color"></div>
+        <div class="popsicle-number-overlay">
+          <span id="pac-value-display">0</span>
+        </div>
+      </div>
+      <div class="popsicle-stick"></div>
+    </div>
+    <div class="popsicle-target-display">
+      <span>Target:</span>
+      <span id="target-pac-display">0</span>
+    </div>
+  </div>
+
+  <div class="popsicle-bar pod-bar">
+    <div class="popsicle-label-top">{ui.podLabel}</div>
+    <div class="popsicle-body-wrapper">
+      <div class="popsicle-outline">
+        <div id="pod-popsicle-fill" class="popsicle-fill pod-fill-color"></div>
+        <div class="popsicle-number-overlay">
+          <span id="pod-value-display">0</span>
+        </div>
+      </div>
+      <div class="popsicle-stick"></div>
+    </div>
+    <div class="popsicle-target-display">&nbsp;</div>
+  </div>
+
+  <div class="popsicle-bar solids-bar">
+    <div class="popsicle-label-top">{ui.solidsLabel}</div>
+    <div class="popsicle-body-wrapper">
+      <div class="popsicle-outline">
+        <div id="solids-popsicle-fill" class="popsicle-fill solids-fill-color"></div>
+        <div class="popsicle-number-overlay">
+          <span id="solids-value-display">0%</span>
+        </div>
+      </div>
+      <div class="popsicle-stick"></div>
+    </div>
+    <div class="popsicle-target-display">&nbsp;</div>
+  </div>
+</div>

package/src/tool/ice-cream-pac-pod/components/ScoopVisualizer.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="scoop-visualizer-container">
+  <h3 class="visualizer-header">{ui.scoopabilityLabel}</h3>
+
+  <div class="sundae-bowl-display">
+    <div class="bowl-inner">
+      <div id="texture-stone" class="texture-state hidden">
+        <svg viewBox="0 0 100 100" class="scoop-svg">
+          <path d="M25,80 L75,80 L80,95 L20,95 Z" class="bowl-base"></path>
+          <path d="M15,80 L85,80 L75,50 L25,50 Z" class="bowl-glass"></path>
+          <polygon points="35,65 65,65 70,30 30,30" class="sundae-ice-block"></polygon>
+          <line x1="45" y1="40" x2="45" y2="55" class="sundae-crack"></line>
+          <line x1="55" y1="35" x2="55" y2="50" class="sundae-crack"></line>
+        </svg>
+      </div>
+
+      <div id="texture-creamy" class="texture-state">
+        <svg viewBox="0 0 100 100" class="scoop-svg">
+          <path d="M25,80 L75,80 L80,95 L20,95 Z" class="bowl-base"></path>
+          <path d="M15,80 L85,80 L75,50 L25,50 Z" class="bowl-glass"></path>
+          <path d="M30,60 Q20,30 50,20 Q80,30 70,60 Z" class="sundae-swirl-body"></path>
+          <path d="M38,48 Q50,32 62,48 C55,42 45,42 38,48 Z" class="sundae-swirl-shade"></path>
+          <circle cx="50" cy="15" r="5" class="sundae-cherry"></circle>
+          <path d="M50,10 Q55,2 62,5" class="sundae-cherry-stem"></path>
+        </svg>
+      </div>
+
+      <div id="texture-soup" class="texture-state hidden">
+        <svg viewBox="0 0 100 100" class="scoop-svg">
+          <path d="M25,80 L75,80 L80,95 L20,95 Z" class="bowl-base"></path>
+          <path d="M15,80 L85,80 L75,50 L25,50 Z" class="bowl-glass"></path>
+          <path d="M18,75 Q50,65 82,75 L73,53 Q50,45 27,53 Z" class="sundae-melted-puddle"></path>
+          <path d="M26,80 Q23,90 20,85" class="sundae-drip-stream"></path>
+          <path d="M74,80 Q77,92 78,88" class="sundae-drip-stream"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="bowl-status-glow" id="status-glow"></div>
+  </div>
+
+  <div class="scoop-status-card">
+    <div id="status-badge" class="status-badge optimal">
+      <span id="status-badge-text">{ui.creamyState}</span>
+    </div>
+    <p id="status-description-text" class="status-desc">{ui.creamyDesc}</p>
+  </div>
+</div>

package/src/tool/ice-cream-pac-pod/components/SugarFormulators.astro

@@ -0,0 +1,107 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="ice-cream-recipe-stack">
+  <div class="base-parameters-board">
+    <div class="board-title">Ice Cream Base Parameters</div>
+    
+    <div class="unit-toggle-container">
+      <button type="button" id="toggle-metric-btn" class="unit-btn active">{ui.metricUnit}</button>
+      <button type="button" id="toggle-imperial-btn" class="unit-btn">{ui.imperialUnit}</button>
+    </div>
+
+    <div class="base-field">
+      <div class="field-header">
+        <label for="base-weight-input" class="field-label">{ui.baseWeightLabel}</label>
+        <div class="field-value-wrap">
+          <input type="number" id="base-weight-input" value="1000" min="100" max="5000" step="50" class="field-number" />
+          <span class="weight-unit-label">{ui.gLabel}</span>
+        </div>
+      </div>
+      <input type="range" id="base-weight-slider" min="100" max="5000" step="50" value="1000" class="cone-slider" />
+    </div>
+
+    <div class="base-field">
+      <div class="field-header">
+        <label for="target-temp-input" class="field-label">{ui.targetTempLabel}</label>
+        <div class="field-value-wrap">
+          <input type="number" id="target-temp-input" value="-12" min="-25" max="-5" step="1" class="field-number" />
+          <span class="temp-unit-label">{ui.cLabel}</span>
+        </div>
+      </div>
+      <input type="range" id="target-temp-slider" min="-25" max="-5" step="1" value="-12" class="cone-slider" />
+    </div>
+  </div>
+
+  <div class="scoop-recipe-cone">
+    <div class="scoop-scoop sucrose-scoop">
+      <div class="scoop-inner-content">
+        <div class="scoop-label-row">
+          <label for="sucrose-input" class="scoop-text-label">{ui.sucroseLabel}</label>
+          <div class="scoop-readout">
+            <input type="number" id="sucrose-input" value="150" min="0" max="500" step="5" class="scoop-number-input" />
+            <span class="weight-unit-label">{ui.gLabel}</span>
+          </div>
+        </div>
+        <input type="range" id="sucrose-slider" min="0" max="500" step="5" value="150" class="scoop-slider-bar" />
+      </div>
+    </div>
+
+    <div class="scoop-scoop dextrose-scoop">
+      <div class="scoop-inner-content">
+        <div class="scoop-label-row">
+          <label for="dextrose-input" class="scoop-text-label">{ui.dextroseLabel}</label>
+          <div class="scoop-readout">
+            <input type="number" id="dextrose-input" value="30" min="0" max="300" step="5" class="scoop-number-input" />
+            <span class="weight-unit-label">{ui.gLabel}</span>
+          </div>
+        </div>
+        <input type="range" id="dextrose-slider" min="0" max="300" step="5" value="30" class="scoop-slider-bar" />
+      </div>
+    </div>
+
+    <div class="scoop-scoop glucose-scoop">
+      <div class="scoop-inner-content">
+        <div class="scoop-label-row">
+          <label for="glucose-input" class="scoop-text-label">{ui.glucoseLabel}</label>
+          <div class="scoop-readout">
+            <input type="number" id="glucose-input" value="20" min="0" max="300" step="5" class="scoop-number-input" />
+            <span class="weight-unit-label">{ui.gLabel}</span>
+          </div>
+        </div>
+        <input type="range" id="glucose-slider" min="0" max="300" step="5" value="20" class="scoop-slider-bar" />
+      </div>
+    </div>
+
+    <div class="scoop-scoop inverted-scoop">
+      <div class="scoop-inner-content">
+        <div class="scoop-label-row">
+          <label for="inverted-input" class="scoop-text-label">{ui.invertedLabel}</label>
+          <div class="scoop-readout">
+            <input type="number" id="inverted-input" value="0" min="0" max="300" step="5" class="scoop-number-input" />
+            <span class="weight-unit-label">{ui.gLabel}</span>
+          </div>
+        </div>
+        <input type="range" id="inverted-slider" min="0" max="300" step="5" value="0" class="scoop-slider-bar" />
+      </div>
+    </div>
+
+    <div class="scoop-scoop trehalose-scoop">
+      <div class="scoop-inner-content">
+        <div class="scoop-label-row">
+          <label for="trehalose-input" class="scoop-text-label">{ui.trehaloseLabel}</label>
+          <div class="scoop-readout">
+            <input type="number" id="trehalose-input" value="0" min="0" max="300" step="5" class="scoop-number-input" />
+            <span class="weight-unit-label">{ui.gLabel}</span>
+          </div>
+        </div>
+        <input type="range" id="trehalose-slider" min="0" max="300" step="5" value="0" class="scoop-slider-bar" />
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/ice-cream-pac-pod/entry.ts

@@ -0,0 +1,26 @@
+import type { CookingToolEntry } from '../../types';
+
+export const iceCreamPacPod: CookingToolEntry = {
+  id: 'ice-cream-pac-pod',
+  icons: {
+    bg: 'mdi:snowflake',
+    fg: 'mdi:ice-cream',
+  },
+  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),
+  },
+};