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>

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

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

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

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

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

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

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

5. 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

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.

6. 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>