Implement a game over component

[Adrian-Moldovan]

Either treasure is found or players has 0 energy

Implement the component for displaying the game over popup.

• [x] Implement the component based on the gamePhase state (similar to Settings and Game components)
• [x] App.jsx should implement resetGame() and newGame() methods, called by clicking on corresponding button. Reset game should start the game with same settings and player, newGame() should display the Settings Compoment by changing the gamePhase State
• [x] The game over logic should be checked and implemented in either in the App.jsx or Game component.

[Miana-Neagos]

• Added GameOver component to display messages when the player finds the treasure or runs out of energy.
• Modified Game component to include the GameOver component and manage the game state.
• Updated usePlayerMovement hook to handle energy management, checking for game over conditions after each move.
• Integrated tileEnergy calculation and newPlayerEnergy variable from the "Rares" branch to accurately manage player energy after each movement.
• Refactored generateTreasure function from the "Rares" branch to ensure treasure is placed strategically on the map.
• Ensured the game logic stops further movement and actions when game over conditions are met.

[Adrian-Moldovan]

@Miaana @DianaEP

The App.jsx implements the setGamePhase() state handler. The gamePhase property should determine what component is displayed (Settings, Game, GameOver).

1. Please check how the Game and Settings components implement the decision of displaying or not the corresponding component.
2. We should refactor the game over logic by calling the setGamePhase('GAME OVER') in order to share with all App.jsx components the new game phase. The display of the GameOver component should depend of the gamePhase being equal to 'GAME OVER'
3. Clicking the popup buttons should change the gamePhase state. I would like that the implementation, upon clicking a button, to call some functions implemented in the App.jsx - resetGame() and newGame(), (similar to startGame() function )
4. The game over logic should be implemented in either App.jsx component or the Game component (in the group debate, we would prefer to be in the App.jsx)

[Miana-Neagos]

1. Game-Over Logic in App.jsx:

   • The game-over logic is now handled inside App, where updates to the player’s energy and position are passed from Game and checked immediately.
   • Game sends real-time playerEnergy and playerPosition to App through the onPlayerMove function.
     • This makes sure the evaluateGameState function always has the most up-to-date player info, so there are no delays in state updates.

2. Utility Function Refactoring:

   • Before:
     • mapFactory and playerFactory were written inside the App component, which made the code messier and less organized.
   • After:
     • These functions were moved to a separate Functions folder to clean things up and keep utility code outside of the main app.
     • This lets the App component stay focused on managing the game state and flow.

3. Simplified GameOver Component:

   • Before:
     • GameOver had a useEffect to check when the player’s energy hit zero or when the player found the treasure.
     • This made the component more complex, as it had to deal with game-over logic.
   • After:
     • The useEffect was removed, and GameOver now just listens to the gamePhase from App.
     • The game-over logic is fully handled in App, so GameOver only has to show the game-over screen and display the message it gets as a prop.