@jjlmoya/utils-cooking 1.27.0 → 1.29.0

package/src/tool/lacto-fermentation-salt-calculator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { lactoFermentationSalt } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await lactoFermentationSalt.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/spherification-bath-calculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as BibliographyComponent } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<BibliographyComponent links={bibliography} />

package/src/tool/spherification-bath-calculator/bibliography.ts

@@ -0,0 +1,10 @@
+export const bibliography = [
+  {
+    name: 'Modernist Cuisine: The Art and Science of Cooking (Nathan Myhrvold)',
+    url: 'https://modernistcuisine.com/books/modernist-cuisine/',
+  },
+  {
+    name: 'Science and Cooking: Physics Meets Food (Michael Brenner et al.)',
+    url: 'https://www.scribd.com/document/522544303/Science-and-Cooking-Michael-Brenner',
+  },
+];

package/src/tool/spherification-bath-calculator/component.astro

@@ -0,0 +1,213 @@
+---
+import PrecisionControls from './components/PrecisionControls.astro';
+import RecipeSummary from './components/RecipeSummary.astro';
+import SpherificationReactor from './components/SpherificationReactor.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="spherification-container">
+  <div class="spherification-console">
+    <div class="spherification-glow-1"></div>
+    <div class="spherification-glow-2"></div>
+
+    <div class="console-column controls-col">
+      <PrecisionControls ui={ui} />
+    </div>
+
+    <div class="console-column reactor-col">
+      <SpherificationReactor ui={ui} />
+    </div>
+
+    <div class="console-column summary-col">
+      <RecipeSummary ui={ui} />
+    </div>
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const metricBtn = document.getElementById('toggle-metric-btn');
+  const imperialBtn = document.getElementById('toggle-imperial-btn');
+  const directBtn = document.getElementById('toggle-direct-btn');
+  const reverseBtn = document.getElementById('toggle-reverse-btn');
+  const xanthanBtn = document.getElementById('toggle-xanthan-btn');
+  const citrateBtn = document.getElementById('toggle-citrate-btn');
+
+  const baseInput = document.getElementById('base-weight-input');
+  const bathInput = document.getElementById('bath-weight-input');
+
+  const baseAgentName = document.getElementById('base-agent-name-display');
+  const bathAgentName = document.getElementById('bath-agent-name-display');
+  const baseAgentVal = document.getElementById('base-agent-grams-display');
+  const bathAgentVal = document.getElementById('bath-agent-grams-display');
+  const xanthanVal = document.getElementById('xanthan-grams-display');
+  const citrateVal = document.getElementById('citrate-grams-display');
+
+  const xanthanRow = document.getElementById('xanthan-summary-item');
+  const citrateRow = document.getElementById('citrate-summary-item');
+  const solubilityWarning = document.getElementById('solubility-warning');
+
+  const beakerBath = document.getElementById('beaker-bath');
+  const sphereCore = document.getElementById('reactor-sphere-core');
+  const sphereMembrane = document.getElementById('reactor-sphere-membrane');
+  
+  const methodBadge = document.getElementById('method-badge');
+  const methodBadgeText = document.getElementById('method-badge-text');
+  const methodDescText = document.getElementById('method-description-text');
+
+  let activeUnit = 'metric';
+  let activeMethod = 'direct';
+  let useXanthan = false;
+  let useCitrate = false;
+
+  function updateReactorUI() {
+    if (activeMethod === 'direct') {
+      beakerBath.setAttribute('fill', 'url(#bath-direct-grad)');
+      sphereCore.setAttribute('fill', 'url(#liquid-direct-grad)');
+      sphereMembrane.className.baseVal = 'sphere-gel-membrane direct';
+      methodBadge.className = 'method-badge direct';
+      methodBadgeText.textContent = ui.directMethod;
+      methodDescText.textContent = ui.directDesc;
+    } else {
+      beakerBath.setAttribute('fill', 'url(#bath-reverse-grad)');
+      sphereCore.setAttribute('fill', 'url(#liquid-reverse-grad)');
+      sphereMembrane.className.baseVal = 'sphere-gel-membrane reverse';
+      methodBadge.className = 'method-badge reverse';
+      methodBadgeText.textContent = ui.reverseMethod;
+      methodDescText.textContent = ui.reverseDesc;
+    }
+  }
+
+  function updateRecipeList(result, displayFactor) {
+    baseAgentName.textContent = activeMethod === 'direct' ? 'Sodium Alginate' : 'Calcium Lactate';
+    bathAgentName.textContent = activeMethod === 'direct' ? 'Calcium Chloride' : 'Sodium Alginate';
+
+    baseAgentVal.textContent = (result.baseAgentGrams * displayFactor).toFixed(2);
+    bathAgentVal.textContent = (result.bathAgentGrams * displayFactor).toFixed(2);
+
+    if (useXanthan) {
+      xanthanRow.classList.remove('hidden');
+      xanthanVal.textContent = (result.xanthanGrams * displayFactor).toFixed(2);
+    } else {
+      xanthanRow.classList.add('hidden');
+    }
+
+    if (useCitrate) {
+      citrateRow.classList.remove('hidden');
+      citrateVal.textContent = (result.citrateGrams * displayFactor).toFixed(2);
+    } else {
+      citrateRow.classList.add('hidden');
+    }
+
+    if (result.solubilityWarning) {
+      solubilityWarning.classList.remove('hidden');
+    } else {
+      solubilityWarning.classList.add('hidden');
+    }
+  }
+
+  function computeResult(baseWeight, bathWeight) {
+    const agentRatioBase = activeMethod === 'direct' ? 0.005 : 0.02;
+    const agentRatioBath = activeMethod === 'direct' ? 0.01 : 0.005;
+    const directWarning = activeMethod === 'direct' && baseWeight * 0.005 > 5;
+    const reverseWarning = activeMethod === 'reverse' && bathWeight * 0.005 > 10;
+    return {
+      baseAgentGrams: baseWeight * agentRatioBase,
+      bathAgentGrams: bathWeight * agentRatioBath,
+      xanthanGrams: useXanthan ? baseWeight * 0.002 : 0,
+      citrateGrams: useCitrate ? baseWeight * 0.005 : 0,
+      solubilityWarning: directWarning || reverseWarning,
+    };
+  }
+
+  function updateView() {
+    let baseWeight = Math.max(0, parseFloat(baseInput.value) || 0);
+    let bathWeight = Math.max(0, parseFloat(bathInput.value) || 0);
+
+    if (activeUnit === 'imperial') {
+      baseWeight = baseWeight / 0.035274;
+      bathWeight = bathWeight / 0.035274;
+    }
+
+    const result = computeResult(baseWeight, bathWeight);
+    const displayFactor = activeUnit === 'imperial' ? 0.035274 : 1.0;
+    updateRecipeList(result, displayFactor);
+    updateReactorUI();
+  }
+
+  function convertInputsTo(targetUnit) {
+    const currentBase = parseFloat(baseInput.value) || 0;
+    const currentBath = parseFloat(bathInput.value) || 0;
+    const labels = document.querySelectorAll('.weight-unit-label');
+    const recipeLabels = document.querySelectorAll('.recipe-unit-label');
+
+    if (targetUnit === 'imperial') {
+      baseInput.value = (currentBase * 0.035274).toFixed(1);
+      bathInput.value = (currentBath * 0.035274).toFixed(1);
+      labels.forEach(label => label.textContent = 'oz');
+      recipeLabels.forEach(label => label.textContent = 'oz');
+    } else {
+      baseInput.value = Math.round(currentBase / 0.035274).toString();
+      bathInput.value = Math.round(currentBath / 0.035274).toString();
+      labels.forEach(label => label.textContent = 'g');
+      recipeLabels.forEach(label => label.textContent = 'g');
+    }
+  }
+
+  metricBtn.addEventListener('click', () => {
+    if (activeUnit === 'metric') return;
+    activeUnit = 'metric';
+    metricBtn.classList.add('active');
+    imperialBtn.classList.remove('active');
+    convertInputsTo('metric');
+    updateView();
+  });
+
+  imperialBtn.addEventListener('click', () => {
+    if (activeUnit === 'imperial') return;
+    activeUnit = 'imperial';
+    imperialBtn.classList.add('active');
+    metricBtn.classList.remove('active');
+    convertInputsTo('imperial');
+    updateView();
+  });
+
+  directBtn.addEventListener('click', () => {
+    if (activeMethod === 'direct') return;
+    activeMethod = 'direct';
+    directBtn.classList.add('active');
+    reverseBtn.classList.remove('active');
+    updateView();
+  });
+
+  reverseBtn.addEventListener('click', () => {
+    if (activeMethod === 'reverse') return;
+    activeMethod = 'reverse';
+    reverseBtn.classList.add('active');
+    directBtn.classList.remove('active');
+    updateView();
+  });
+
+  xanthanBtn.addEventListener('click', () => {
+    useXanthan = !useXanthan;
+    xanthanBtn.classList.toggle('active', useXanthan);
+    document.getElementById('xanthan-switch-circle').classList.toggle('active', useXanthan);
+    updateView();
+  });
+
+  citrateBtn.addEventListener('click', () => {
+    useCitrate = !useCitrate;
+    citrateBtn.classList.toggle('active', useCitrate);
+    document.getElementById('citrate-switch-circle').classList.toggle('active', useCitrate);
+    updateView();
+  });
+
+  baseInput.addEventListener('input', updateView);
+  bathInput.addEventListener('input', updateView);
+
+  updateView();
+</script>

