feat(01-03): add QWERTZ keyboard renderer with finger colors and animations

- Full QWERTZ keyboard with DE and CH layout support
- Finger color mapping for all keys per spec section 8.3
- renderKeyboard, highlightKey, pressKey, updateKeyboardForLevel exports
- CSS: pulse animation for target key, press animation on keydown
- Inactive keys grayed at 0.5 opacity, active keys with finger colors

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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<string, string> = {
+	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<string, HTMLElement> = 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");
+		}
+	}
+}

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);
 		}
 	});
 

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;
+}