The 'player turn' overlay

The first overlay will display two different messages to the current player, depending on whether it is skipping their turn or not. The player prop will receive the current player so that we can access its data. We will use a v-if directive paired with a v-else directive and the skipTurn property we just added to the players:

      Vue.component('overlay-content-player-turn', {
        template: `<p>
          <p class="big" v-if="player.skipTurn">{{ player.name }},      <br>your turn is skipped!</p>
          <p class="big" v-else>{{ player.name }},<br>your turn has       come!</p>
          <p>Tap to continue</p>
        </p>`,
        props: ['player'],
      })