mirror of
https://github.com/sigmasternchen/x86-64-wordle
synced 2025-03-15 08:09:01 +00:00
feat: Add support for keyboard input
This commit is contained in:
parent
d1d7d218ff
commit
53c9f7360f
1 changed files with 17 additions and 1 deletions
|
@ -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" : "")}>
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue