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:
+48
-1
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user