The 'game over' overlay

For this one, we will create another component called player-result that will show whether a player is victorious or defeated. We will display the name of the player passed with a prop. We will compute the result for this player with a computed property, which we will also use as a dynamic CSS class:

Vue.component('player-result', {
  template: `<p class="player-result" :class="result">
    <span class="name">{{ player.name }}</span> is
    <span class="result">{{ result }}</span>
  </p>`,
  props: ['player'],
  computed: {
    result () {
      return this.player.dead ? 'defeated' : 'victorious'
    },
  },
})

Now, we can create the game over overlay by looping over the players props and using the player-result component:

Vue.component('overlay-content-game-over', {
  template: `<p>
    <p class="big">Game Over</p>
    <player-result v-for="player in players" :player="player" />
  </p>`,
  props: ['players'],
})