The first components we will create are part of the UI layer. There will be a top bar with the players' names and a turn counter, the cards with their name and description, the hand with the current player cards, and the three overlays.
The top bar, our first component, will be placed at the top of the page and will display the names of the two players and a turn counter in the middle. It will also show an arrow facing the name of the player currently taking their turn.
It will look like this:
Before creating the component, we need some new data properties:
turn: The number of the current turn; starts at 1players: The array of player objectscurrentPlayerIndex: The index of the current player in theplayersarray
Add them in the state in the state.js file:
// The consolidated state of our app
var state = {
// World
worldRatio: getWorldRatio(),
// Game
turn: 1,
players: [
{
name: 'Anne...