feat(quick-260329-ten): add space bar discover step in runDiscoverPhase

- 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
This commit is contained in:
2026-03-29 21:13:54 +02:00
parent 5f9c35db1e
commit 869b1e36a9
+48 -1
View File
@@ -360,7 +360,54 @@ export function initLessonScreen(
for (const key of levelDef.newKeys) { for (const key of levelDef.newKeys) {
if (cancelled) return; 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 fingerDesc = fingerDescriptions[key] || "ein Finger";
const introText = await getLetterIntro( const introText = await getLetterIntro(