State mangement refactor and update

[Dananji]

Description

As a result of the investigation in #605 we've decided keep using React contexts for state management with the addition of custom hooks. With custom hooks we are able to break state updates and state related logic out of the UI components into separate modules.

This will allow us to;

• maintain clean components focused on populating the UI instead of handling logic
• easier maintenance of logic and state updates across the code
• get rid of unwanted re-renders in components (improved performance)
• re-use code related to state updates and logic across components

Done Looks Like

• identify state update and logic related code in each component that can be separated into custom hooks
• group these code blocks as needed to avoid duplication across custom hooks, e.g. structure-related updates and logic, player and structure related updates, etc. (there's probably a better way to group these once we've identified such code in the first step) to custom hooks
• add comments as needed, e.g. in custom hooks, in components where custom hooks are used?
• write new tests/use existing tests to build new unit test suites for each custom hook
• use React hooks to minimize re-renders
• manually test player related updated which are not covered in unit tests

[Dananji]

Try to break the work into multiple PRs for each component if possible.

[Dananji]

The new hooks and features we need to start this code work is included in React 18. The only change we would want to use to improve performance of the application that's added in React 19 is the compiler (it is still in experimental stages), which is not a blocker for us to continue with the code changes in this issue.