package/src/tool/spherification-bath-calculator/components/PrecisionControls.astro

@@ -0,0 +1,85 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="spherification-controls">
+  <div class="controls-group">
+    <label class="controls-label">{ui.unitLabel}</label>
+    <div class="unit-toggle-container">
+      <button type="button" id="toggle-metric-btn" class="mode-btn active" data-unit="metric">
+        {ui.metricUnit}
+      </button>
+      <button type="button" id="toggle-imperial-btn" class="mode-btn" data-unit="imperial">
+        {ui.imperialUnit}
+      </button>
+    </div>
+  </div>
+
+  <div class="controls-group">
+    <label class="controls-label">{ui.methodLabel}</label>
+    <div class="method-toggle-container">
+      <button type="button" id="toggle-direct-btn" class="mode-btn active" data-method="direct">
+        {ui.directMethod}
+      </button>
+      <button type="button" id="toggle-reverse-btn" class="mode-btn" data-method="reverse">
+        {ui.reverseMethod}
+      </button>
+    </div>
+  </div>
+
+  <div class="controls-group">
+    <label for="base-weight-input" class="controls-label">
+      {ui.baseWeightLabel} (<span class="weight-unit-label">g</span>)
+    </label>
+    <input
+      type="number"
+      id="base-weight-input"
+      min="0"
+      max="100000"
+      step="any"
+      value="500"
+      class="controls-number-input"
+      inputmode="decimal"
+    />
+  </div>
+
+  <div class="controls-group">
+    <label for="bath-weight-input" class="controls-label">
+      {ui.bathWeightLabel} (<span class="weight-unit-label">g</span>)
+    </label>
+    <input
+      type="number"
+      id="bath-weight-input"
+      min="0"
+      max="100000"
+      step="any"
+      value="1000"
+      class="controls-number-input"
+      inputmode="decimal"
+    />
+  </div>
+
+  <div class="switches-grid">
+    <button type="button" id="toggle-xanthan-btn" class="switch-row-btn">
+      <div class="switch-row-info">
+        <span class="switch-row-title">{ui.xanthanLabel}</span>
+      </div>
+      <div class="toggle-switch">
+        <div id="xanthan-switch-circle" class="switch-circle"></div>
+      </div>
+    </button>
+
+    <button type="button" id="toggle-citrate-btn" class="switch-row-btn">
+      <div class="switch-row-info">
+        <span class="switch-row-title">{ui.citrateLabel}</span>
+      </div>
+      <div class="toggle-switch">
+        <div id="citrate-switch-circle" class="switch-circle"></div>
+      </div>
+    </button>
+  </div>
+</div>

