From 8951a46d5bc18780535d0bc337efeb241ac7e242 Mon Sep 17 00:00:00 2001 From: phoenixtoots Date: Wed, 16 Aug 2023 13:35:24 -0500 Subject: [PATCH] add new guess input with touch visual keyboard --- src/components/Game/Game.js | 30 ++++++++++-- src/components/GuessInput/GuessInput.js | 46 ------------------- src/components/GuessInput/index.js | 2 - .../NewAndImprovedGuessInputHopefully.js | 25 ++++++++++ .../index.js | 2 + .../VisualKeyboard/VisualKeyboard.js | 9 ++-- src/styles.css | 19 ++++++++ 7 files changed, 78 insertions(+), 55 deletions(-) delete mode 100644 src/components/GuessInput/GuessInput.js delete mode 100644 src/components/GuessInput/index.js create mode 100644 src/components/NewAndImprovedGuessInputHopefully/NewAndImprovedGuessInputHopefully.js create mode 100644 src/components/NewAndImprovedGuessInputHopefully/index.js diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js index 2ae02f588..823fb2c0b 100644 --- a/src/components/Game/Game.js +++ b/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 ( <> {(isAnswered || maxGuessesReached) ? : null} - {isGuessInputEnabled ? : null} + {isGuessInputEnabled ? : null} {isAnswered ? : null} {(maxGuessesReached && !isAnswered) ? : null} - + ); } diff --git a/src/components/GuessInput/GuessInput.js b/src/components/GuessInput/GuessInput.js deleted file mode 100644 index e901b57f0..000000000 --- a/src/components/GuessInput/GuessInput.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -function GuessInput({ guesses, setGuesses }) { - const [guess, setGuess] = React.useState(''); - const handleSubmit = (e) => { - e.preventDefault(); - if (guess.length !== 5) { - alert('Please provide a 5 letter guess 💖'); - } - else if (guesses.includes(guess)) { - alert('Already guessed that, try a new 5 letter guess 😺'); - } - else { - console.info({ guess }); - setGuesses([...guesses, guess]); - setGuess(''); - } - }; - const handleChange = (e) => { - const nextGuess = e.target.value.toUpperCase(); - const lastCharEntered = nextGuess[nextGuess.length - 1]; - if (nextGuess.length === 0) { - setGuess(''); - } else if (lastCharEntered.match(/[A-Z]/)) { - setGuess(nextGuess); - } - }; - return ( -
- - -
- ) -} - -export default GuessInput; \ No newline at end of file diff --git a/src/components/GuessInput/index.js b/src/components/GuessInput/index.js deleted file mode 100644 index a8db77bd5..000000000 --- a/src/components/GuessInput/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./GuessInput"; -export { default } from "./GuessInput"; diff --git a/src/components/NewAndImprovedGuessInputHopefully/NewAndImprovedGuessInputHopefully.js b/src/components/NewAndImprovedGuessInputHopefully/NewAndImprovedGuessInputHopefully.js new file mode 100644 index 000000000..4a5b19806 --- /dev/null +++ b/src/components/NewAndImprovedGuessInputHopefully/NewAndImprovedGuessInputHopefully.js @@ -0,0 +1,25 @@ +import React from "react"; + +import { range } from "../../utils"; + +function NewAndImprovedGuessInputHopefully({ tentativeGuess, handleSubmit }) { + return ( +
+
+ {range(5).map((num) => { + const currentLetter = tentativeGuess[num] || ''; + const currentKey = `tentative-guess-${num}`; + return ( + {currentLetter} + ); + })} +
+ {tentativeGuess.length === 5 + ? + : null + } +
+ ); +} + +export default NewAndImprovedGuessInputHopefully; diff --git a/src/components/NewAndImprovedGuessInputHopefully/index.js b/src/components/NewAndImprovedGuessInputHopefully/index.js new file mode 100644 index 000000000..b39a1ef61 --- /dev/null +++ b/src/components/NewAndImprovedGuessInputHopefully/index.js @@ -0,0 +1,2 @@ +export * from "./NewAndImprovedGuessInputHopefully"; +export { default } from "./NewAndImprovedGuessInputHopefully"; diff --git a/src/components/VisualKeyboard/VisualKeyboard.js b/src/components/VisualKeyboard/VisualKeyboard.js index 7461ae726..085aebe58 100644 --- a/src/components/VisualKeyboard/VisualKeyboard.js +++ b/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 (
{QWERTY.map((row, rowId) => (
{row.map(letter => ( - handleLetterSelect(letter)} > {letter} - + ))}
))} diff --git a/src/styles.css b/src/styles.css index 7cd4dbb66..96d6de614 100644 --- a/src/styles.css +++ b/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;