Solution of exercises

src/components/Banner/Banner.js

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

src/components/Banner/index.js

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

src/components/Cell/Cell.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function Cell({ letter, status }) {
+  const className = status ? `cell ${status}` : 'cell';
+
+  return <span className={className}>{letter}</span>;
+}
+
+export default Cell;

src/components/Cell/index.js

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

src/components/Game/Game.js

@@ -1,15 +1,69 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { sample } from '../../utils';
 import { WORDS } from '../../data';
+import Input from '../Input/Input';
+import PreviousWord from '../PreviousWord/PreviousWord';
+import Banner from '../Banner/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 });
 
 function Game() {
-  return <>Put a game here!</>;
+  const [words, setWords] = useState([]);
+  const [isOver, setIsOver] = useState(false);
+  const [isWinner, setIsWinner] = useState(false);
+
+  const handleSaveWord = (input) => {
+    setWords([...words, input]);
+
+    if (answer === input.value) {
+      setIsWinner(true);
+      setIsOver(true);
+    } else if (words.length >= 5) {
+      setIsOver(true);
+      setIsWinner(false);
+    } else {
+      setIsOver(false);
+    }
+  };
+
+  const handleResetGame = () => {
+    const newGame = [];
+
+    setWords(newGame);
+    setIsOver(false);
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <PreviousWord
+        words={words}
+        answer={answer}
+      />
+      <Input
+        handleSaveWord={handleSaveWord}
+        isOver={isOver}
+      />
+      <button
+        className='restart'
+        onClick={handleResetGame}
+      >
+        Restart
+      </button>
+      {isOver ?
+        <Banner
+          isWinner={isWinner}
+          answer={answer}
+          words={words}
+        /> :
+        undefined
+      }
+    </>
+  );
 }
 
 export default Game;

src/components/Guess/Guess.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { range } from '../../utils';
+import Cell from '../Cell/Cell';
+import { checkGuess } from '../../game-helpers';
+
+function Guess({ word, answer }) {
+  const result = checkGuess(word, answer);
+
+  return (
+    <p className="guess">
+      {
+        range(5).map(num => {
+          return (
+            <Cell
+              key={num}
+              letter={result ? result[num].letter : undefined}
+              status={result ? result[num].status : undefined}
+            />
+          );
+        })
+      }
+    </p>
+  );
+}
+
+export default Guess;

src/components/Guess/index.js

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

src/components/Input/Input.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+const Input = ({ handleSaveWord, isOver }) => {
+  const [tentativeGuess, setTentativeGuess] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (tentativeGuess.length !== 5) {
+      alert('The word must be equal to 5 letters');
+      return;
+    };
+
+    const newWord = {
+      id: crypto.randomUUID(),
+      value: tentativeGuess
+    }
+
+    handleSaveWord(newWord);
+    setTentativeGuess('');
+  };
+
+  return (
+    <form
+      className='guess-input-wrapper'
+      onSubmit={handleSubmit}
+    >
+      <label htmlFor='guess-input'>Enter guess:</label>
+      <input
+        required
+        id='guess-input'
+        type='text'
+        disabled={isOver}
+        value={tentativeGuess}
+        onChange={event => {
+          setTentativeGuess(event.target.value.toUpperCase())
+        }}
+      />
+    </form>
+  );
+};
+
+export default Input;

src/components/Input/index.js

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

src/components/PreviousWord/PreviousWord.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Guess from '../Guess/Guess';
+import { NUM_OF_GUESSES_ALLOWED } from '../../constants';
+import { range } from '../../utils';
+
+function PreviousWord({ words, answer }) {
+  return (
+    <div className="guess-results">
+      {range(NUM_OF_GUESSES_ALLOWED).map(num => {
+        return (
+          <Guess key={num} word={words[num]?.value} answer={answer} />
+        );
+      })}
+    </div>
+  );
+}
+
+export default PreviousWord;

src/components/PreviousWord/index.js

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

src/styles.css

@@ -4,7 +4,7 @@
 html {
   overflow-y: scroll;
 
-  --game-spacing: 32px;
+  --game-spacing: 20px;
   --header-height: 4rem;
 
   --color-success: hsl(150deg 70% 30%);
@@ -77,17 +77,16 @@ h1 {
   display: flex;
   flex-direction: column;
   gap: var(--game-spacing);
-  padding: var(--game-spacing) 32px;
+  padding: var(--game-spacing) 15px;
   margin: 0 auto;
   min-width: 250px;
   max-width: min(500px, 58vh, 100%);
 }
 
 .guess-results {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .guess {
@@ -114,12 +113,15 @@ h1 {
 .guess:first-of-type .cell:first-of-type {
   --radius: 4px 0px 0px 0px;
 }
+
 .guess:first-of-type .cell:last-of-type {
   --radius: 0px 4px 0px 0px;
 }
+
 .guess:last-of-type .cell:last-of-type {
   --radius: 0px 0px 4px 0px;
 }
+
 .guess:last-of-type .cell:first-of-type {
   --radius: 0px 0px 0px 4px;
 }
@@ -129,11 +131,13 @@ h1 {
   border-color: var(--color-success);
   color: white;
 }
+
 .cell.incorrect {
   background: var(--color-gray-300);
   border-color: var(--color-gray-300);
   color: white;
 }
+
 .cell.misplaced {
   background: var(--color-warning);
   border-color: var(--color-warning);
@@ -159,6 +163,7 @@ h1 {
   border-radius: 4px;
   padding: 8px 16px;
   outline-offset: 4px;
+  outline: none;
 }
 
 .banner {
@@ -180,6 +185,7 @@ h1 {
   background: var(--color-success);
   color: white;
 }
+
 .sad.banner {
   background: var(--color-error);
   color: white;
@@ -208,25 +214,36 @@ h1 {
   border-radius: 8px;
   padding: 24px 32px;
 }
+
 .modal-close-btn {
   position: absolute;
   top: 0;
   right: 0;
   padding: 16px;
   cursor: pointer;
 }
+
 .modal-title {
   margin-bottom: 0.5em;
 }
 
+.restart {
+  text-align: center;
+  padding: 10px 15px;
+  background-color: var(--color-gray-300);
+  color: #fff;
+  border-radius: var(--radius);
+}
+
 /*
   Keyframe animations
 */
 @keyframes slideUp {
   from {
     transform: translateY(100%);
   }
+
   to {
     transform: translateY(0%);
   }
-}
+}