@jjlmoya/utils-cooking 1.2.0

package/src/tool/pizza/Pizza.css

@@ -0,0 +1,569 @@
+.pizza-container {
+    --color-primary: #f97316;
+    --color-primary-dark: #ea580c;
+    --color-primary-light: #fed7aa;
+    --color-secondary: #3b82f6;
+    --color-secondary-dark: #1e40af;
+    --color-secondary-light: #bfdbfe;
+    --color-bg: #fff;
+    --color-border: #e2e8f0;
+    --color-text-primary: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-tertiary: #94a3b8;
+    --color-white: #fff;
+    --color-blue-400: #60a5fa;
+    --color-blue-500: #3b82f6;
+    --color-blue-100: #dbeafe;
+    --color-blue-300: #93c5fd;
+    --color-orange-100: #fed7aa;
+    --color-orange-300: #fdba74;
+    --color-slate-200: #e2e8f0;
+    --color-slate-400: #cbd5e1;
+    --color-slate-800: #1e293b;
+    --color-slate-900: #0f172a;
+    --color-amber-100: #fef08a;
+    --color-orange-400: #fb923c;
+    --color-orange-600: #b45309;
+    --color-orange-700: #92400e;
+    --color-orange-900: #78350f;
+    --color-bg-dark: #0f172a;
+    --color-border-dark: #1e293b;
+
+    width: 100%;
+}
+
+.theme-dark .pizza-container {
+    --color-bg: #0f172a;
+    --color-border: #1e293b;
+    --color-text-primary: #f1f5f9;
+    --color-text-secondary: #cbd5e1;
+    --color-text-tertiary: #64748b;
+}
+
+.pizza-grid {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: 1fr;
+}
+
+@media (min-width: 1024px) {
+    .pizza-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+    }
+}
+
+.pizza-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+@media (min-width: 1024px) {
+    .pizza-controls {
+        grid-column: span 1;
+        grid-row: span 2;
+    }
+}
+
+.pizza-card {
+    background-color: var(--color-bg);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--color-border);
+}
+
+@media (min-width: 768px) {
+    .pizza-card {
+        padding: 2rem;
+    }
+}
+
+.pizza-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--color-text-primary);
+}
+
+.pizza-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--color-primary);
+}
+
+.pizza-controls-space {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+}
+
+.pizza-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.pizza-label-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    align-items: center;
+}
+
+.pizza-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.pizza-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-primary);
+}
+
+.pizza-value-blue {
+    color: var(--color-secondary);
+}
+
+.pizza-unit {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--color-text-tertiary);
+    margin-left: 0.25rem;
+}
+
+.pizza-slider {
+    width: 100%;
+    height: 0.5rem;
+    background-color: #e2e8f0;
+    border-radius: 0.5rem;
+    appearance: none;
+    cursor: pointer;
+    accent-color: var(--color-primary);
+    transition: all 0.2s;
+}
+
+.pizza-slider:hover {
+    accent-color: var(--color-primary-dark);
+}
+
+.pizza-slider-blue {
+    accent-color: var(--color-secondary);
+}
+
+.pizza-slider-blue:hover {
+    accent-color: var(--color-secondary-dark);
+}
+
+.pizza-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: currentcolor;
+    cursor: pointer;
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+.pizza-slider::-moz-range-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: currentcolor;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+.theme-dark .pizza-slider::-webkit-slider-thumb {
+    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.5);
+}
+
+.theme-dark .pizza-slider::-moz-range-thumb {
+    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.5);
+}
+
+.pizza-range-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary);
+    margin-top: 0.5rem;
+}
+
+.pizza-tip {
+    background-color: rgba(249, 115, 22, 0.05);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    border: 1px solid rgba(249, 115, 22, 0.1);
+    display: flex;
+    gap: 1rem;
+}
+
+.pizza-tip-icon-wrapper {
+    padding: 0.75rem;
+    background-color: rgba(249, 115, 22, 0.1);
+    border-radius: 0.75rem;
+    height: fit-content;
+    flex-shrink: 0;
+}
+
+.pizza-tip-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--color-orange-600);
+}
+
+.pizza-tip-title {
+    font-weight: 700;
+    color: var(--color-orange-900);
+    margin-bottom: 0.25rem;
+}
+
+.theme-dark .pizza-tip-title {
+    color: var(--color-orange-100);
+}
+
+.pizza-tip-text {
+    font-size: 0.875rem;
+    color: var(--color-orange-700);
+    line-height: 1.5;
+}
+
+.theme-dark .pizza-tip-text {
+    color: var(--color-amber-100);
+}
+
+.pizza-recipe {
+}
+
+@media (min-width: 1024px) {
+    .pizza-recipe {
+        grid-column: span 1;
+        grid-row: span 1;
+    }
+}
+
+.pizza-recipe-card {
+    background-color: var(--color-bg-dark);
+    color: var(--color-white);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 768px) {
+    .pizza-recipe-card {
+        padding: 3rem;
+    }
+}
+
+.pizza-recipe-header {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 3rem;
+}
+
+@media (min-width: 768px) {
+    .pizza-recipe-header {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+    }
+}
+
+.pizza-recipe-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+}
+
+.pizza-yeast-buttons {
+    display: flex;
+    gap: 0.5rem;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 0.25rem;
+    border-radius: 0.75rem;
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .pizza-yeast-buttons {
+        width: auto;
+    }
+}
+
+.pizza-yeast-btn {
+    flex: 1;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    background-color: transparent;
+    color: var(--color-text-tertiary);
+    border: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: center;
+}
+
+.pizza-yeast-btn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+@media (min-width: 768px) {
+    .pizza-yeast-btn {
+        flex: none;
+    }
+}
+
+.pizza-yeast-btn-active {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--color-white);
+}
+
+.pizza-recipe-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3rem;
+}
+
+@media (min-width: 768px) {
+    .pizza-recipe-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+    }
+}
+
+.pizza-recipe-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.pizza-recipe-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: color 0.2s;
+}
+
+.pizza-recipe-label-white {
+    color: var(--color-slate-400);
+}
+
+.pizza-recipe-label-white:hover {
+    color: var(--color-white);
+}
+
+.pizza-recipe-label-blue {
+    color: var(--color-blue-400);
+}
+
+.pizza-recipe-label-blue:hover {
+    color: var(--color-blue-300);
+}
+
+.pizza-recipe-label-gray {
+    color: var(--color-slate-400);
+}
+
+.pizza-recipe-label-gray:hover {
+    color: var(--color-slate-200);
+}
+
+.pizza-recipe-label-orange {
+    color: var(--color-orange-400);
+}
+
+.pizza-recipe-label-orange:hover {
+    color: var(--color-orange-300);
+}
+
+.pizza-recipe-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.pizza-recipe-value {
+    font-size: 3rem;
+    font-weight: 900;
+    letter-spacing: -0.05em;
+    font-variant-numeric: tabular-nums;
+}
+
+@media (min-width: 768px) {
+    .pizza-recipe-value {
+        font-size: 3.75rem;
+    }
+}
+
+.pizza-recipe-value-blue {
+    color: var(--color-blue-100);
+}
+
+.pizza-recipe-value-orange {
+    color: var(--color-orange-100);
+}
+
+.pizza-recipe-unit {
+    font-size: 1.125rem;
+    font-weight: 400;
+    color: var(--color-text-secondary);
+    margin-left: 0.25rem;
+}
+
+.pizza-recipe-bar {
+    height: 0.25rem;
+    width: 100%;
+    background-color: var(--color-slate-800);
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+.pizza-recipe-bar-fill {
+    height: 100%;
+    background-color: var(--color-white);
+    width: 100%;
+    transform-origin: left;
+    transition: transform 1s;
+    border-radius: 0.25rem;
+}
+
+.pizza-recipe-bar-fill-blue {
+    background-color: var(--color-blue-500);
+}
+
+.pizza-recipe-note {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    margin-top: 0.5rem;
+}
+
+.pizza-recipe-total {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.pizza-recipe-total-label {
+    font-size: 0.875rem;
+    color: var(--color-slate-400);
+}
+
+.pizza-recipe-total-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.pizza-visual {
+}
+
+@media (min-width: 1024px) {
+    .pizza-visual {
+        grid-column: span 1;
+        grid-row: span 1;
+    }
+}
+
+.pizza-visual-card {
+    background-color: var(--color-bg);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    border: 1px solid var(--color-border);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 20rem;
+}
+
+.pizza-visual-container {
+    position: relative;
+    width: 100%;
+    max-width: 20rem;
+    height: 16rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pizza-visual-dough {
+    border-radius: 50%;
+    background-color: #f3e5ab;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: all 0.5s;
+    position: relative;
+    z-index: 10;
+}
+
+.pizza-visual-dough::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.4) 0%,
+        rgba(0, 0, 0, 0.05) 100%
+    );
+}
+
+.pizza-visual-reference {
+    position: absolute;
+    bottom: 0;
+    right: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    opacity: 0.3;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.pizza-visual-reference-icon {
+    width: 6rem;
+    height: 6rem;
+    color: var(--color-slate-400);
+}
+
+.pizza-visual-reference-label {
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+    color: var(--color-slate-400);
+}
+
+.pizza-visual-diameter {
+    position: absolute;
+    bottom: -2rem;
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary);
+}
+
+.pizza-visual-text {
+    margin-top: 2rem;
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    max-width: 16rem;
+}

