Moving the player should re-render the map

[Adrian-Moldovan]

DESCRIPTION

Pressing the arrow keys should change the player position by changing the map.playerPosition property. For now, we will not implement the energy level consumption and bonus / penalties after moving on a new tile.

REQUIREMENTS

• [x] Implement a document.keyup event handler for arrows keys (up, down, left, right).
• [x] Left arrow should move the player one column to the left. If player is on first column, , it doesn't move
• [x] Right arrow should move the player one column to the right. If player is on the last column, it doesn't move
• [x] Up arrow should move the player one row up. If player is on first row, it doesn't move
• [x] Down arrow should move the player one row down. If player is on the last row, it doesn't move
• [x] Changing the player position should redraw the map

[Miana-Neagos]

Update player position and mark tiles as visited on arrow key press

• Implemented keydown event listener to handle arrow key presses
• Updated player position based on arrow key input
• Marked tiles as visited when the player moves to a new position
• Ensured map state is updated and re-rendered appropriately

[Miana-Neagos]

Created custom hook usePlayerMovement to handle player movement logic

• Encapsulated player movement logic and event handling within a custom hook
• Used useEffect to manage key event listeners for player movement
• Updated App component to utilize the new usePlayerMovement hook
• Separated player movement logic from App component

[Adrian-Moldovan]

Fix displaying the player position on the game start. Currently the starting map tile is unvisited.

[Adrian-Moldovan]

@Miaana @DianaEP @RaresGherasim

REQUIREMENT 1

Check the code on userPlayerMovement.jsx file. Upon pressing an arrow key, the setMap() state management should only be called if the player actually moves.

IMPLEMENTATION The event handler function code should first asses if the player can move (if the map allows it, if the player has the energy) and only then call the setMap() state handler should be be called

REQUIREMENT 2

I would prefer to call separately the setMap() and setPlayer() state handlers - currently the setMap() calls the setPlayer() state handler. In my opinion, this implementation should describe more clearly the business logic layer.

REQUIREMENT 3

Check if the logic can be placed in the Game.jsx file

[Miana-Neagos]

1. Handling Player Movement (Requirement 1)

   • Before: setMap was called on every arrow key press, even if the player didn’t move.
   • After: handlePlayerMove is only triggered if the player actually changes position, reducing unnecessary updates.

2. Separating setMap and setPlayer (Requirement 2)

   • Before: setMap also triggered setPlayer, mixing state updates.
   • After: setMap and setPlayer are called separately in Game.jsx, making the logic cleaner and easier to follow.

3. Moving Logic to Game.jsx (Requirement 3)

   • Before: Most game logic was in the usePlayerMovement hook, making it harder to track.
   • After: The main logic is now in Game.jsx, with usePlayerMovement handling only key presses and movement triggers.

[Adrian-Moldovan]

@Miaana is on fire! Unstoppable!