From aab1f7da9a7f3a3e582098a3cb3597ddb37bedd7 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 28 Oct 2024 17:00:43 +0100
Subject: [PATCH] added tips-and-tricks route

---
 src/routes/rezepte/+layout.svelte             |  1 +
 .../rezepte/tips-and-tricks/+page.svelte      | 62 +++++++++++++++++
 .../rezepte/tips-and-tricks/Converter.svelte  | 68 +++++++++++++++++++
 3 files changed, 131 insertions(+)
 create mode 100644 src/routes/rezepte/tips-and-tricks/+page.svelte
 create mode 100644 src/routes/rezepte/tips-and-tricks/Converter.svelte

diff --git a/src/routes/rezepte/+layout.svelte b/src/routes/rezepte/+layout.svelte
index 362156b..4c154bc 100644
--- a/src/routes/rezepte/+layout.svelte
+++ b/src/routes/rezepte/+layout.svelte
@@ -15,6 +15,7 @@ if(data.session){
 	<li><a href="/rezepte/category">Kategorie</a></li>
 	<li><a href="/rezepte/icon">Icon</a></li>
 	<li><a href="/rezepte/tag">Stichwörter</a></li>
+	<li><a href="/rezepte/tips-and-tricks">Tipps</a></li>
 	</ul>
 	<UserHeader slot=right_side {user}></UserHeader>
 	<slot></slot>
diff --git a/src/routes/rezepte/tips-and-tricks/+page.svelte b/src/routes/rezepte/tips-and-tricks/+page.svelte
new file mode 100644
index 0000000..a3c14a8
--- /dev/null
+++ b/src/routes/rezepte/tips-and-tricks/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+    	import AddButton from '$lib/components/AddButton.svelte';
+	import Converter from './Converter.svelte';
+</script>
+<style>
+h1{
+	text-align: center;
+	margin-bottom: 0;
+	font-size: 4rem;
+}
+.subheading{
+	text-align: center;
+	margin-top: 0;
+	font-size: 1.5rem;
+}
+.content{
+	max-width: 800px;
+	margin: 0 auto;
+	background-color: var(--nord0);
+	padding: 1rem;
+	margin-block: 1rem;
+}
+</style>
+<svelte:head>
+	<title>Bocken Rezepte</title>
+	<meta name="description" content="Eine stetig wachsende Ansammlung an Rezepten aus der Bockenschen Küche." />
+	<meta property="og:image" content="https://bocken.org/static/rezepte/thumb/ragu_aus_rindsrippen.webp" />
+	<meta property="og:image:secure_url" content="https://bocken.org/static/rezepte/thumb/ragu_aus_rindsrippen.webp" />
+	<meta property="og:image:type" content="image/webp" />
+	<meta property="og:image:alt" content="Pasta al Ragu mit Linguine" />
+</svelte:head>
+
+<h1>Tipps & Tricks</h1>
+
+<div class=content>
+<h2>Trockenhefe vs. Frischhefe</h2>
+<Converter></Converter>
+<p>
+	Frischhefe ist mit Trockenhefe ersetzbar, jedoch muss man ein paar Kleinigkeiten beachten:
+</p>
+
+<ol>
+	<li>Nur ein Drittel der Menge verwenden.</li>
+	<li>Falls ein kalter Teig zubereitet wird, die Trockenhefe umbedingt zuerst zur Gärprobe in warmer Flüssigkeit (je nach Rezept z.B. Milch oder Wasser) mit einem TL Zucker für ~10 Minuten <q>aufwachen</q> lassen.</li>
+	<li>Generell ist die Meinung das Trockenhefe etwas <q>energischer</q> ist am Anfang der Gärung und etwas langsamer am Ende der Gare. Dementsprechend eventuell die Stock- und Stückgare verkürzen bzw. verlängern.</li>
+</ol>
+</div>
+
+<div class=content>
+<h2>Fensterprobe</h2>
+
+<p>
+	Die Fensterprobe ist eine Methode um den optimalen Knetzustand eines Teiges zu bestimmen.
+	Dazu wird ein kleines, ca. Walnussgrosses Stück Teig zwischen den Fingern auseinandergezogen. Ist der Teig elastisch und reißt nicht bis der Teig so dünn ist, dass man leicht licht durchsehen kann, so ist der Teig optimal verknetet.
+</p>
+<p>
+	Teig lässt sich leichter verkneten wenn er noch trockener ist. Daher lohnt es sich zunächst etwa 10% der Flüssigkeit zurückzuhalten und erst nach und nach zuzugeben nachdem der Teig bereits für einige Minuten geknetet wurde.
+</p>
+</div>
+
+<AddButton></AddButton>
diff --git a/src/routes/rezepte/tips-and-tricks/Converter.svelte b/src/routes/rezepte/tips-and-tricks/Converter.svelte
new file mode 100644
index 0000000..3d02937
--- /dev/null
+++ b/src/routes/rezepte/tips-and-tricks/Converter.svelte
@@ -0,0 +1,68 @@
+<script>
+	class HefeConverter {
+		constructor(trockenhefe = 1) {
+			this._trockenhefe = trockenhefe;
+			this._frischhefe = this._trockenhefe * 3;
+		}
+
+		get trockenhefe() {
+			return Math.round(this._trockenhefe * 100) / 100 + "g";
+		}
+
+		set trockenhefe(value) {
+			this._trockenhefe = value.replace(/\D/g, '');
+			this._frischhefe = this._trockenhefe * 3;
+		}
+
+		get frischhefe() {
+			return this._frischhefe+"g";
+		}
+
+		set frischhefe(value) {
+			this._frischhefe = value.replace(/\D/g, '');
+			this._trockenhefe = this._frischhefe / 3;
+		}
+	}
+
+	const hefeConverter = new HefeConverter();
+
+</script>
+<style>
+	.converter_container {
+		width: fit-content;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		gap: 2rem;
+		background-color: var(--blue);
+		padding: 2rem;
+		margin-inline: auto;
+		align-items: center;
+	}
+	input {
+		width: 5rem;
+		height: 2rem;
+		font-size: 1rem;
+		text-align: center;
+	}
+	.flex_column {
+		display: flex;
+		flex-direction: column;
+	}
+	label {
+		margin-bottom: 0.25rem;
+	}
+</style>
+<div class=converter_container>
+	<div class="flex_column">
+		<label for="trockenhefe">Trockenhefe</label>
+		<input type="text" bind:value={hefeConverter.trockenhefe} min="0" />
+	</div>
+	<div>
+		=
+	</div>
+	<div class="flex_column">
+		<label for="frischhefe">Frischhefe</label>
+		<input type="text" bind:value={hefeConverter.frischhefe} min="0"/>
+	</div>
+</div>