feat: Add support for keyboard input

This commit is contained in:
sigmasternchen 2024-09-28 20:38:31 +02:00
parent d1d7d218ff
commit 53c9f7360f

View file

@ -1,6 +1,7 @@
import React from "react"; import React, {useEffect} from "react";
import {CellState} from "../model/CellState"; import {CellState} from "../model/CellState";
import {Key} from "./Key"; import {Key} from "./Key";
import {id} from "../utils";
export const Keyboard = ({enabled, used, onKey}) => { export const Keyboard = ({enabled, used, onKey}) => {
const keys = [ const keys = [
@ -9,6 +10,21 @@ export const Keyboard = ({enabled, used, onKey}) => {
"ENTER", "Z", "X", "C", "V", "B", "N", "M", "BACK" "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; let newlineCounter = 0;
return <div className={"keyboard " + (!enabled ? "disabled" : "")}> return <div className={"keyboard " + (!enabled ? "disabled" : "")}>
{ {