ppanero / admin-war Goto Github PK

This change would require changes on:

• Players life bar percentage calculation
• Players animation calculation (i.e. when to vibrate and when to fade out)

Separate the concern from the main application. Potential API:

class Engine {
    getPlayers()
    attack(attacker, attacked)
}

some issues were encountered with state management and browser blocking on the second iteration

source: https://react-bootstrap.netlify.app/components/progress/#progress-bars

types can be created as an enumeration, in the same fashion than playerStatus

Set to false once done and re-enable button.

Modify images to reflect the pokemon type of each player

Probably coming form the animation if-then-else logic.

There are too many variables in the App state that get propagated to different components. Better separation of concerns and delegation to local component states would make for a clearer design.

Instead of "looping" or having useEffect triggered by different state updates it could be looped by setInterval. The main problem with this is that each interval needs to use the most updated state and that is not possible since useEffect needs to run for the state to be updated.

It can be updated using a callback instead of a value in the corresponding setter, e.g.:

          // eslint-disable-next-line no-shadow
          setPlayerLives((playerLives) => ({
            ...playerLives,
            [enemyName]: playerLives[enemyName] - 1,
          }));

But accesing calls will still get the old values.

source: https://react-bootstrap.netlify.app/components/modal/#modals

Since attacks will happen more frequently, we would need to display them somewhere in order not to lose track. This could be a separate panel on the application, or e.g. via Twitter.

Achieve a more natural usage of the PlayerStatus "enum". Meaning dot notation (e.g. PlayerStatus.HIT) rather than a function call.
One option, that would be desired to avoid, is using typescript.

Currently, the hero (bottom) is always attacking the enemy (top). We want to randomize who of the chosen ones attacks.

Include a visualization of the 4 attacks, similar to what the base project had.

Initially, the pokemons would be "hidden", displaying the silhouette image. Once they have appeared in the main battlefield the image would change by the non-silhouette one.

Is there a way to achieve this with a PlayersPanel local state ( + callbacks?) instead of creating yet another "global" variable in App?

Seems to be the fact of not clearing timeouts and them being stacked/triggered forever (memory leak?):

useEffect(() => {
    const timer = () => setTimeout(() => ...some work ... , 2000);
    const timerId = timer();
    return () => {
      clearTimeout(timerId);
    };
  });

There is no need to clear timeouts unless you want to clear them early. However, it is a good practice to avoid memory leaks, for example in case that the component unmounts. The function returned by useEffect is the one that will be run on unmount.