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) {
|
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(
|
||||||
|
|||||||
Reference in New Issue
Block a user