Dynamic component

Now, it is time to put all of these into our overlay component and use the activeOverlay property we defined earlier.

1. Add the components and display them with the corresponding value of activeOverlay in the main template:

      <overlay v-if="activeOverlay">
        <overlay-content-player-turn
          v-if="activeOverlay === 'player-turn'" />
        <overlay-content-last-play
          v-else-if="activeOverlay === 'last-play'" />
        <overlay-content-game-over
          v-else-if="activeOverlay === 'game-over'" />
      </overlay>

We will remove the overlay completely if the activeOverlay property is equal to null.

Before adding the props, we will need to modify the app state in the state.js file with a few getters.

1. The first one will return the player object from the currentPlayerIndex property:

      get currentPlayer () {
        return state.players[state.currentPlayerIndex]
      },

1. The second one will return the opposing player index:

      get currentOpponentId () {
        return state.currentPlayerIndex === 0 ? 1 : 0
      },

1. Finally, the third one will return the corresponding player object:

      get currentOpponent () {
        return state.players[state.currentOpponentId]
      },

1. Now, we can add the props to the overlay contents:

      <overlay v-if="activeOverlay">
        <overlay-content-player-turn
          v-if="activeOverlay === 'player-turn'"
          :player="currentPlayer" />
        <overlay-content-last-play
          v-else-if="activeOverlay === 'last-play'"
          :opponent="currentOpponent" />
        <overlay-content-game-over
          v-else-if="activeOverlay === 'game-over'"
          :players="players" />
      </overlay>

You can test the overlays by setting the activeOverlay property in the browser console:

state.activeOverlay = 'player-turn'
state.activeOverlay = 'last-play'
state.activeOverlay = 'game-over'
state.activeOverlay = null

If you want to test the last-play overlay, you need to specify a valid value to the player lastPlayedCardId property, such as 'catapult' or 'farm'.

Our code is starting to be messy, with three conditionals. Thankfully, there is a special component that can turn itself into any component--it is the component component. You just have to set its is prop to a component name, a component definition object, or even an HTML tag, and it will morph into it:

<component is="h1">Title</component>
<component is="overlay-content-player-turn" />

It's a prop like any other, so we can use the v-bind directive to dynamically change the very nature of the component with a JavaScript expression. What if we used our activeOverlay property to do just that? Are our overlay content components conveniently named with the same 'over-content-' prefix? Take a look:

<component :is="'overlay-content-' + activeOverlay" />

That's it. Now, by changing the value of the activeOverlay property, we will change the component displayed inside the overlay.

1. After adding back the props, the overlay should look like this in the main template:

      <overlay v-if="activeOverlay">
        <component :is="'overlay-content-' + activeOverlay"
          :player="currentPlayer" :opponent="currentOpponent"
          :players="players" />
      </overlay>

Don't worry, unused props won't interfere with the different overlays workings.