From 53c9f7360f4d2a73cc2f818fd3642e54180e811c Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
Date: Sat, 28 Sep 2024 20:38:31 +0200
Subject: [PATCH] feat: Add support for keyboard input

---
 src/components/Keyboard.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Keyboard.jsx b/src/components/Keyboard.jsx
index 29e71be..a128106 100644
--- a/src/components/Keyboard.jsx
+++ b/src/components/Keyboard.jsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {CellState} from "../model/CellState";
 import {Key} from "./Key";
+import {id} from "../utils";
 
 export const Keyboard = ({enabled, used, onKey}) => {
     const keys = [
@@ -9,6 +10,21 @@ export const Keyboard = ({enabled, used, onKey}) => {
         "ENTER", "Z", "X", "C", "V", "B", "N", "M", "BACK"
     ];
 
+    useEffect(() => {
+        const keyDownHandler = event => {
+            if (event.key === "Enter") {
+                onKey("ENTER");
+            } else if (event.key === "Backspace") {
+                onKey("BACK");
+            } else if (event.key.length === 1 && keys.filter(id).indexOf(event.key.toUpperCase())) {
+                onKey(event.key.toUpperCase());
+            }
+        };
+
+        window.addEventListener("keydown", keyDownHandler);
+        return () => window.removeEventListener("keydown", keyDownHandler);
+    }, [onKey]);
+
     let newlineCounter = 0;
     return <div className={"keyboard " + (!enabled ? "disabled" : "")}>
         {