Vue.js 2 Web Development Projects

Adding some gameplay data to the state

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 appvar state = {  // World  worldRatio: getWorldRatio(),  // Game  turn: 1,  players: [    {      name: 'Anne of Cleves',    },    {      name: 'William the Bald',    },  ],  currentPlayerIndex: Math.round(Math.random()),}

Math.round(Math.random()) will use 0 or 1 randomly to choose who goes first.

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