Exercise 1-5

src/components/Game/Game.js

@@ -1,15 +1,54 @@
-import React from 'react';
+import React from "react";
 
-import { sample } from '../../utils';
-import { WORDS } from '../../data';
+import { sample } from "../../utils";
+import { WORDS } from "../../data";
+import GuessInput from "../GuessInput";
+import GuessList from "../GuessList";
+import { range } from "../../utils";
+import { NUM_OF_GUESSES_ALLOWED } from "../../constants";
 
 // Pick a random word on every pageload.
 const answer = sample(WORDS);
 // To make debugging easier, we'll log the solution in the console.
 console.info({ answer });
 
 function Game() {
-  return <>Put a game here!</>;
+  const [guesses, setGuesses] = React.useState(
+    range(0, NUM_OF_GUESSES_ALLOWED).map(() => ({
+      value: "",
+      id: crypto.randomUUID(),
+    }))
+  );
+  const [guessNumber, setGuessNumber] = React.useState(0);
+  const appendGuess = (guess) => {
+    const newGuesses = [...guesses];
+    newGuesses[guessNumber].value = guess;
+    setGuesses(newGuesses);
+    setGuessNumber(guessNumber + 1);
+  };
+  const gameWon = guesses[guessNumber - 1]?.value === answer;
+  const gameLost = guessNumber >= NUM_OF_GUESSES_ALLOWED && !gameWon;
+  return (
+    <>
+      <GuessList guesses={guesses} answer={answer} />
+      <GuessInput appendGuess={appendGuess} guessNumber={guessNumber} />
+      {gameWon && (
+        <div class="happy banner">
+          <p>
+            <strong>Congratulations!</strong> Got it in
+            <strong> {guessNumber} guesses</strong>.
+          </p>
+        </div>
+      )}
+      {gameLost && (
+        <div class="sad banner">
+          <p>
+            Sorry, the correct answer is <strong>{answer}</strong>.
+          </p>
+        </div>
+      )}
+    </>
+  );
 }
 
 export default Game;

src/components/Guess/Guess.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { range } from "../../utils";
+import { checkGuess } from "../../game-helpers";
+
+function Guess({ guess, answer }) {
+  console.log({ guess, answer });
+  const guessStatus = checkGuess(guess, answer);
+  return (
+    <p className="guess">
+      {range(0, 5).map((index) => {
+        const statusClass = guessStatus ? guessStatus[index].status : "";
+        return (
+          <span key={index} className={`cell ${statusClass}`}>
+            {guess[index] ?? ""}
+          </span>
+        );
+      })}
+    </p>
+  );
+}
+
+export default Guess;

src/components/Guess/index.js

@@ -0,0 +1,2 @@
+export * from './Guess';
+export { default } from './Guess';

src/components/GuessInput/GuessInput.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { NUM_OF_GUESSES_ALLOWED } from "../../constants";
+
+function GuessInput({ appendGuess, guessNumber }) {
+  const [guess, setGuess] = React.useState("");
+  return (
+    <form
+      className="guess-input-wrapper"
+      onSubmit={(event) => {
+        event.preventDefault();
+        console.log({ answer: guess });
+        appendGuess(guess);
+        setGuess("");
+      }}
+    >
+      <label htmlFor="guess-input">Enter guess:</label>
+      <input
+        id="guess-input"
+        type="text"
+        value={guess}
+        pattern="[A-Za-z]{5}"
+        title="5 letters"
+        onChange={(event) => {
+          setGuess(event.target.value.toLocaleUpperCase());
+        }}
+        disabled={guessNumber >= NUM_OF_GUESSES_ALLOWED}
+      />
+    </form>
+  );
+}
+
+export default GuessInput;

src/components/GuessInput/index.js

@@ -0,0 +1,2 @@
+export * from "./GuessInput";
+export { default } from "./GuessInput";

src/components/GuessList/GuessList.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Guess from "../Guess";
+function GuessList({ guesses, answer }) {
+  return (
+    <div className="guess-results">
+      {guesses.map(({ value, id }) => (
+        <Guess guess={value} key={id} answer={answer} />
+      ))}
+    </div>
+  );
+}
+
+export default GuessList;

src/components/GuessList/index.js

@@ -0,0 +1,2 @@
+export * from './GuessList';
+export { default } from './GuessList';