persist & display scores & past solutions

[no-stack-dub-sack]

This PR:

• show solutions on board for puzzles that were previously won
• show CLEAR instead of ENTER on keyboard when puzzle is won to give user ability to clear solution
• clearSolution will clear board but not history of game state
• for puzzles that have been won in the past but cleared, show as yellow in "choose" menu
• show score (e.g. 2/6, 6/6, etc.) next to "choose" menu items for solved puzzles

Some of the bigger changes include:

• gameStateList is now an array of objects rather than an array of strings, the object contains game state as well as board state. For users with existing gameStateList local storage, A one-time update is performed when the app is first mounted to convert the existing list from an array of strings to the new shape
• removes the play function in favor of setInitialGameState which allows game state to be set when playDay(i) is called and when the component mounts (in order to load a previous win's board)
• calls to updateCellStatuses and updateLetterStatuses have been centralized into a useEffect hook rather than being duplicated from the new logic
• Keyboard receives two new props to allow the ENTER key to double as a CLEAR key when a puzzle is won so users can clear past solutions if they want to play again. I made this choice as there didn't seem like another good piece of real estate where a "Clear Solution" button could live without disrupting the flow of the current UI. With the red coloration of the CLEAR key, hopefully this feels intuitive to users. Let me know if you have other suggestions on this.

Thanks! Let me know what you think or if you have any questions.

closes #21 closes #29

[DevangThakkar]

Thanks for working on this! I'll take a look and test it out!

[DevangThakkar]

@no-stack-dub-sack I'm getting this error on entering the correct word (or six wrong guesses with 'playing' instead of 'won') .

App.js:400 Uncaught TypeError: Cannot create property 'board' on string 'won'     at App.js:400

I'm on the no-stack-dub-sack:feat/past-win-history branch.

Have you faced this error before? Can you test it out? If it works for you, can you clear the local storage (running localStorage.clear() in the console is one way) and see if it still works?

[no-stack-dub-sack]

@DevangThakkar Sorry about that, please try now... when implementing this feature, I only considered the local development experience and naively did not consider the regression impact of the changes I was making (specifically to the shape of gameStateList stored in local storage).

Before my most recent commit, local storage would have needed to be cleared for my changes to work, which obviously would've erased a user's past win history. I've addressed these changes in the easiest way possible, which is to detect if gameStateList is still an array of strings, and if so, perform a one-time update to the new shape so the rest of the code will work. Obviously if I'd considered this from the beginning, I likely would've added a new local storage item to track board state, so if this "one time update" solution feels icky to you, I can refactor to approach it this way instead. That said, I've done some testing switching from master (with plenty of gameStateList already in local storage) to the new branch and it does seem to be working well.

Some choices were made as far as wins recorded before this feature was implemented:

1. If a user solved a puzzle before we tracked board state in local storage, show the answer on the first row (since we don't know how many guesses it took them to win)
2. Along the same lines, as far as #21 is concerned, if a user solved a puzzle before we tracked board state, don't show the score next the the puzzle in the menu (we'll only show the score for puzzles solved after this was implemented)

[DevangThakkar]

Thanks for the fixes, I'll look into it! :D

[DevangThakkar]

I think this looks good - I've tested all potential cases that might cause an issue and I've not found anything that breaks. Thank you so much for working on this, I really appreciate your help!