With the game we need a custom text box to allow the user to input their guess for the phrase of the day. The user should be notified when their guess is correct or not correct
Acceptance Criteria
[ ] The user can easily tell how many characters are in each word of the phrase and how many words are in the phrase (make sure letter and space spacing is set appropriately)
[ ] The component shows where the next typed letter will be (text cursor component)
On a keyboard input, the input text as well as the cursor string needs to be adjusted (look at dev notes below for further explanation
[ ] If the guess is incorrect or not a valid guess =, the user is notified of it
[ ] The component handles a correct guess (just make sure that when the enter key/button is pressed, it checks for the correct phrase matches the input
[ ] Spaces are ignored: the cursor automatically jumps in between words without the user typing in a space
video showing the input phrase cursor moving as the user types
I used a monospaced font in figma so that the underscores always match the characters that will be typed
Can line up the underscores and inputed characters by making the text be left-aligned and placing the text boxes in the same spot
To move the cursor I made the curser be this string: "", and on a keyboard input, just add a space in front of the underscore: " " + "". This is also why the text needs to be monospaced otherwise spaces are different sizes then a character
Description
With the game we need a custom text box to allow the user to input their guess for the phrase of the day. The user should be notified when their guess is correct or not correct
Acceptance Criteria
Dev Notes
Subtasks