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((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(