BOARD

src/components/Banner/Banner.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+function Banner({ gameResult, answer, guesses}) {
+  const bannerStyle = gameResult === 'win' ? 'happy' : 'sad';
+  const loseText = <p>Sorry, the correct answer is <strong>{answer}</strong></p>
+  const winText = <p>Congratulations! Got it in <strong>{`${guesses.length} ${guesses.length > 1 ? 'guesses' : 'guess'}`}</strong>.</p>
+
+  return (
+    gameResult && (
+      <div className={`${bannerStyle} banner`} >
+      {gameResult === 'win' ? winText : loseText}
+      </div>
+      )
+  );
+}
+
+export default Banner;

src/components/Banner/index.js

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

src/components/Game/Game.js

@@ -2,14 +2,29 @@ import React from 'react';
 
 import { sample } from '../../utils';
 import { WORDS } from '../../data';
+import UserInput from '../UserInput';
+import UserGuesses from '../UserGuesses';
+import Banner from '../Banner';
 
 // 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 });
+console.log({ answer });
+
 
 function Game() {
-  return <>Put a game here!</>;
+  const [guesses, setGuesses] = React.useState([]);
+  const [gameResult, setGameResult] = React.useState(null);
+
+  function finishGame(result) {
+    setGameResult(result);
+  }
+
+  return <>
+    <UserGuesses guesses={guesses} answer={answer} finishGame={finishGame} />  
+    <UserInput guesses={guesses} setGuesses={setGuesses} gameResult={gameResult} />
+    {gameResult && (<Banner gameResult={gameResult} answer={answer} guesses={guesses} />)}
+  </>;
 }
 
 export default Game;

src/components/UserGuesses/UserGuesses.js

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import { range } from '../../utils';
+import { NUM_OF_GUESSES_ALLOWED } from '../../constants';
+import { checkGuess} from '../../game-helpers';
+
+function UserGuesses({ guesses, answer, finishGame }) {
+  let guessesResult = guesses.map((guess) => checkGuess(guess, answer));
+
+  const emptySlots = Array(5).fill({letter: '', status: ''});
+
+  let guessesArray = range(NUM_OF_GUESSES_ALLOWED).fill([]).map((_, index) => {
+    return guessesResult[index] || [ ...emptySlots ];
+  });
+
+  const randonIndex = () => (Math.random());
+
+  function checkIfWon(guesses) {
+    const hasWon = guesses.filter(guess => (
+      guess.every(letter => letter.status === 'correct')
+    ));
+
+    // hasWon.length > 0 ? finishGame('win') : null;
+    return hasWon.length > 0;
+  }
+
+  useEffect(() => {
+    if (checkIfWon(guessesResult)) {
+      finishGame('win');
+    }
+  }, [guessesResult, finishGame]);
+
+  return (
+    <>
+      <h2>Your guesses:</h2>
+      <div className='guess-results'>
+        {guessesArray.map((guess) => (
+          <p className='guess' key={randonIndex()}>
+            {guess.map(( {letter, status} ) => (
+              <span className={`cell ${status}`} key={randonIndex()}>
+                {letter}
+              </span>
+              ))}
+          </p>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default UserGuesses;

src/components/UserGuesses/index.js

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

src/components/UserInput/UserInput.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+function UserInput({ guesses, setGuesses, gameResult }) {
+  const [guess, setGuess] = React.useState('');
+
+  const handleChange = (event) => {
+    setGuess(event.target.value.toUpperCase());
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    const newGuesses = [...guesses];
+
+    newGuesses.push(guess);
+
+    setGuesses(newGuesses);
+
+    setGuess('');
+  }
+
+  const stopPlaying = () => {
+    if (gameResult || guesses.length === 6) {
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <form 
+      className='guess-input-wrapper'
+      onSubmit={handleSubmit}  
+    >
+      <label htmlFor='guess-input' >Enter guess:</label>
+      <input 
+        id='guess-input' 
+        type='text'
+        value={guess} 
+        pattern='\w{5}'
+        onChange={handleChange} 
+        disabled={stopPlaying()}
+        required
+      />
+    </form>
+  );
+}
+
+export default UserInput;

src/components/UserInput/index.js

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