Vue.js 2 Web Development Projects

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: `<div>    <div v-if="opponent.skippedTurn">{{ opponent.name }} turn was skipped!</div>    <template v-else>      <div>{{ opponent.name }} just played:</div>      <card :def="lastPlayedCard" />    </template>  </div>`,  props: ['opponent'],  computed: {    lastPlayedCard () {      return getLastPlayedCard(this.opponent)    },  },})

Note that we are directly reusing the ...