package/src/tool/pizza/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography } from "@jjlmoya/utils-shared";
+import { content } from "./i18n/es";
+---
+
+<Bibliography links={content.bibliography} />

package/src/tool/pizza/calculator.ts

@@ -0,0 +1,143 @@
+interface DOMElements {
+  inputPizzas: HTMLInputElement;
+  inputWeight: HTMLInputElement;
+  inputHydration: HTMLInputElement;
+  inputSalt: HTMLInputElement;
+  displayPizzas: HTMLElement | null;
+  displayWeight: HTMLElement | null;
+  displayHydration: HTMLElement | null;
+  displaySalt: HTMLElement | null;
+  resultFlour: HTMLElement | null;
+  resultWater: HTMLElement | null;
+  resultSalt: HTMLElement | null;
+  resultYeast: HTMLElement | null;
+  resultTotal: HTMLElement | null;
+  barWater: HTMLElement | null;
+  doughVisual: HTMLElement;
+  visualDiameter: HTMLElement | null;
+  btnYeastFresh: HTMLElement | null;
+  btnYeastDry: HTMLElement | null;
+}
+
+interface CalculatorState {
+  useFreshYeast: boolean;
+  dom: DOMElements;
+}
+
+function getInputValues(dom: DOMElements) {
+  return {
+    pizzas: parseInt(dom.inputPizzas.value),
+    weight: parseInt(dom.inputWeight.value),
+    hydration: parseInt(dom.inputHydration.value) / 100,
+    salt: parseFloat(dom.inputSalt.value) / 100,
+  };
+}
+
+function calculateValues(inputs: ReturnType<typeof getInputValues>, useFreshYeast: boolean) {
+  const totalDoughWeight = inputs.pizzas * inputs.weight;
+  const flour = totalDoughWeight / (1 + inputs.hydration + inputs.salt);
+  return {
+    flour,
+    water: flour * inputs.hydration,
+    saltGrams: flour * inputs.salt,
+    yeast: useFreshYeast ? flour * 0.003 : flour * 0.001,
+    totalDough: totalDoughWeight,
+  };
+}
+
+function updateDisplay(state: CalculatorState) {
+  const inputs = getInputValues(state.dom);
+  const values = calculateValues(inputs, state.useFreshYeast);
+  const totalWeight = values.flour + values.water + values.saltGrams + values.yeast;
+
+  if (state.dom.resultFlour) state.dom.resultFlour.textContent = Math.round(values.flour).toString();
+  if (state.dom.resultWater) state.dom.resultWater.textContent = Math.round(values.water).toString();
+  if (state.dom.resultSalt) state.dom.resultSalt.textContent = (Math.round(values.saltGrams * 10) / 10).toString();
+  if (state.dom.resultYeast) state.dom.resultYeast.textContent = (Math.round(values.yeast * 10) / 10).toString();
+  if (state.dom.resultTotal) state.dom.resultTotal.textContent = Math.round(totalWeight).toString();
+
+  if (state.dom.barWater) {
+    const waterPercentage = (values.water / values.totalDough) * 100;
+    state.dom.barWater.style.width = waterPercentage + "%";
+  }
+
+  const diameter = Math.round(Math.sqrt((inputs.weight * inputs.pizzas) / 0.06));
+  if (state.dom.visualDiameter) state.dom.visualDiameter.textContent = diameter.toString();
+
+  const size = Math.max(100, Math.min(300, diameter * 2));
+  state.dom.doughVisual.style.width = size + "px";
+  state.dom.doughVisual.style.height = size + "px";
+}
+
+function setupInputListeners(state: CalculatorState) {
+  const { inputPizzas, inputWeight, inputHydration, inputSalt, displayPizzas, displayWeight, displayHydration, displaySalt } = state.dom;
+
+  function updateDisplays() {
+    if (displayPizzas) displayPizzas.textContent = inputPizzas.value;
+    if (displayWeight) displayWeight.textContent = inputWeight.value;
+    if (displayHydration) displayHydration.textContent = inputHydration.value;
+    if (displaySalt) displaySalt.textContent = parseFloat(inputSalt.value).toFixed(1);
+    updateDisplay(state);
+  }
+
+  inputPizzas.addEventListener("input", updateDisplays);
+  inputWeight.addEventListener("input", updateDisplays);
+  inputHydration.addEventListener("input", updateDisplays);
+  inputSalt.addEventListener("input", updateDisplays);
+}
+
+function setupYeastListeners(state: CalculatorState) {
+  const { btnYeastFresh, btnYeastDry } = state.dom;
+
+  if (btnYeastFresh) {
+    btnYeastFresh.addEventListener("click", () => {
+      state.useFreshYeast = true;
+      btnYeastFresh?.classList.add("pizza-yeast-btn-active");
+      btnYeastDry?.classList.remove("pizza-yeast-btn-active");
+      updateDisplay(state);
+    });
+  }
+
+  if (btnYeastDry) {
+    btnYeastDry.addEventListener("click", () => {
+      state.useFreshYeast = false;
+      btnYeastDry?.classList.add("pizza-yeast-btn-active");
+      btnYeastFresh?.classList.remove("pizza-yeast-btn-active");
+      updateDisplay(state);
+    });
+  }
+}
+
+function getDOMElements(): DOMElements {
+  return {
+    inputPizzas: document.getElementById("input-pizzas") as HTMLInputElement,
+    inputWeight: document.getElementById("input-weight") as HTMLInputElement,
+    inputHydration: document.getElementById("input-hydration") as HTMLInputElement,
+    inputSalt: document.getElementById("input-salt") as HTMLInputElement,
+    displayPizzas: document.getElementById("display-pizzas"),
+    displayWeight: document.getElementById("display-weight"),
+    displayHydration: document.getElementById("display-hydration"),
+    displaySalt: document.getElementById("display-salt"),
+    resultFlour: document.getElementById("result-flour"),
+    resultWater: document.getElementById("result-water"),
+    resultSalt: document.getElementById("result-salt"),
+    resultYeast: document.getElementById("result-yeast"),
+    resultTotal: document.getElementById("result-total"),
+    barWater: document.getElementById("bar-water"),
+    doughVisual: document.getElementById("dough-visual") as HTMLElement,
+    visualDiameter: document.getElementById("visual-diameter"),
+    btnYeastFresh: document.getElementById("btn-yeast-fresh"),
+    btnYeastDry: document.getElementById("btn-yeast-dry"),
+  };
+}
+
+export function initPizzaCalculator() {
+  const state: CalculatorState = {
+    useFreshYeast: true,
+    dom: getDOMElements(),
+  };
+
+  setupInputListeners(state);
+  setupYeastListeners(state);
+  updateDisplay(state);
+}