From e621515360811222f67318dd8cc38ac4b07b7e8b Mon Sep 17 00:00:00 2001 From: Philippe Sabourin Date: Fri, 14 Jan 2022 16:44:25 -0500 Subject: [PATCH 1/2] Adding keyboard input for the game --- src/components/keyboard/Keyboard.tsx | 31 ++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/keyboard/Keyboard.tsx b/src/components/keyboard/Keyboard.tsx index 5270e87..5a89f3b 100644 --- a/src/components/keyboard/Keyboard.tsx +++ b/src/components/keyboard/Keyboard.tsx @@ -1,6 +1,7 @@ import { KeyValue } from "../../lib/keyboard"; import { getStatuses } from "../../lib/statuses"; import { Key } from "./Key"; +import {useEffect} from "react"; type Props = { onChar: (value: string) => void; @@ -11,18 +12,36 @@ type Props = { export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => { const charStatuses = getStatuses(guesses); - console.log(charStatuses); const onClick = (value: KeyValue) => { if (value === "ENTER") { - return onEnter(); + onEnter(); + } else if (value === "DELETE") { + onDelete(); + } else { + onChar(value); } - if (value === "DELETE") { - return onDelete(); - } - return onChar(value); }; + useEffect(() => { + const listener = (e:KeyboardEvent) => { + if(e.code === "Enter") { + onEnter(); + } else if(e.code === "Backspace") { + onDelete(); + } else { + const key = e.key.toUpperCase(); + if(key.length === 1 && key >= "A" && key <= "Z") { + onChar(key); + } + } + }; + window.addEventListener("keyup", listener); + return () => { + window.removeEventListener("keyup", listener); + }; + }, [onEnter, onDelete, onChar]); + return (
From af23046f6b6e312b74ef5495a4003a9e0743d57e Mon Sep 17 00:00:00 2001 From: Hannah Park <70654324+hannahcode@users.noreply.github.com> Date: Fri, 14 Jan 2022 21:29:48 -0500 Subject: [PATCH 2/2] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bc44d42..1225d9b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ - Go play the real Wordle [here](https://www.powerlanguage.co.uk/wordle/) - Read the story behind it [here](https://www.nytimes.com/2022/01/03/technology/wordle-word-game-creator.html) -- Try a demo of this clone project [here](https://61dc4dbf9f2b9d0007925c02--thirsty-hoover-08af60.netlify.app/) +- Try a demo of this clone project [here](https://wordle.hannahmariepark.com) _Inspiration:_ This game is an open source clone of the immensely popular online word guessing game Wordle. Like many others all over the world, I saw the signature pattern of green, yellow, and white squares popping up all over social media and the web and had to check it out. After a few days of play, I decided it would be great for my learning to try to rebuild Wordle in React!