diff --git a/src/lib/components/IngredientsPage.svelte b/src/lib/components/IngredientsPage.svelte index 4de5a28..e8c1050 100644 --- a/src/lib/components/IngredientsPage.svelte +++ b/src/lib/components/IngredientsPage.svelte @@ -4,13 +4,20 @@ import { onNavigate } from "$app/navigation"; import { browser } from '$app/environment'; import { page } from '$app/stores'; import HefeSwapper from './HefeSwapper.svelte'; -export let data -let multiplier = data.multiplier || 1; + +let { data } = $props(); +let multiplier = $state(data.multiplier || 1); + +const isEnglish = $derived(data.lang === 'en'); +const labels = $derived({ + portions: isEnglish ? 'Portions:' : 'Portionen:', + adjustAmount: isEnglish ? 'Adjust Amount:' : 'Menge anpassen:', + ingredients: isEnglish ? 'Ingredients' : 'Zutaten' +}); // Calculate yeast IDs for each yeast ingredient -let yeastIds = {}; -$: { - yeastIds = {}; +const yeastIds = $derived.by(() => { + const ids = {}; let yeastCounter = 0; if (data.ingredients) { for (let listIndex = 0; listIndex < data.ingredients.length; listIndex++) { @@ -18,17 +25,19 @@ $: { if (list.list) { for (let ingredientIndex = 0; ingredientIndex < list.list.length; ingredientIndex++) { const ingredient = list.list[ingredientIndex]; - if (ingredient.name === "Frischhefe" || ingredient.name === "Trockenhefe") { - yeastIds[`${listIndex}-${ingredientIndex}`] = yeastCounter++; + if (ingredient.name === "Frischhefe" || ingredient.name === "Trockenhefe" || + ingredient.name === "Fresh Yeast" || ingredient.name === "Dry Yeast") { + ids[`${listIndex}-${ingredientIndex}`] = yeastCounter++; } } } } } -} + return ids; +}); // Get all current URL parameters to preserve state in multiplier forms -$: currentParams = browser ? new URLSearchParams(window.location.search) : $page.url.searchParams; +const currentParams = $derived(browser ? new URLSearchParams(window.location.search) : $page.url.searchParams); // Progressive enhancement - use JS if available onMount(() => { @@ -318,11 +327,11 @@ span {#if data.ingredients}