From 869b1e36a949d31686175d0b748a1b8b64726529 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 21:13:54 +0200
Subject: [PATCH] feat(quick-260329-ten): add space bar discover step in
 runDiscoverPhase
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace 'if (key === " ") continue' with a dedicated space bar step
- Shows ␣ symbol large with 'Leertaste' label underneath
- Companion text explains the symbol in child-friendly German
- Highlights and pulses the space key on the keyboard
- Child must press space bar once to confirm understanding and continue
---
 src/ui/screens.ts | 49 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/ui/screens.ts b/src/ui/screens.ts
index 05396e3..041d22c 100644
--- a/src/ui/screens.ts
+++ b/src/ui/screens.ts
@@ -360,7 +360,54 @@ export function initLessonScreen(
 
 		for (const key of levelDef.newKeys) {
 			if (cancelled) return;
-			if (key === " ") continue; // Skip space in discover
+
+			if (key === " ") {
+				// Special space bar discover step
+				companionText.textContent =
+					"Siehst du die grosse Taste ganz unten? Das ist die Leertaste! Wenn du dieses Zeichen siehst: \u2423 \u2014 dann drueckst du mit dem Daumen die Leertaste. Probier es aus!";
+				companionArea.style.display = "flex";
+
+				letterArea.innerHTML = "";
+				const spaceLetterEl = document.createElement("div");
+				spaceLetterEl.className = "falling-letter";
+				spaceLetterEl.textContent = "\u2423";
+				letterArea.appendChild(spaceLetterEl);
+				const spaceLabelEl = document.createElement("div");
+				spaceLabelEl.style.cssText =
+					"text-align: center; font-size: 1.2rem; color: var(--text-secondary, #666); margin-top: 0.5rem; font-family: 'Quicksand', sans-serif;";
+				spaceLabelEl.textContent = "Leertaste";
+				letterArea.appendChild(spaceLabelEl);
+
+				highlightKey(" ");
+				const spaceKeyEl = document.querySelector(
+					'[data-key=" "]',
+				) as HTMLElement | null;
+				if (spaceKeyEl) {
+					spaceKeyEl.classList.add("keyboard__key--discover-pulse");
+				}
+
+				await new Promise<void>((resolve) => {
+					function onSpaceDown(e: KeyboardEvent): void {
+						if (e.key !== " ") return;
+						e.preventDefault();
+						pressKey(e.key);
+						document.removeEventListener("keydown", onSpaceDown);
+						activeKeyDown = null;
+						if (spaceKeyEl) {
+							spaceKeyEl.classList.remove(
+								"keyboard__key--discover-pulse",
+							);
+						}
+						resolve();
+					}
+					if (activeKeyDown) {
+						document.removeEventListener("keydown", activeKeyDown);
+					}
+					activeKeyDown = onSpaceDown;
+					document.addEventListener("keydown", onSpaceDown);
+				});
+				continue;
+			}
 
 			const fingerDesc = fingerDescriptions[key] || "ein Finger";
 			const introText = await getLetterIntro(