diff --git a/src/game/keyboard.ts b/src/game/keyboard.ts new file mode 100644 index 0000000..11f5714 --- /dev/null +++ b/src/game/keyboard.ts @@ -0,0 +1,143 @@ +import type { KeyboardLayout } from "../types"; +import { getLevelByNumber } from "./levels"; + +// QWERTZ rows -- each row is an array of key labels +// For DE and CH layouts (identical for letters, differ on special chars above level 14) +const KEYBOARD_ROWS_DE = [ + ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "ß"], + ["q", "w", "e", "r", "t", "z", "u", "i", "o", "p", "ü"], + ["a", "s", "d", "f", "g", "h", "j", "k", "l", "ö", "ä"], + ["y", "x", "c", "v", "b", "n", "m"], + [" "], // Spacebar +]; + +const KEYBOARD_ROWS_CH = [ + ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], + ["q", "w", "e", "r", "t", "z", "u", "i", "o", "p", "ü"], + ["a", "s", "d", "f", "g", "h", "j", "k", "l", "ö", "ä"], + ["y", "x", "c", "v", "b", "n", "m"], + [" "], +]; + +// Finger color mapping (shared with levels.ts fingerMap) +const fingerColorMap: Record = { + q: "--finger-l-pinky", + a: "--finger-l-pinky", + y: "--finger-l-pinky", + "1": "--finger-l-pinky", + w: "--finger-l-ring", + s: "--finger-l-ring", + x: "--finger-l-ring", + "2": "--finger-l-ring", + e: "--finger-l-mid", + d: "--finger-l-mid", + c: "--finger-l-mid", + "3": "--finger-l-mid", + r: "--finger-l-index", + f: "--finger-l-index", + v: "--finger-l-index", + "4": "--finger-l-index", + t: "--finger-l-index", + g: "--finger-l-index", + b: "--finger-l-index", + "5": "--finger-l-index", + z: "--finger-r-index", + h: "--finger-r-index", + n: "--finger-r-index", + "6": "--finger-r-index", + u: "--finger-r-index", + j: "--finger-r-index", + m: "--finger-r-index", + "7": "--finger-r-index", + i: "--finger-r-mid", + k: "--finger-r-mid", + "8": "--finger-r-mid", + o: "--finger-r-ring", + l: "--finger-r-ring", + "9": "--finger-r-ring", + p: "--finger-r-pinky", + ö: "--finger-r-pinky", + ä: "--finger-r-pinky", + ü: "--finger-r-pinky", + "0": "--finger-r-pinky", + ß: "--finger-r-pinky", + " ": "--finger-thumb", +}; + +const keyElements: Map = new Map(); + +export function renderKeyboard( + container: HTMLElement, + layout: KeyboardLayout, + currentLevel: number, +): void { + keyElements.clear(); + container.innerHTML = ""; + container.className = "keyboard"; + + const rows = layout === "ch" ? KEYBOARD_ROWS_CH : KEYBOARD_ROWS_DE; + const level = getLevelByNumber(currentLevel); + const activeKeys = level ? level.allKeys : []; + + for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) { + const row = rows[rowIndex]!; + const rowEl = document.createElement("div"); + rowEl.className = `keyboard__row keyboard__row--${rowIndex}`; + + for (const key of row) { + const keyEl = document.createElement("div"); + const isActive = activeKeys.includes(key); + const colorVar = fingerColorMap[key]; + + keyEl.className = "keyboard__key"; + if (key === " ") keyEl.classList.add("keyboard__key--space"); + if (isActive && colorVar) { + keyEl.style.backgroundColor = `var(${colorVar})`; + keyEl.classList.add("keyboard__key--active"); + } else { + keyEl.classList.add("keyboard__key--inactive"); + } + + keyEl.textContent = key === " " ? "" : key.toUpperCase(); + keyEl.dataset.key = key; + keyElements.set(key, keyEl); + rowEl.appendChild(keyEl); + } + + container.appendChild(rowEl); + } +} + +export function highlightKey(key: string): void { + // Remove previous highlights + for (const el of keyElements.values()) { + el.classList.remove("keyboard__key--highlight"); + } + const el = keyElements.get(key.toLowerCase()); + if (el) el.classList.add("keyboard__key--highlight"); +} + +export function pressKey(key: string): void { + const el = keyElements.get(key.toLowerCase()); + if (el) { + el.classList.add("keyboard__key--pressed"); + setTimeout(() => el.classList.remove("keyboard__key--pressed"), 150); + } +} + +export function updateKeyboardForLevel(currentLevel: number): void { + const level = getLevelByNumber(currentLevel); + const activeKeys = level ? level.allKeys : []; + for (const [key, el] of keyElements) { + const colorVar = fingerColorMap[key]; + if (activeKeys.includes(key) && colorVar) { + el.style.backgroundColor = `var(${colorVar})`; + el.classList.remove("keyboard__key--inactive"); + el.classList.add("keyboard__key--active"); + } else { + el.style.backgroundColor = ""; + el.classList.remove("keyboard__key--active"); + el.classList.add("keyboard__key--inactive"); + } + } +} diff --git a/src/game/levels.test.ts b/src/game/levels.test.ts index 2fb3a1c..4df1873 100644 --- a/src/game/levels.test.ts +++ b/src/game/levels.test.ts @@ -7,39 +7,39 @@ describe("levels", () => { }); it("Level 1 newKeys = ['f', 'j', ' ']", () => { - expect(levels[0].newKeys).toEqual(["f", "j", " "]); + expect(levels[0]!.newKeys).toEqual(["f", "j", " "]); }); it("Level 2 newKeys = ['d', 'k']", () => { - expect(levels[1].newKeys).toEqual(["d", "k"]); + expect(levels[1]!.newKeys).toEqual(["d", "k"]); }); it("Level 3 newKeys = ['s', 'l']", () => { - expect(levels[2].newKeys).toEqual(["s", "l"]); + expect(levels[2]!.newKeys).toEqual(["s", "l"]); }); it("Level 4 newKeys = ['a', 'ö']", () => { - expect(levels[3].newKeys).toEqual(["a", "ö"]); + expect(levels[3]!.newKeys).toEqual(["a", "ö"]); }); it("Level 5 newKeys = ['g', 'h']", () => { - expect(levels[4].newKeys).toEqual(["g", "h"]); + expect(levels[4]!.newKeys).toEqual(["g", "h"]); }); it("Level 6 newKeys = ['e', 'i']", () => { - expect(levels[5].newKeys).toEqual(["e", "i"]); + expect(levels[5]!.newKeys).toEqual(["e", "i"]); }); it("Level 3 allKeys includes all keys from levels 1-3", () => { const expected = ["f", "j", " ", "d", "k", "s", "l"]; for (const key of expected) { - expect(levels[2].allKeys).toContain(key); + expect(levels[2]!.allKeys).toContain(key); } - expect(levels[2].allKeys).toHaveLength(expected.length); + expect(levels[2]!.allKeys).toHaveLength(expected.length); }); it("Level 6 allKeys contains 13 keys", () => { - expect(levels[5].allKeys).toHaveLength(13); + expect(levels[5]!.allKeys).toHaveLength(13); const expected = [ "f", "j", @@ -56,7 +56,7 @@ describe("levels", () => { "i", ]; for (const key of expected) { - expect(levels[5].allKeys).toContain(key); + expect(levels[5]!.allKeys).toContain(key); } }); diff --git a/src/styles/main.css b/src/styles/main.css index 4e9fee9..96106be 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -161,3 +161,75 @@ h3 { opacity: 0.4; cursor: not-allowed; } + +/* Keyboard */ +.keyboard { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + padding: 1rem; + background: rgba(255, 255, 255, 0.6); + border-radius: 12px; + user-select: none; +} + +.keyboard__row { + display: flex; + gap: 4px; +} + +.keyboard__key { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: 8px; + font-family: "Quicksand", sans-serif; + font-weight: 700; + font-size: 1rem; + color: var(--text-dark); + background: #e0e0e0; + transition: + transform 0.1s ease, + background-color 0.2s ease, + box-shadow 0.2s ease; + cursor: default; +} + +.keyboard__key--space { + width: 280px; +} + +.keyboard__key--inactive { + background: #e0e0e0; + color: var(--text-light); + opacity: 0.5; +} + +.keyboard__key--active { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +/* Pulse animation for the target key (KYBD-03) */ +.keyboard__key--highlight { + animation: key-pulse 1.2s ease-in-out infinite; + box-shadow: 0 0 12px rgba(232, 184, 75, 0.6); +} + +@keyframes key-pulse { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.08); + } +} + +/* Press animation (KYBD-03) */ +.keyboard__key--pressed { + transform: scale(0.9) !important; + animation: none; +}