From 9709508831f6da0d77a34e1e98a7eabe9844faa7 Mon Sep 17 00:00:00 2001
From: Alex Stocki <ladislao.stocki@gointegro.com>
Date: Sun, 10 Mar 2024 22:05:12 -0300
Subject: [PATCH 1/4] feat: user guesses board - not completed

---
 src/components/Game/Game.js               | 12 +++++--
 src/components/UserGuesses/UserGuesses.js | 22 ++++++++++++
 src/components/UserGuesses/index.js       |  2 ++
 src/components/UserInput/UserInput.js     | 41 +++++++++++++++++++++++
 src/components/UserInput/index.js         |  2 ++
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UserGuesses/UserGuesses.js
 create mode 100644 src/components/UserGuesses/index.js
 create mode 100644 src/components/UserInput/UserInput.js
 create mode 100644 src/components/UserInput/index.js

diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js
index fc7615d24..e20df1e16 100644
--- a/src/components/Game/Game.js
+++ b/src/components/Game/Game.js
@@ -2,14 +2,22 @@ import React from 'react';
 
 import { sample } from '../../utils';
 import { WORDS } from '../../data';
+import UserInput from '../UserInput';
+import UserGuesses from '../UserGuesses';
 
 // 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([]);
+
+  return <>
+    <UserGuesses guesses={guesses} />  
+    <UserInput guesses={guesses} setGuesses={setGuesses} />
+  </>;
 }
 
 export default Game;