package/src/tool/spherification-bath-calculator/components/RecipeSummary.astro

@@ -0,0 +1,60 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="recipe-summary-container">
+  <div class="summary-header">
+    <span class="summary-title">{ui.recipeTitle}</span>
+  </div>
+
+  <div class="recipe-list">
+    <div class="recipe-item">
+      <div class="recipe-item-name">
+        <span id="base-agent-name-display">{ui.baseGellingAgent}</span>
+      </div>
+      <div class="recipe-item-val">
+        <span id="base-agent-grams-display">2.50</span>
+        <span class="recipe-unit-label">g</span>
+      </div>
+    </div>
+
+    <div class="recipe-item">
+      <div class="recipe-item-name">
+        <span id="bath-agent-name-display">{ui.bathGellingAgent}</span>
+      </div>
+      <div class="recipe-item-val">
+        <span id="bath-agent-grams-display">10.00</span>
+        <span class="recipe-unit-label">g</span>
+      </div>
+    </div>
+
+    <div id="xanthan-summary-item" class="recipe-item hidden">
+      <div class="recipe-item-name">
+        <span>{ui.xanthanGum}</span>
+      </div>
+      <div class="recipe-item-val">
+        <span id="xanthan-grams-display">0.00</span>
+        <span class="recipe-unit-label">g</span>
+      </div>
+    </div>
+
+    <div id="citrate-summary-item" class="recipe-item hidden">
+      <div class="recipe-item-name">
+        <span>{ui.sodiumCitrate}</span>
+      </div>
+      <div class="recipe-item-val">
+        <span id="citrate-grams-display">0.00</span>
+        <span class="recipe-unit-label">g</span>
+      </div>
+    </div>
+  </div>
+
+  <div id="solubility-warning" class="solubility-warning hidden">
+    <div class="warning-badge">{ui.warningLabel}</div>
+    <p class="warning-text">{ui.warningDesc}</p>
+  </div>
+</div>

