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>
This commit is contained in:
Claude Opus 4.6
@@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
+10
-10
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user