add new guess input with touch visual keyboard

src/components/Game/Game.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import GuessInput from '../GuessInput';
 import GuessResults from '../GuessResults';
 import HappyBanner from '../HappyBanner';
 import SadBanner from '../SadBanner';
 import VisualKeyboard from '../VisualKeyboard/VisualKeyboard';
+import NewAndImprovedGuessInputHopefully from '../NewAndImprovedGuessInputHopefully/NewAndImprovedGuessInputHopefully';
 
 import { sample } from '../../utils';
 import { NUM_OF_GUESSES_ALLOWED } from '../../constants';
@@ -26,6 +26,7 @@ const refreshLetterStatuses = () => {
 };
 
 function Game() {
+  const [tentativeGuess, setTentativeGuess] = React.useState('');
   //list of guesses here
   const [guesses, setGuesses] = React.useState([]);
   const numOfGuessesRemaining = NUM_OF_GUESSES_ALLOWED - guesses.length;
@@ -39,14 +40,37 @@ function Game() {
     console.info({ answer });
     setGuesses([]);
   };
+  const handleLetterSelect = (letter) => {
+    let nextTentativeGuess = tentativeGuess;
+    if (tentativeGuess.length < 5) {
+      nextTentativeGuess = tentativeGuess + letter;
+    }
+    if (letter === '⬅') {
+      nextTentativeGuess = tentativeGuess.slice(0, tentativeGuess.length - 1);
+    }
+    setTentativeGuess(nextTentativeGuess);
+  };
+  const handleSubmit = () => {
+    if (tentativeGuess.length !== 5) {
+        alert('Please provide a 5 letter guess 💖');
+    }
+    else if (guesses.includes(tentativeGuess)) {
+        alert('Already guessed that, try a new 5 letter guess 😺');
+    }
+    else {
+        console.info({ tentativeGuess });
+        setGuesses([...guesses, tentativeGuess]);
+        setTentativeGuess('');
+    }
+  };
   return (
     <>
       <GuessResults guesses={guesses} answer={answer} letterStatuses={letterStatuses}/>
       {(isAnswered || maxGuessesReached) ? <button className='loss new-game' onClick={newGame}>New Game</button> : null}
-      {isGuessInputEnabled ? <GuessInput guesses={guesses} setGuesses={setGuesses}/> : null}
+      {isGuessInputEnabled ? <NewAndImprovedGuessInputHopefully tentativeGuess={tentativeGuess} handleSubmit={handleSubmit}/> : null}
       {isAnswered ? <HappyBanner numOfGuesses={guesses.length}/> : null}
       {(maxGuessesReached && !isAnswered) ? <SadBanner answer={answer}/> : null}
-      <VisualKeyboard letterStatuses={letterStatuses}/>
+      <VisualKeyboard letterStatuses={letterStatuses} handleLetterSelect={handleLetterSelect}/>
     </>
   );
 }

src/components/NewAndImprovedGuessInputHopefully/NewAndImprovedGuessInputHopefully.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { range } from "../../utils";
+
+function NewAndImprovedGuessInputHopefully({ tentativeGuess, handleSubmit }) {
+  return (
+    <div className='new-guess-input-wrapper'>
+      <div className='guess-input-tiles'>
+        {range(5).map((num) => {
+          const currentLetter = tentativeGuess[num] || '';
+          const currentKey = `tentative-guess-${num}`;
+          return (
+            <span key={currentKey} className='cell guess-input-cell'>{currentLetter}</span>
+          );
+        })}
+      </div>
+      {tentativeGuess.length === 5
+        ? <button className='guess-input-send' onClick={handleSubmit}>Check Guess</button>
+        : null
+      }
+    </div>
+  );
+}
+
+export default NewAndImprovedGuessInputHopefully;

src/components/NewAndImprovedGuessInputHopefully/index.js

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

src/components/VisualKeyboard/VisualKeyboard.js

@@ -1,22 +1,23 @@
 import React from "react";
 
-function VisualKeyboard({ letterStatuses }) {
+function VisualKeyboard({ letterStatuses, handleLetterSelect }) {
   //QWERTY keyboard layout
   const row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
   const row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
-  const row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M'];
+  const row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '⬅'];
   const QWERTY = [row1, row2, row3];
   return (
     <div className='keyboard'>
       {QWERTY.map((row, rowId) => (
         <div key={`keyboard-row-${rowId}`} className='keyboard row'>
           {row.map(letter => (
-            <span
+            <button
               key={`keyboard-${letter}`}
               className={`cell ${letterStatuses[letter]}`}
+              onClick={() => handleLetterSelect(letter)}
             >
               {letter}
-            </span>
+            </button>
           ))}
         </div>
       ))}

src/styles.css

@@ -170,6 +170,25 @@ h1 {
   outline-offset: 4px;
 }
 
+.new-guess-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.guess-input-tiles {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+}
+.guess-input-send {
+  text-align: center;
+  background-color: var(--color-success);
+  color: white;
+}
+.guess-input-cell {
+  border-color: var(--color-gray-300);
+}
+
 .banner {
   display: flex;
   flex-direction: column;