Merge branch 'main' of github.com:hannahcode/wordle
This commit is contained in:
commit
b68617ef30
2 changed files with 26 additions and 7 deletions
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
- Go play the real Wordle [here](https://www.powerlanguage.co.uk/wordle/)
|
- 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)
|
- 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:_
|
_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!
|
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!
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { KeyValue } from "../../lib/keyboard";
|
import { KeyValue } from "../../lib/keyboard";
|
||||||
import { getStatuses } from "../../lib/statuses";
|
import { getStatuses } from "../../lib/statuses";
|
||||||
import { Key } from "./Key";
|
import { Key } from "./Key";
|
||||||
|
import {useEffect} from "react";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
onChar: (value: string) => void;
|
onChar: (value: string) => void;
|
||||||
|
@ -11,18 +12,36 @@ type Props = {
|
||||||
|
|
||||||
export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
|
export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
|
||||||
const charStatuses = getStatuses(guesses);
|
const charStatuses = getStatuses(guesses);
|
||||||
console.log(charStatuses);
|
|
||||||
|
|
||||||
const onClick = (value: KeyValue) => {
|
const onClick = (value: KeyValue) => {
|
||||||
if (value === "ENTER") {
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex justify-center mb-1">
|
<div className="flex justify-center mb-1">
|
||||||
|
|
Loading…
Add table
Reference in a new issue