It would be very convenient if we could put contents inside the overlay component in the main template, like this:

<overlay>
  <overlay-content-player-turn />
</overlay>

We would encapsulate additional layout and logic inside the overlay component while still being able to put any content inside. This is done through a special element--the <slot>.

1. Let's create our overlay component with two div elements:

      Vue.component('overlay', {
        template: `<div class="overlay">
          <div class="content">
            <!-- Our slot will be there -->
          </div>
        </div>`,
      })

2. Add a click event listener on the .overlay div, which calls the handleClick method:

      <div class="overlay" @click="handleClick">

3. Then, add the mentioned method where we emit a custom 'close' event:

      methods: {
        handleClick () {
          this.$emit('close')
        },
      },

This event will be helpful to know when to switch from one overlay to the next at the start of the turn.

4. Now, put a <slot> element inside the .content div:

      template: `<div class="overlay" @click="handleClick">
        <div class="content">
          <slot />
        </div>
      </div>`,

Now, if we put something between the overlay tags when using our component, it will be included in the DOM and replace the <slot> tag. For example, we could do this:

<overlay>
  Hello world!
</overlay>

Also, it will render like this in the page:

<div class="overlay">
  <div class="content">
    Hello world!
  </div>
</div>

5. The component is ready to be used in the main template, so add it at the end:

      <overlay>
        Hello world!
      </overlay>

Each of the three overlay contents will be a separate component:

• overlay-content-player-turn shows the beginning of the turn
• overlay-content-last-play displays the last card played by the opponent
• overlay-content-game-over shows when the game is over

Before diving into these, we need a bit more data about the two players in our state.

6. Go back to the state.js file and add the following properties for each player:

      // Starting stats
      food: 10,
      health: 10,
      // Is skipping is next turn
      skipTurn: false,
      // Skiped turn last time
      skippedTurn: false,
      hand: [],
      lastPlayedCardId: null,
      dead: false,

You should now have two items in the players array with the same properties, expect for the player names.