Before creating the component, we need some new data properties:

• turn: The number of the current turn; starts at 1
• players: The array of player objects
• currentPlayerIndex: The index of the current player in the players array

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 of Cleves',
    },
    {
      name: 'William the Bald',
    },
  ],
  currentPlayerIndex: Math.round(Math.random()),
}

We will use these properties to display the player names and the turn counter in the top bar.