diff --git a/src/components/UserGuesses/UserGuesses.js b/src/components/UserGuesses/UserGuesses.js
new file mode 100644
index 000000000..83aee0fb8
--- /dev/null
+++ b/src/components/UserGuesses/UserGuesses.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function UserGuesses({ guesses }) {
+  return (
+    <>
+      <h2>Your guesses:</h2>
+      <div className='guess-results'>
+        {guesses.map((guess, index) => (
+          <p className='guess' key={index}>
+            {guess.split('').map((letter, letterIndex) => {
+              <span className='cell' key={letter}>
+                {letter}
+              </span>
+              })}
+          </p>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default UserGuesses;
diff --git a/src/components/UserGuesses/index.js b/src/components/UserGuesses/index.js
new file mode 100644
index 000000000..3eb446173
--- /dev/null
+++ b/src/components/UserGuesses/index.js
@@ -0,0 +1,2 @@
+export * from './UserGuesses';
+export { default } from './UserGuesses';
diff --git a/src/components/UserInput/UserInput.js b/src/components/UserInput/UserInput.js
new file mode 100644
index 000000000..70ba90f98
--- /dev/null
+++ b/src/components/UserInput/UserInput.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+function UserInput({ guesses, setGuesses }) {
+  const [guess, setGuess] = React.useState('');
+
+  const handleChange = (event) => {
+    setGuess(event.target.value.toUpperCase());
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log(guess);
+
+    const newGuesses = [...guesses];
+
+    newGuesses.push(guess);
+
+    setGuesses(newGuesses);
+
+    setGuess('');
+  }
+
+  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} 
+        required
+      />
+    </form>
+  );
+}
+
+export default UserInput;
diff --git a/src/components/UserInput/index.js b/src/components/UserInput/index.js
new file mode 100644
index 000000000..1486f08dd
--- /dev/null
+++ b/src/components/UserInput/index.js
@@ -0,0 +1,2 @@
+export * from './UserInput';
+export { default } from './UserInput';

From aa6393c2e738c3b4bd48d374a8c1a9325beeb121 Mon Sep 17 00:00:00 2001
From: Alex Stocki <ladislao.stocki@gointegro.com>
Date: Mon, 11 Mar 2024 23:04:31 -0300
Subject: [PATCH 2/4] fix: shows the board and completes it with user guesses

---
 src/components/UserGuesses/UserGuesses.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/UserGuesses/UserGuesses.js b/src/components/UserGuesses/UserGuesses.js
index 83aee0fb8..9a709f9b4 100644
--- a/src/components/UserGuesses/UserGuesses.js
+++ b/src/components/UserGuesses/UserGuesses.js
@@ -1,17 +1,26 @@
 import React from 'react';
+import { range } from '../../utils';
+import { NUM_OF_GUESSES_ALLOWED } from '../../constants';
 
 function UserGuesses({ guesses }) {
+  const guessesArray = range(NUM_OF_GUESSES_ALLOWED - 1).fill([]).map((_, index) => {
+    return guesses[index] || ['', '', '', '', ''];
+  });
+
+  const randonIndex = () => (Math.random());
+
+
   return (
     <>
       <h2>Your guesses:</h2>
       <div className='guess-results'>
-        {guesses.map((guess, index) => (
-          <p className='guess' key={index}>
-            {guess.split('').map((letter, letterIndex) => {
-              <span className='cell' key={letter}>
+        {guessesArray.map((guess) => (
+          <p className='guess' key={randonIndex()}>
+            {Array.from(guess).map((letter) => (
+              <span className='cell' key={randonIndex()}>
                 {letter}
               </span>
-              })}
+              ))}
           </p>
         ))}
       </div>

From 47a4cca8aac8057fc2798ce4abc7804d479bc96a Mon Sep 17 00:00:00 2001
From: Alex Stocki <ladislao.stocki@gointegro.com>
Date: Tue, 12 Mar 2024 23:23:35 -0300
Subject: [PATCH 3/4] feature: UserGuesses style for slots

---
 src/components/Game/Game.js               |  2 +-
 src/components/UserGuesses/UserGuesses.js | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js
index e20df1e16..31bc5b398 100644
--- a/src/components/Game/Game.js
+++ b/src/components/Game/Game.js
@@ -15,7 +15,7 @@ function Game() {
   const [guesses, setGuesses] = React.useState([]);
 
   return <>
-    <UserGuesses guesses={guesses} />  
+    <UserGuesses guesses={guesses} answer={answer}/>  
     <UserInput guesses={guesses} setGuesses={setGuesses} />
   </>;
 }
diff --git a/src/components/UserGuesses/UserGuesses.js b/src/components/UserGuesses/UserGuesses.js
index 9a709f9b4..059754cb5 100644
--- a/src/components/UserGuesses/UserGuesses.js
+++ b/src/components/UserGuesses/UserGuesses.js
@@ -1,23 +1,26 @@
 import React from 'react';
 import { range } from '../../utils';
 import { NUM_OF_GUESSES_ALLOWED } from '../../constants';
+import { checkGuess} from '../../game-helpers';
 
-function UserGuesses({ guesses }) {
-  const guessesArray = range(NUM_OF_GUESSES_ALLOWED - 1).fill([]).map((_, index) => {
-    return guesses[index] || ['', '', '', '', ''];
+function UserGuesses({ guesses, answer }) {
+  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());
 
-
   return (
     <>
       <h2>Your guesses:</h2>
       <div className='guess-results'>
         {guessesArray.map((guess) => (
           <p className='guess' key={randonIndex()}>
-            {Array.from(guess).map((letter) => (
-              <span className='cell' key={randonIndex()}>
+            {guess.map(( {letter, status} ) => (
+              <span className={`cell ${status}`} key={randonIndex()}>
                 {letter}
               </span>
               ))}

From 34de9023a7d6e2b2ef369c930d733a97e19f3f6c Mon Sep 17 00:00:00 2001
From: Alex Stocki <ladislao.stocki@gointegro.com>
Date: Thu, 14 Mar 2024 23:06:21 -0300
Subject: [PATCH 4/4] feat: game finished

---
 src/components/Banner/Banner.js           | 17 +++++++++++++++++
 src/components/Banner/index.js            |  2 ++
 src/components/Game/Game.js               | 11 +++++++++--
 src/components/UserGuesses/UserGuesses.js | 20 ++++++++++++++++++--
 src/components/UserInput/UserInput.js     | 11 +++++++++--
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Banner/Banner.js
 create mode 100644 src/components/Banner/index.js

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
new file mode 100644
index 000000000..93cf0e1df
--- /dev/null
+++ b/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;
diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js
new file mode 100644
index 000000000..1a3d55b83
--- /dev/null
+++ b/src/components/Banner/index.js
@@ -0,0 +1,2 @@
+export * from './Banner';
+export { default } from './Banner';
diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js
index 31bc5b398..9ab9cc083 100644
--- a/src/components/Game/Game.js
+++ b/src/components/Game/Game.js
@@ -4,6 +4,7 @@ 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);
@@ -13,10 +14,16 @@ console.log({ answer });
 
 function Game() {
   const [guesses, setGuesses] = React.useState([]);
+  const [gameResult, setGameResult] = React.useState(null);
+
+  function finishGame(result) {
+    setGameResult(result);
+  }
 
   return <>
-    <UserGuesses guesses={guesses} answer={answer}/>  
-    <UserInput guesses={guesses} setGuesses={setGuesses} />
+    <UserGuesses guesses={guesses} answer={answer} finishGame={finishGame} />  
+    <UserInput guesses={guesses} setGuesses={setGuesses} gameResult={gameResult} />
+    {gameResult && (<Banner gameResult={gameResult} answer={answer} guesses={guesses} />)}
   </>;
 }
 
diff --git a/src/components/UserGuesses/UserGuesses.js b/src/components/UserGuesses/UserGuesses.js
index 059754cb5..1aaa828e6 100644
--- a/src/components/UserGuesses/UserGuesses.js
+++ b/src/components/UserGuesses/UserGuesses.js
@@ -1,10 +1,11 @@
-import React from 'react';
+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 }) {
+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) => {
@@ -13,6 +14,21 @@ function UserGuesses({ guesses, answer }) {
 
   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>
diff --git a/src/components/UserInput/UserInput.js b/src/components/UserInput/UserInput.js
index 70ba90f98..f5a63c445 100644
--- a/src/components/UserInput/UserInput.js
+++ b/src/components/UserInput/UserInput.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-function UserInput({ guesses, setGuesses }) {
+function UserInput({ guesses, setGuesses, gameResult }) {
   const [guess, setGuess] = React.useState('');
 
   const handleChange = (event) => {
@@ -9,7 +9,6 @@ function UserInput({ guesses, setGuesses }) {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    console.log(guess);
 
     const newGuesses = [...guesses];
 
@@ -20,6 +19,13 @@ function UserInput({ guesses, setGuesses }) {
     setGuess('');
   }
 
+  const stopPlaying = () => {
+    if (gameResult || guesses.length === 6) {
+      return true;
+    }
+    return false;
+  }
+
   return (
     <form 
       className='guess-input-wrapper'
@@ -32,6 +38,7 @@ function UserInput({ guesses, setGuesses }) {
         value={guess} 
         pattern='\w{5}'
         onChange={handleChange} 
+        disabled={stopPlaying()}
         required
       />
     </form>