Building the user interface

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.

Our first component - the top bar

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:

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 app
var state = {
  // World
  worldRatio: getWorldRatio(),
  // Game
turn: 1,
players: [
    {
      name: 'Anne...