Implement player component

[Adrian-Moldovan]

Player should have

1. A name
2. An avatar (image)
3. An value for the energy level.
4. The starting energy value should be a random number between 25-75

Implement the player component

1. Display the name
2. Display the avatar
3. Display the energy value
4. The displayed energy value should use different colors (green above 50, yellow between 25-50, red below 25 )

Re-render the component once the energy value is changed

1. Implement useState to re-render the component if the energy value changes

[Adrian-Moldovan]

• [x] Use CSS classes to define the energy level.

• high-energy

• mid-energy

• low-energy

• [x] Refactor the code determining the actual color (avoid nested if-else structures containing return statements)

• [x] The player component should receive the player name and the player energy from the App.jsx component

• [x] CSS classes name should be written using kebab-case

[Adrian-Moldovan]

Code review

• [x] Import the energy level color class implemented on your branch
• [x] Change mid-level-energy color to orange
• [x] For the image dimensions, use css height and aspect-ratio properties. Also size should be rendered in rem units.
• [x] Implement an image border of 5px. The border color should be similar with the energy level color. Changing the energy level could change the border color.
• [x] Check the Player.css to remove unnecessary code