Wins solution

.gitignore

@@ -19,3 +19,5 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode

src/components/Banner/Banner.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+function Banner({ type, answer = "", guesses = 6 }) {
+  if (type === "happy") {
+    return (
+      <div className="happy banner">
+        <p>
+          <strong>Congratulations!</strong> Got it in
+          <strong>
+            {guesses} {guesses === 1 ? "guess" : "guesses"}
+          </strong>
+          .
+        </p>
+      </div>
+    );
+  } else if (type === "sad") {
+    return (
+      <div className="sad banner">
+        <p>
+          Sorry, the correct answer is <strong>{answer}</strong>.
+        </p>
+      </div>
+    );
+  }
+  return;
+}
+
+export default Banner;

src/components/Banner/index.js

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

src/components/Game/Game.js

@@ -1,15 +1,42 @@
-import React from 'react';
+import React, { useState } from "react";
 
-import { sample } from '../../utils';
-import { WORDS } from '../../data';
-
-// 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 });
+import { sample } from "../../utils";
+import { WORDS } from "../../data";
+import Input from "../Input/Input";
+import Guesses from "../Guesses/Guesses";
+import { checkGuess } from "../../game-helpers";
+import Banner from "../Banner/Banner";
 
 function Game() {
-  return <>Put a game here!</>;
+  const [answer, setAnswer] = useState(() => sample(WORDS));
+  const [guesses, setGuesses] = useState([]);
+
+  const gameIsWon =
+    guesses.filter((guess) => guess === answer).length > 0 ? true : false;
+
+  const nonEmptyGuesses = guesses.filter((guess) => guess.length === 5);
+
+  const gameLost = nonEmptyGuesses.length === 6 && gameIsWon === false;
+
+  return (
+    <>
+      {(gameLost || gameIsWon) && (
+        <button
+          type="reset"
+          onClick={() => {
+            setGuesses([]);
+            setAnswer(() => sample(WORDS));
+          }}
+        >
+          Reset
+        </button>
+      )}
+      <Guesses guesses={guesses} answer={answer} />
+      <Input setGuesses={(guess) => setGuesses([...guesses, guess])} />
+      {gameLost && <Banner type="sad" answer={answer} />}
+      {gameIsWon && <Banner type="happy" guesses={nonEmptyGuesses.length} />}
+    </>
+  );
 }
 
 export default Game;

src/components/Guess/Guess.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { range } from "../../utils";
+import { checkGuess } from "../../../src/game-helpers";
+
+function Guess({ value, answer }) {
+  const letterStatuses = checkGuess(value, answer);
+  return (
+    <p className="guess">
+      {range(5).map((i) => {
+        return (
+          <span
+            className={`cell ${
+              letterStatuses ? letterStatuses[i].status : undefined
+            }`}
+            key={i}
+          >
+            {value?.split("")[i]}
+          </span>
+        );
+      })}
+    </p>
+  );
+}
+
+export default Guess;

src/components/Guess/index.js

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

src/components/Guesses/Guesses.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { range } from "../../utils";
+import { NUM_OF_GUESSES_ALLOWED } from "../../constants";
+import Guess from "../Guess";
+
+function Guesses({ guesses, answer }) {
+  return (
+    <div className="guess-results">
+      {range(NUM_OF_GUESSES_ALLOWED).map((number) => {
+        return <Guess value={guesses[number]} key={number} answer={answer} />;
+      })}
+    </div>
+  );
+}
+
+export default Guesses;

src/components/Guesses/index.js

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

src/components/Input/Input.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+
+function Input({ setGuesses }) {
+  const [guess, setGuess] = useState("");
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    setGuesses(guess);
+    setGuess("");
+  }
+  return (
+    <form className="guess-input-wrapper" onSubmit={handleSubmit}>
+      <label htmlFor="guess-input">Enter guess:</label>
+      <input
+        required
+        id="guess-input"
+        type="text"
+        value={guess}
+        minLength={5}
+        maxLength={5}
+        pattern="[a-zA-Z]{5}"
+        title="5 letter word"
+        onChange={(e) => setGuess(e.target.value.toUpperCase())}
+      />
+    </form>
+  );
+}
+
+export default Input;

src/components/Input/index.js

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