The 'last play' overlay

This one is a bit more complex. We need a new function to get the last played card by a player. In the utils.js file, add the new getLastPlayedCard function:

function getLastPlayedCard (player) {
  return cards[player.lastPlayedCardId]
}

We can now use this function in a lastPlayedCard computed property by passing the opponent prop:

Vue.component('overlay-content-last-play', {
  template: `<p>
    <p v-if="opponent.skippedTurn">{{ opponent.name }} turn was skipped!</p>
    <template v-else>
      <p>{{ opponent.name }} just played:</p>
      <card :def="lastPlayedCard" />
    </template>
  </p>`,
  props: ['opponent'],
  computed: {
    lastPlayedCard () {
      return getLastPlayedCard(this.opponent)
    },
  },
})

Note that we are directly reusing the card component we made earlier to display the card.