ScoreBoard component

[perennialAutodidact]

The ScoreBoard component will render a PlayerHUD component for each component and manage the widths of each of the PlayerHUD components as the players' turns rotate. The PlayerHUD component for the current player will extend to take up the majority of the width of the ScoreBoard. This can be achieved using Flexbox's flex-grow, flex-shrink and flex-basis properties.

Eventually, the width changes will be animated using GSAP, but there will be a different issue created for that later.

The current player will be stored in the game.currentPlayer value of the GameContext (e.g. if game.currentPlayer is set to 1, it will render as if it's player 1's turn, if game.currentPlayer is set to 2, it will render as if it is player 2's turn). For now, the component should render using the static value in the context. There will be another issue for switching player turns.

[perennialAutodidact]

For now, the player HUD components can each take up 50% of the available width.