diff --git a/package.json b/package.json
index 6fea90829acf3ccb3569d738bb240abb65f913df..b8dac5dae6dcc33cde540638e1c2ecbb82b00bca 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "ramda": "^0.28.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
diff --git a/src/components/CharBox.js b/src/components/CharBox.js
index dbf5f1ce6ec5a228f09890fd1eab0f12e6bcb4d6..d92c1e80a6dbc012f40438db3602973b69c043e4 100644
--- a/src/components/CharBox.js
+++ b/src/components/CharBox.js
@@ -1,83 +1,10 @@
+import './style/Boxes.css';
import React from "react";
-// import { Answer } from "../constant/Answer";
export default function CharBox(props) {
-
- let correctBox = {
- backgroundColor: "green",
- color: "white",
- width: "50px",
- height: "50px",
- display: "inline-block",
- textAlign: "center",
- verticalAlign: "middle",
- lineHeight: "50px",
- margin: "5px",
- border: "1px solid black"
- };
-
- let missplacedBox = {
- backgroundColor: "yellow",
- color: "black",
- width: "50px",
- height: "50px",
- display: "inline-block",
- textAlign: "center",
- verticalAlign: "middle",
- lineHeight: "50px",
- margin: "5px",
- border: "1px solid black"
- };
-
- let wrongBox = {
- backgroundColor: "red",
- color: "white",
- width: "50px",
- height: "50px",
- display: "inline-block",
- textAlign: "center",
- verticalAlign: "middle",
- lineHeight: "50px",
- margin: "5px",
- border: "1px solid black"
- };
-
- let defaultBox = {
- backgroundColor: "white",
- color: "black",
- width: "50px",
- height: "50px",
- display: "inline-block",
- textAlign: "center",
- verticalAlign: "middle",
- lineHeight: "50px",
- margin: "5px",
- border: "1px solid black"
- };
-
- const [charState, setCharState] = React.useState(props.char);
- const [boxStyle, setBoxStyle] = React.useState(defaultBox);
-
- const changeBoxStyle = (answer) => {
- if (answer === "Correct") {
- return correctBox;
- } else if (answer === "Misplaced") {
- return missplacedBox;
- } else if (answer === "Wrong") {
- return wrongBox;
- }
- return defaultBox;
- }
-
- React.useEffect(() => {
- // console.log(props);
- setCharState(props.char);
- setBoxStyle(changeBoxStyle(props.answer));
- }, [props]); // eslint-disable-line react-hooks/exhaustive-deps
-
return (
- <div style={boxStyle}>
- {charState.toUpperCase()}
+ <div class={"char-box " + (props.answer ? props.answer + "-box" : "default-box")}>
+ {props.char.toUpperCase()}
</div>
);
}
\ No newline at end of file
diff --git a/src/components/WordBox.js b/src/components/WordBox.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..86578b816077d8dbad1ff7e10b67c65fddff2655 100644
--- a/src/components/WordBox.js
+++ b/src/components/WordBox.js
@@ -0,0 +1,16 @@
+import React from "react";
+import CharBox from "./CharBox";
+
+const WordBox = (props) => {
+ return (
+ <div className="word-box">
+ <CharBox char={props.chars[0].char} answer={props.chars[0].answer}/>
+ <CharBox char={props.chars[1].char} answer={props.chars[1].answer}/>
+ <CharBox char={props.chars[2].char} answer={props.chars[2].answer}/>
+ <CharBox char={props.chars[3].char} answer={props.chars[3].answer}/>
+ <CharBox char={props.chars[4].char} answer={props.chars[4].answer}/>
+ </div>
+ );
+}
+
+export default WordBox;
\ No newline at end of file
diff --git a/src/components/WordInput.js b/src/components/WordInput.js
index ca15a6ca03f22887255c3f28c6b65912b5f52d87..3acfa2030a1fbc1600acc3b70dbac7c1099e5229 100644
--- a/src/components/WordInput.js
+++ b/src/components/WordInput.js
@@ -1,44 +1,73 @@
import React from "react";
import { validateInput } from "../helpers/validateInput";
import CharBox from "./CharBox";
+import WordBox from "./WordBox";
const WordInput = () => {
+ const NUM_TRY = 6;
+ const WORD_LENGTH = 5;
+ const [currentTry, setCurrentTry] = React.useState(0);
const [word, setWord] = React.useState([]);
- const [charBox, setCharBox] = React.useState([]);
+ const [allWords, setAllWords] = React.useState([]);
+ const [inputBox, setInputBox] = React.useState([]);
+
+ const resetInputBox = () => {
+ const initInputBox = [];
+ for (let i = 0; i < WORD_LENGTH; i++) {
+ initInputBox.push(<CharBox char=""/>);
+ }
+ setInputBox(initInputBox);
+ setWord([]);
+ }
React.useEffect(() => {
const charBoxes = [];
- for (let i = 0; i < 5; i++) {
- charBoxes.push(<CharBox char=""/>);
+ for (let i = 0; i < WORD_LENGTH; i++) {
+ charBoxes.push({ char: "", answer: "" });
}
- setCharBox(charBoxes);
+ for (let i = 0; i < NUM_TRY; i++) {
+ setAllWords(prev => [...prev, <WordBox chars={charBoxes} />]);
+ }
+ resetInputBox();
}, []);
document.onkeyup = function(e) {
if (e.key.length === 1){
if (e.key.match(/[a-z]/i)) {
- if (word.length >= 5) {
+ if (word.length >= WORD_LENGTH) {
return;
} else {
- setCharBox(prevState => {
+ setInputBox(prevState => {
const newState = [...prevState];
newState[word.length] = <CharBox char={e.key} />;
return newState;
- });
- setWord([...word, e.key]); }
+ });
+ setWord([...word, e.key]);
+ }
}
} else {
if (e.key === "Enter") {
- setCharBox([]);
-
+ // TODO: Check if word is valid
+ // TODO: Check if user win
+ // TODO: Check if user lose
+ // TODO: Fix bug for character less than asked
+
+ let currentInput = [];
validateInput(word, "hello").flatMap((e, idx) => {
- setCharBox(prevState => [...prevState, <CharBox char={word[idx]} answer={e} />]);
- return charBox;
+ currentInput = [...currentInput, { char: word[idx], answer: e }];
+ });
+ setAllWords(prev => {
+ const newState = [...prev];
+ newState[currentTry] = <WordBox chars={currentInput} />;
+ return newState;
});
+ setCurrentTry(prev => prev + 1);
+ resetInputBox();
+
} else if (e.key === "Backspace" && word.length > 0) {
setWord([...word.slice(0,-1)]);
- setCharBox(prevState => {
+ setInputBox(prevState => {
const newState = [...prevState];
newState[word.length-1] = <CharBox char={""} />;
return newState;
@@ -49,7 +78,11 @@ const WordInput = () => {
return (
<div className="word-input">
- {charBox}
+ {allWords.slice(0, currentTry)}
+ <div className="word-box input-box">
+ {inputBox}
+ </div>
+ {allWords.slice(currentTry+1, NUM_TRY+1)}
</div>
);
}
diff --git a/src/components/style/Boxes.css b/src/components/style/Boxes.css
new file mode 100644
index 0000000000000000000000000000000000000000..42ab73e42561e62d4f93b7fb238843777db0e3de
--- /dev/null
+++ b/src/components/style/Boxes.css
@@ -0,0 +1,30 @@
+.char-box {
+ width: 50px;
+ height: 50px;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 50px;
+ margin: 5px;
+ border: 1px solid black;
+}
+
+.correct-box {
+ background-color: green;
+ color: white;
+}
+
+.misplaced-box {
+ background-color: yellow;
+ color: black;
+}
+
+.incorrect-box {
+ background-color: red;
+ color: white;
+}
+
+.default-box {
+ background-color: white;
+ color: black;
+}
\ No newline at end of file