snphillips / twohue Goto Github PK

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

-Start screen has three?

If user clicks on "play again" button before the leaderboard displays, the game resets for a second, THEN the leaderboard displays (which hides the game). The button disappears too. Player is stuck.

Possible Solutions:

• hide button during game over transition
• skip the whole game over transition and go straight to leaderboard

Right now it's hard to tell that a name got added.

Many times in the app I am using useEffect as a 'subscription'. This ticket involves reconsidering all times I am using it, and finding other solutions.

1. when round changes
2. when attempt changes
3. when lostRounds changes
4. when gameState changes

"useEffect is best used for side-effects, but here you're using it as a sort of "subscription" concept, like: "do X when Y changes". That does sort of work functionally, due to the mechanics of the deps array, but it's not the intended purpose."
https://stackoverflow.com/questions/58866796/understanding-the-react-hooks-exhaustive-deps-lint-rule]

Further reading:
https://react.dev/learn/you-might-not-need-an-effect

How to remove unnecessary Effects
There are two common cases in which you don’t need Effects:

You don’t need Effects to transform data for rendering. For example, let’s say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update the state, React will first call your component functions to calculate what should be on the screen. Then React will “commit” these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect also immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change.
You don’t need Effects to handle user events. For example, let’s say you want to send an /api/buy POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don’t know what the user did (for example, which button was clicked). This is why you’ll usually handle user events in the corresponding event handlers.

• Create node/express project
• Create database (Postgres?)
• one table (name, score, cookie?)

react_devtools_backend.js:4061 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input

Don't know why the form isn't clearing

Nothing happens if user can't add a new inductee to the leaderboard. User just hammers away at submit button.
Come up with and implement a solution. This happens when Heroku is doing maintenance or when user tries to add name longer than 12 characters

To replicate:

• play game get a high score
• when presented with leaderboard, try to add name longer than 13 characters

I'm relying too much on sound cues to indicate wins/loses. Come up and code better solutions.

Currently have setDisplayLeaderboardForm('none')on line 761, in the handleSubmit.
Also trying line 365 in axiosPostNewLeaderboardInductee()