@jjlmoya/utils-cooking 1.9.0 → 1.11.0

package/src/tool/roux-guide/init.ts

@@ -26,47 +26,6 @@ const VISCOSITY_RATIOS: Record<TextureLevel, number> = {
 	4: 185,
 };
 
-const LIQUID_CONFIG: Record<LiquidType, LiquidConfig> = {
-	milk: {
-		name: 'Béchamel',
-		rouxType: 'white',
-		tip: 'Usa leche fría. Añádela gradualmente al principio o de golpe si bates fuerte.',
-	},
-	lightStock: {
-		name: 'Velouté',
-		rouxType: 'blond',
-		tip: 'Usa fondo de ave o pescado. Deja que el roux huela a galleta antes de ligar.',
-	},
-	darkStock: {
-		name: 'Espagnole',
-		rouxType: 'brown',
-		tip: 'Para salsas oscuras potentes. El roux debe estar color chocolate, pero sin quemarse.',
-	},
-	tomato: {
-		name: 'Salsa de Tomate',
-		rouxType: 'blond',
-		tip: 'El roux ayudará a dar cuerpo y suavidad a la textura final del tomate.',
-	},
-};
-
-const ROUX_INFO: Record<'white' | 'blond' | 'brown', RouxInfo> = {
-	white: {
-		label: 'Blanco',
-		time: '2-3 min',
-		description: 'Cocina solo hasta perder el olor a harina cruda. Sin color.',
-	},
-	blond: {
-		label: 'Rubio',
-		time: '5-8 min',
-		description: 'Busca un color de mantequilla tostada y un aroma a nueces.',
-	},
-	brown: {
-		label: 'Oscuro',
-		time: '15-20 min',
-		description: 'Fuego muy suave. Color chocolate. Nota: requiere un 10% más de peso.',
-	},
-};
-
 interface RouxElements {
 	volumeInput: HTMLInputElement;
 	liquidBtns: NodeListOf<Element>;
@@ -124,9 +83,9 @@ function setupLiquidButtons(els: RouxElements, state: State, updateCalculations:
 	els.liquidBtns.forEach((btn) => {
 		btn.addEventListener('click', () => {
 			els.liquidBtns.forEach((b) => {
-				b.classList.remove('active', 'bg-white', 'dark:bg-slate-700', 'shadow-md', 'ring-2', 'ring-indigo-500/20');
+				b.classList.remove('active');
 			});
-			btn.classList.add('active', 'bg-white', 'dark:bg-slate-700', 'shadow-md', 'ring-2', 'ring-indigo-500/20');
+			btn.classList.add('active');
 			state.liquid = (btn as HTMLElement).dataset.type as LiquidType || 'milk';
 			updateCalculations();
 		});
@@ -137,19 +96,16 @@ function setupTextureButtons(els: RouxElements, state: State, updateCalculations
 	els.textureBtns.forEach((btn) => {
 		btn.addEventListener('click', () => {
 			els.textureBtns.forEach((b) => {
-				b.classList.remove('active', 'border-amber-500/50', 'bg-amber-50', 'dark:bg-amber-900/10');
-				b.classList.add('border-slate-100', 'dark:border-slate-800', 'bg-white', 'dark:bg-slate-900');
+				b.classList.remove('active');
 			});
-
-			btn.classList.remove('border-slate-100', 'dark:border-slate-800', 'bg-white', 'dark:bg-slate-900');
-			btn.classList.add('active', 'border-amber-500/50', 'bg-amber-50', 'dark:bg-amber-900/10');
+			btn.classList.add('active');
 			state.level = parseInt((btn as HTMLElement).dataset.level || '2') as TextureLevel;
 			updateCalculations();
 		});
 	});
 }
 
-function updateDisplay(els: RouxElements, state: State): void {
+function updateDisplay(els: RouxElements, state: State, LIQUID_CONFIG: Record<LiquidType, LiquidConfig>, ROUX_INFO: Record<'white' | 'blond' | 'brown', RouxInfo>): void {
 	const config = LIQUID_CONFIG[state.liquid];
 	const baseRatio = VISCOSITY_RATIOS[state.level];
 	const liters = state.volume / 1000;
@@ -169,14 +125,61 @@ function updateDisplay(els: RouxElements, state: State): void {
 	els.progressBar.style.width = `${(state.level / 4) * 100}%`;
 }
 
-export function initRouxGuide(): void {
+function getLiquidConfig(ui: Record<string, string>): Record<LiquidType, LiquidConfig> {
+	return {
+		milk: {
+			name: ui.recipeBechamel as string,
+			rouxType: 'white',
+			tip: ui.tipBechamel as string,
+		},
+		lightStock: {
+			name: ui.recipeVeloute as string,
+			rouxType: 'blond',
+			tip: ui.tipVeloute as string,
+		},
+		darkStock: {
+			name: ui.recipeEspagnole as string,
+			rouxType: 'brown',
+			tip: ui.tipEspagnole as string,
+		},
+		tomato: {
+			name: ui.recipeTomato as string,
+			rouxType: 'blond',
+			tip: ui.tipTomato as string,
+		},
+	};
+}
+
+function getRouxInfo(ui: Record<string, string>): Record<'white' | 'blond' | 'brown', RouxInfo> {
+	return {
+		white: {
+			label: ui.rouxWhiteLabel as string,
+			time: ui.timeWhite as string,
+			description: ui.descWhite as string,
+		},
+		blond: {
+			label: ui.rouxBlondLabel as string,
+			time: ui.timeBlond as string,
+			description: ui.descBlond as string,
+		},
+		brown: {
+			label: ui.rouxBrownLabel as string,
+			time: ui.timeBrown as string,
+			description: ui.descBrown as string,
+		},
+	};
+}
+
+export function initRouxGuide(ui: Record<string, string>): void {
 	const els = setupElements();
 	if (!els) return;
 
+	const LIQUID_CONFIG = getLiquidConfig(ui);
+	const ROUX_INFO = getRouxInfo(ui);
 	const state: State = { volume: 1000, liquid: 'milk', level: 2 };
-	const updateCalculations = () => updateDisplay(els, state);
+	const updateCalculations = () => updateDisplay(els, state, LIQUID_CONFIG, ROUX_INFO);
 
-	els.volumeInput.addEventListener('input', (e) => {
+	els.volumeInput.addEventListener('input', (e: Event) => {
 		state.volume = parseInt((e.target as HTMLInputElement).value) || 0;
 		updateCalculations();
 	});

package/src/tool/banana-ripeness/BananaCare.css

@@ -1,587 +0,0 @@
-.banana-care-container {
-    --bc-yellow: #fbbf24;
-    --bc-yellow-dark: #eab308;
-    --bc-orange: #b45309;
-    --bc-text-dark: #18181b;
-    --bc-text-light: #fff;
-    --bc-text-muted: #a1a1aa;
-    --bc-text-gray: #71717a;
-    --bc-text-gray-dark: #52525b;
-    --bc-blue-light: #4f8cee;
-    --bc-blue: #3b82f6;
-    --bc-blue-dark: #2563eb;
-    --bc-blue-lighter: #60a5fa;
-    --bc-green: #10b981;
-    --bc-gray-light: #d4d4d8;
-    --bc-slate-dark: #1e293b;
-
-    max-width: 100%;
-    margin: 2rem auto;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.banana-card {
-    background: #fafafa;
-    backdrop-filter: blur(24px);
-    border: 1px solid #e4e4e7;
-    border-radius: 2.5rem;
-    padding: 2.5rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    overflow: hidden;
-    position: relative;
-}
-
-.theme-dark .banana-card {
-    background: rgba(24, 24, 27, 0.4);
-    border-color: rgba(113, 113, 122, 0.5);
-    box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.3);
-}
-
-.glow-bg {
-    position: absolute;
-    top: -96px;
-    right: -96px;
-    width: 256px;
-    height: 256px;
-    background: rgba(250, 204, 21, 0.2);
-    border-radius: 9999px;
-    filter: blur(96px);
-    pointer-events: none;
-    transition: all 700ms;
-}
-
-.glow-bg-2 {
-    position: absolute;
-    bottom: -96px;
-    left: -96px;
-    width: 256px;
-    height: 256px;
-    background: rgba(52, 211, 153, 0.1);
-    border-radius: 9999px;
-    filter: blur(96px);
-    pointer-events: none;
-    transition: all 700ms;
-}
-
-.banana-grid {
-    position: relative;
-    z-index: 10;
-    max-width: 80rem;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    align-items: center;
-}
-
-@media (max-width: 1024px) {
-    .banana-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.banana-visual-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-}
-
-.status-card {
-    position: relative;
-    width: 100%;
-    max-width: 340px;
-    aspect-ratio: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.glow-indicator {
-    position: absolute;
-    inset: -100px;
-    border-radius: 9999px;
-    filter: blur(80px);
-    opacity: 0.3;
-    transition: all 1000ms;
-}
-
-.status-visual {
-    position: relative;
-    z-index: 10;
-    transition: all 700ms ease-out;
-}
-
-.banana-svg {
-    width: 100%;
-    height: 100%;
-    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.3));
-}
-
-.banana-group {
-    transition: all 700ms;
-    transform-origin: center;
-}
-
-.banana-body {
-    transition: color 500ms;
-    color: var(--bc-yellow);
-}
-
-.banana-dot {
-    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    opacity: 0;
-}
-
-.status-info {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-}
-
-.status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 1rem;
-    border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(12px);
-}
-
-.theme-dark .status-badge {
-    background: rgba(0, 0, 0, 0.2);
-    border-color: rgba(255, 255, 255, 0.05);
-}
-
-.status-dot {
-    width: 0.625rem;
-    height: 0.625rem;
-    border-radius: 50%;
-    box-shadow: 0 0 15px currentcolor;
-}
-
-.status-name {
-    font-size: 0.875rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--bc-text-dark);
-}
-
-.theme-dark .status-name {
-    color: var(--bc-text-light);
-}
-
-.status-description {
-    font-size: 0.75rem;
-    color: var(--bc-text-gray);
-    font-weight: 700;
-    max-width: 280px;
-    text-align: center;
-    min-height: 3em;
-}
-
-.theme-dark .status-description {
-    color: var(--bc-text-muted);
-}
-
-.banana-controls {
-    display: flex;
-    flex-direction: column;
-}
-
-.controls-panel {
-    padding: 2rem;
-    border-radius: 2rem;
-    background: #fff;
-    border: 1px solid #e4e4e7;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(12px);
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.theme-dark .controls-panel {
-    background: rgba(0, 0, 0, 0.2);
-    border-color: rgba(255, 255, 255, 0.05);
-}
-
-.control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.ripeness-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-}
-
-.ripeness-label {
-    font-size: 0.625rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: 0.075em;
-    color: var(--bc-text-muted);
-}
-
-.level-value {
-    font-size: 1.875rem;
-    font-weight: 900;
-    color: var(--bc-yellow-dark);
-    font-variant-numeric: tabular-nums;
-}
-
-.ripeness-slider {
-    width: 100%;
-    height: 0.75rem;
-    border-radius: 9999px;
-    background: #e4e4e7;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    accent-color: var(--bc-yellow-dark);
-    appearance: none;
-}
-
-.theme-dark .ripeness-slider {
-    background: #27272a;
-}
-
-.ripeness-slider::-webkit-slider-thumb {
-    appearance: none;
-    width: 36px;
-    height: 36px;
-    background: var(--bc-yellow);
-    cursor: pointer;
-    border-radius: 50%;
-    border: 4px solid white;
-    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.4);
-    transition: all 0.2s;
-}
-
-.theme-dark .ripeness-slider::-webkit-slider-thumb {
-    border-color: var(--bc-text-dark);
-}
-
-.ripeness-slider:active::-webkit-slider-thumb {
-    transform: scale(0.9);
-}
-
-.grid-2-cols {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-}
-
-@media (max-width: 768px) {
-    .grid-2-cols {
-        grid-template-columns: 1fr;
-    }
-}
-
-.prediction-box {
-    padding: 1.5rem;
-    border-radius: 1.875rem;
-    background: #fafafa;
-    border: 1px solid #e4e4e7;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.prediction-label {
-    font-size: 0.625rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--bc-orange);
-    margin-bottom: 0.5rem;
-}
-
-:root[class~="dark"] .prediction-label {
-    color: var(--bc-yellow);
-}
-
-.prediction-value {
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
-    gap: 0.25rem;
-}
-
-.days-number {
-    font-size: 3.75rem;
-    font-weight: 900;
-    color: var(--bc-text-dark);
-    font-variant-numeric: tabular-nums;
-}
-
-:root[class~="dark"] .days-number {
-    color: var(--bc-text-light);
-}
-
-.days-unit {
-    font-size: 0.75rem;
-    font-weight: 900;
-    color: var(--bc-text-muted);
-    text-transform: uppercase;
-}
-
-.settings-column {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.setting-item {
-    padding: 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid transparent;
-    transition: all 0.2s;
-}
-
-.setting-item.temp {
-    background: rgba(79, 172, 254, 0.05);
-    border-color: rgba(79, 172, 254, 0.1);
-}
-
-.setting-item.humidity {
-    background: rgba(59, 130, 246, 0.05);
-    border-color: rgba(59, 130, 246, 0.1);
-}
-
-.setting-item:hover {
-    background-color: rgba(79, 172, 254, 0.1);
-}
-
-.setting-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.setting-label {
-    font-size: 0.5625rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    color: var(--bc-blue-light);
-}
-
-.setting-item.humidity .setting-label {
-    color: var(--bc-blue);
-}
-
-.setting-value {
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: var(--bc-blue-dark);
-}
-
-.theme-dark .setting-value {
-    color: var(--bc-blue-lighter);
-}
-
-.setting-slider {
-    width: 100%;
-    height: 0.25rem;
-    border-radius: 9999px;
-    background: #dbeafe;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    accent-color: var(--bc-blue-light);
-    appearance: none;
-}
-
-.theme-dark .setting-slider {
-    background: rgba(59, 130, 246, 0.5);
-}
-
-.partner-btn {
-    width: 100%;
-    padding: 1.25rem;
-    border-radius: 0.5rem;
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    background: rgba(16, 185, 129, 0.05);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.partner-btn:hover {
-    background: rgba(16, 185, 129, 0.1);
-}
-
-.partner-btn.active {
-    background: var(--bc-green);
-}
-
-.theme-dark .partner-btn.active {
-    background: var(--bc-green);
-}
-
-.partner-content {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    text-align: left;
-}
-
-.partner-icon {
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    background: rgba(16, 185, 129, 0.2);
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--bc-green);
-    transition: transform 0.2s;
-}
-
-.partner-btn.active .partner-icon {
-    transform: scale(1.1);
-}
-
-.partner-title {
-    font-size: 0.75rem;
-    font-weight: 900;
-    color: var(--bc-text-dark);
-    text-transform: uppercase;
-}
-
-.theme-dark .partner-title {
-    color: var(--bc-text-light);
-}
-
-.partner-btn.active .partner-title {
-    color: var(--bc-text-light);
-}
-
-.partner-subtitle {
-    font-size: 0.625rem;
-    color: var(--bc-text-muted);
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.partner-btn.active .partner-subtitle {
-    color: rgba(255, 255, 255, 0.8);
-}
-
-.toggle-switch {
-    width: 3rem;
-    height: 1.5rem;
-    border-radius: 9999px;
-    background: #e4e4e7;
-    position: relative;
-    border: 1px solid var(--bc-gray-light);
-}
-
-.theme-dark .toggle-switch {
-    background: #27272a;
-    border-color: #3f3f46;
-}
-
-.toggle-circle {
-    position: absolute;
-    left: 0.25rem;
-    top: 0.25rem;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    background: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    transition: transform 300ms;
-}
-
-.toggle-circle.active {
-    transform: translateX(1.5rem);
-}
-
-.info-grid {
-    gap: 1rem;
-}
-
-.info-box {
-    padding: 1.5rem;
-    border-radius: 1.875rem;
-    border: 1px solid #e4e4e7;
-}
-
-.theme-dark .info-box {
-    background: rgba(113, 113, 122, 0.4);
-    border-color: rgba(113, 113, 122, 0.5);
-}
-
-.info-box.conservation {
-    background: #fafafa;
-}
-
-.info-box.conservation .info-title {
-    color: var(--bc-text-dark);
-}
-
-.info-box.conservation .info-text {
-    color: var(--bc-slate-dark);
-}
-
-.info-box.acceleration {
-    background: rgba(250, 204, 21, 0.05);
-    border-color: rgba(250, 204, 21, 0.2);
-}
-
-.info-title {
-    font-size: 0.5625rem;
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--bc-text-gray-dark);
-    margin-bottom: 0.5rem;
-}
-
-.info-text {
-    font-size: 0.75rem;
-    color: var(--bc-text-dark);
-    line-height: 1.5;
-    font-weight: 700;
-    margin: 0;
-}
-
-.theme-dark .info-text {
-    color: var(--bc-gray-light);
-}
-
-.info-box.acceleration .info-title {
-    color: var(--bc-orange);
-}
-
-.theme-dark .info-box.acceleration .info-title {
-    color: var(--bc-yellow);
-}
-
-.info-box.acceleration .info-text {
-    font-style: italic;
-    color: var(--bc-text-dark);
-    font-weight: 900;
-}
-
-.theme-dark .info-box.acceleration .info-text {
-    color: var(--bc-text-light);
-}