([]);
+
+ const incorrectLetters = guessedLetters.filter(
+ (letter) => !wordToGuess.includes(letter)
+ );
+
+ const isLoser = incorrectLetters.length >= 6;
+ const isWinner = wordToGuess
+ .split("")
+ .every((letter) => guessedLetters.includes(letter));
+
+ const addGuessedLetter = useCallback(
+ (letter: string) => {
+ if (guessedLetters.includes(letter) || isLoser || isWinner) return;
+
+ setGuessedLetters((currentLetters) => [...currentLetters, letter]);
+ },
+ [guessedLetters, isWinner, isLoser]
+ );
+
+ useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ const key = e.key;
+ if (!key.match(/^[a-zäöü]$/)) return;
+
+ e.preventDefault();
+ addGuessedLetter(key);
+ };
+
+ document.addEventListener("keypress", handler);
+
+ return () => {
+ document.removeEventListener("keypress", handler);
+ };
+ }, [guessedLetters]);
+
+ useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ const key = e.key;
+ if (key !== "Enter") return;
+
+ e.preventDefault();
+ setGuessedLetters([]);
+ setWordToGuess(getWord());
+ };
+
+ document.addEventListener("keypress", handler);
+
+ return () => {
+ document.removeEventListener("keypress", handler);
+ };
+ }, []);
+
+ return (
+
+
+ {isWinner && "Winner! - Refresh to try again"}
+ {isLoser && "Nice Try - Refresh to try again"}
+
+
+
+
+
+ wordToGuess.includes(letter)
+ )}
+ inactiveLetters={incorrectLetters}
+ addGuessedLetter={addGuessedLetter}
+ />
+
+
+ {BODY_PARTS.slice(0, numberOfGuesses)}
+
+
+
+
+
+ {wordToGuess.split("").map((letter, index) => (
+
+
+ {letter}
+
+
+ ))}
+
+ );
+}
diff --git a/src/Keyboard.module.css b/src/Keyboard.module.css
new file mode 100644
index 0000000..07cbdd0
--- /dev/null
+++ b/src/Keyboard.module.css
@@ -0,0 +1,26 @@
+.btn {
+ width: 100%;
+ border: 3px solid black;
+ background: none;
+ aspect-ratio: 1 / 1;
+ font-size: 2.5rem;
+ text-transform: uppercase;
+ padding: 0.5rem;
+ font-weight: bold;
+ cursor: pointer;
+ color: black;
+}
+
+.btn.active {
+ background-color: hsl(200, 100%, 50%);
+ color: white;
+}
+
+.btn.inactive {
+ opacity: 0.3;
+}
+
+.btn:hover:not(:disabled),
+.btn:focus:not(:disabled) {
+ background-color: hsl(200, 100%, 75%);
+}
diff --git a/src/Keyboard.tsx b/src/Keyboard.tsx
new file mode 100644
index 0000000..7def6a8
--- /dev/null
+++ b/src/Keyboard.tsx
@@ -0,0 +1,74 @@
+import styles from "./Keyboard.module.css";
+
+const KEYS = [
+ "A",
+ "B",
+ "C",
+ "D",
+ "E",
+ "F",
+ "G",
+ "H",
+ "I",
+ "J",
+ "K",
+ "L",
+ "M",
+ "N",
+ "O",
+ "P",
+ "Q",
+ "R",
+ "S",
+ "T",
+ "U",
+ "V",
+ "W",
+ "X",
+ "Y",
+ "Z",
+ "Ä",
+ "Ö",
+ "Ü",
+];
+
+type KeyboardProps = {
+ disabled?: boolean;
+ activeLetters: string[];
+ inactiveLetters: string[];
+ addGuessedLetter: (letter: string) => void;
+};
+
+export function Keyboard({
+ activeLetters,
+ inactiveLetters,
+ addGuessedLetter,
+ disabled = false,
+}: KeyboardProps) {
+ return (
+
+ {KEYS.map((key) => {
+ const isActive = activeLetters.includes(key);
+ const isInactive = inactiveLetters.includes(key);
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..98ccb21
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/wordList.json b/src/wordList.json
new file mode 100644
index 0000000..ffcb616
--- /dev/null
+++ b/src/wordList.json
@@ -0,0 +1,255 @@
+[
+ "APFEL",
+ "BANANE",
+ "BAUM",
+ "AUTO",
+ "HAUS",
+ "HUND",
+ "KATZE",
+ "SONNE",
+ "MOND",
+ "STERN",
+ "BLUME",
+ "VOGEL",
+ "WASSER",
+ "FEUER",
+ "ERDE",
+ "LUFT",
+ "HIMMEL",
+ "BROT",
+ "BUTTER",
+ "MILCH",
+ "KÄSE",
+ "EI",
+ "ZUCKER",
+ "SALZ",
+ "TISCH",
+ "STUHL",
+ "BETT",
+ "TÜR",
+ "FENSTER",
+ "WAND",
+ "HAND",
+ "FUSS",
+ "KOPF",
+ "AUGE",
+ "OHR",
+ "NASE",
+ "MUND",
+ "HERZ",
+ "BAUCH",
+ "RÜCKEN",
+ "PFERD",
+ "KUH",
+ "SCHAF",
+ "HUHN",
+ "ENTE",
+ "FISCH",
+ "BIENE",
+ "MAUS",
+ "ELEFANT",
+ "TIGER",
+ "ZEBRA",
+ "AFFE",
+ "BÄR",
+ "FROSCH",
+ "SCHULE",
+ "LEHRER",
+ "BUCH",
+ "HEFT",
+ "STIFT",
+ "LINEAL",
+ "RADIERGUMMI",
+ "TAFEL",
+ "KREIDE",
+ "KLASSENZIMMER",
+ "SCHÜLER",
+ "TASCHE",
+ "RUCKSACK",
+ "SPORT",
+ "BALL",
+ "SPRINGSEIL",
+ "RAD",
+ "ROLLER",
+ "SCHWIMMEN",
+ "LAUFEN",
+ "HÜPFEN",
+ "SPRINGEN",
+ "KLETTERN",
+ "RENNEN",
+ "SCHLITTEN",
+ "SKI",
+ "SCHNEE",
+ "REGEN",
+ "WOLKE",
+ "STURM",
+ "DONNER",
+ "BLITZ",
+ "WIESE",
+ "WALD",
+ "FLUSS",
+ "BERG",
+ "STRAND",
+ "MEER",
+ "SEE",
+ "SAND",
+ "MUSCHEL",
+ "FELSEN",
+ "STEIN",
+ "HOLZ",
+ "BLATT",
+ "AST",
+ "FRÜHLING",
+ "SOMMER",
+ "HERBST",
+ "WINTER",
+ "TAG",
+ "NACHT",
+ "UHR",
+ "ZEIT",
+ "WOCHE",
+ "MONAT",
+ "JAHR",
+ "GEBURTSTAG",
+ "FEIER",
+ "FREUND",
+ "FAMILIE",
+ "MUTTER",
+ "VATER",
+ "OMA",
+ "OPA",
+ "BRUDER",
+ "SCHWESTER",
+ "TANTE",
+ "ONKEL",
+ "COUSIN",
+ "COUSINE",
+ "BABY",
+ "KIND",
+ "ERWACHSENER",
+ "ARZT",
+ "POLIZEI",
+ "FEUERWEHR",
+ "BUS",
+ "ZUG",
+ "FLUGZEUG",
+ "SCHIFF",
+ "FAHRRAD",
+ "MOTORRAD",
+ "AMPEL",
+ "STRASSE",
+ "BRÜCKE",
+ "TUNNEL",
+ "KINO",
+ "SPIELPLATZ",
+ "PARK",
+ "ZOO",
+ "MUSEUM",
+ "BIBLIOTHEK",
+ "SUPERMARKT",
+ "LADEN",
+ "MARKT",
+ "GARTEN",
+ "SCHLOSS",
+ "BURG",
+ "KIRCHE",
+ "TURM",
+ "DORF",
+ "STADT",
+ "LAND",
+ "INSEL",
+ "PLANET",
+ "WELT",
+ "UNIVERSUM",
+ "ROBOTER",
+ "COMPUTER",
+ "FERNSEHER",
+ "RADIO",
+ "HANDY",
+ "TABLET",
+ "INTERNET",
+ "E-MAIL",
+ "POST",
+ "BRIEF",
+ "KARTE",
+ "PAKET",
+ "BASTELN",
+ "MALEN",
+ "ZEICHNEN",
+ "SCHNEIDEN",
+ "KLEBEN",
+ "FALTEN",
+ "KOCHEN",
+ "BACKEN",
+ "GRILLEN",
+ "ESSEN",
+ "TRINKEN",
+ "SCHLAFEN",
+ "TRÄUMEN",
+ "LÄCHELN",
+ "WEINEN",
+ "LACHEN",
+ "FREUDE",
+ "TRAURIGKEIT",
+ "ANGST",
+ "MUT",
+ "LIEBE",
+ "HASS",
+ "FREUNDSCHAFT",
+ "STREIT",
+ "VERSÖHNUNG",
+ "DANKE",
+ "BITTE",
+ "ENTSCHULDIGUNG",
+ "HALLO",
+ "TSCHÜSS",
+ "JA",
+ "NEIN",
+ "VIELLEICHT",
+ "WARUM",
+ "WEIL",
+ "WIESO",
+ "LESEN",
+ "SCHREIBEN",
+ "RECHNEN",
+ "ZÄHLEN",
+ "MESSEN",
+ "WIEGEN",
+ "WISSEN",
+ "LERNEN",
+ "DENKEN",
+ "FRAGEN",
+ "ANTWORTEN",
+ "ERZÄHLEN",
+ "SPRECHEN",
+ "FLÜSTERN",
+ "RUFEN",
+ "SCHREIEN",
+ "SINGEN",
+ "HÖREN",
+ "SEHEN",
+ "FÜHLEN",
+ "BERÜHREN",
+ "RIECHEN",
+ "SCHMECKEN",
+ "KLETTERN",
+ "SPRINGEN",
+ "TANZEN",
+ "RENNEN",
+ "FAULENZEN",
+ "TRAGEN",
+ "ZIEHEN",
+ "DRÜCKEN",
+ "WERFEN",
+ "FANGEN",
+ "SCHLAGEN",
+ "TRETEN",
+ "HEBEN",
+ "SENKEN",
+ "BEWEGEN",
+ "STILLSTEHEN",
+ "SITZEN",
+ "STEHEN",
+ "LIEGEN",
+ "KUSCHELN"
+]
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..358ca9b
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..db0becc
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})