thinkalittlelonger

• apply the structure of the first element to the others: highlight takes an array of letters, validation is an unquoted function, examples is a list of words. { round: 1, title: "starts with HI", highlight: ["H", "I"], validation: str => /^hi.*/.test(str.toLowerCase()), unselectable_keys: [], examples: ["hit", "hint", "hill",] },
• make this array exportable.
• import the rounds array in the App component to use for the rounds of the game.
• leverage the other features of the rounds data:
  • the examples should be between the prompt and the currentGuess
  • in the currentGuess, on the keyboard, and in the displayex examples, the letters in round.highlight should be visually distinct from the the other letters.
  • the submit button should only be clickable if validation returns true.
  • make the unselectable keys unselectable. With keyboard input, typing an unselectable letter doesn't do anything

Help me begin to build out the postGame view:

• during the game, record the list of words the player submitted.
• upon submitting the final guess, send that data to the backend.
  • we will validate that submissions are actual words on the backend. Skip the actual validation for now. instead use a stub that says every submission has a 75% change of being valid. Do this on the backend.
  • the postGame state should present a table of the results, that lists each word.
    • if it the word is valid, list the number of letters in it.
    • visually indicate valid and invalid words using versions of red and green that are discernible for standard colorblindness.
    • the last line of the table should a "total" that sums up the letters in all valid words.