package/src/tool/spherification-bath-calculator/components/SpherificationReactor.astro

@@ -0,0 +1,73 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="reactor-section">
+  <div class="reactor-header">
+    <span class="reactor-title">{ui.methodLabel}</span>
+  </div>
+
+  <div class="reactor-container">
+    <div class="beaker-vessel">
+      <svg viewBox="0 0 200 240" class="reactor-svg" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="beaker-glass-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="rgba(255,255,255,0.4)"></stop>
+            <stop offset="10%" stop-color="rgba(255,255,255,0.1)"></stop>
+            <stop offset="90%" stop-color="rgba(255,255,255,0.1)"></stop>
+            <stop offset="100%" stop-color="rgba(255,255,255,0.4)"></stop>
+          </linearGradient>
+
+          <linearGradient id="liquid-direct-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#fb923c"></stop>
+            <stop offset="100%" stop-color="#ea580c"></stop>
+          </linearGradient>
+
+          <linearGradient id="liquid-reverse-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#f472b6"></stop>
+            <stop offset="100%" stop-color="#db2777"></stop>
+          </linearGradient>
+
+          <linearGradient id="bath-direct-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="rgba(56,189,248,0.15)"></stop>
+            <stop offset="100%" stop-color="rgba(14,165,233,0.3)"></stop>
+          </linearGradient>
+
+          <linearGradient id="bath-reverse-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="rgba(168,85,247,0.15)"></stop>
+            <stop offset="100%" stop-color="rgba(126,34,206,0.3)"></stop>
+          </linearGradient>
+        </defs>
+
+        <rect x="30" y="70" width="140" height="150" rx="15" id="beaker-bath" class="beaker-liquid" fill="url(#bath-direct-grad)"></rect>
+
+        <rect x="26" y="66" width="148" height="158" rx="18" fill="none" stroke="url(#beaker-glass-grad)" stroke-width="4"></rect>
+        <line x1="20" y1="66" x2="180" y2="66" stroke="url(#beaker-glass-grad)" stroke-width="4"></line>
+
+        <g class="nozzle-assembly">
+          <rect x="94" y="10" width="12" height="30" fill="#94a3b8" rx="2"></rect>
+          <path d="M96,40 L104,40 L102,52 L98,52 Z" fill="#64748b"></path>
+          <circle cx="100" cy="56" r="3" class="droplet"></circle>
+        </g>
+
+        <g id="sphere-chamber" class="sphere-chamber">
+          <circle cx="100" cy="140" r="35" id="reactor-sphere-core" class="sphere-fluid-core" fill="url(#liquid-direct-grad)"></circle>
+          <circle cx="100" cy="140" r="35" id="reactor-sphere-membrane" class="sphere-gel-membrane"></circle>
+        </g>
+      </svg>
+    </div>
+  </div>
+
+  <div class="method-info-card">
+    <div id="method-badge" class="method-badge direct">
+      <span id="method-badge-text">{ui.directMethod}</span>
+    </div>
+    <p id="method-description-text" class="method-desc-text">
+      {ui.directDesc}
+    </p>
+  </div>
+</div>

package/src/tool/spherification-bath-calculator/entry.ts

@@ -0,0 +1,26 @@
+import type { CookingToolEntry } from '../../types';
+
+export const spherificationBath: CookingToolEntry = {
+  id: 'spherification-bath-calculator',
+  icons: {
+    bg: 'mdi:flask-outline',
+    fg: 'mdi:dots-circle',
+  },
+  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),
+  },
+};