Mastermind game built w/ React hooks - feedback on UI / code please!

Mastermind game built w/ React hooks - feedback on UI / code please!
0

Hey all!

Would love feedback on a Mastermind code-breaking game I built using React hooks.

Link: www.mastermind-lily.netlify.com
Steps to run locally: https://github.com/lilyhoratio/mastermind

  • The game has a bug in the Netlify deploy but not when run locally - a small Pacman ghost should animate in the bottom left when the user inputs something invalid (e.g. enters non-digits, enters a digit not between 0-7, submits a code over 4 digits). I have not been able to figure out why the animation works locally, but not on Netlify. The DOM seems to sense the image and the className updates correctly, but the image is not appearing for whatever reason.

  • Would love feedback on the best way to make the API call reusable (it sets a variable called code). I broke the call out into a custom hook (services/hooks.js). The API call is made in <App/> and then I would like to call it again in the < GameStats/> component when the user clicks the “Generate new code” button, but when I try to use the custom hook in < GameStats/>, I get an error that the variable code is already being used. Is it not best practice to pass down the code variable from while resetting the state in another child component?

  • Any tips on making this code more DRY is also appreciated!

Thank you :slight_smile: