Content distribution with slots

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 p elements:

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

1. Add a click event listener on the .overlay p, which calls the handleClick method:

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

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

1. Now, put a <slot> element inside the .content p:

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

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:

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

It works with anything, so you can also put HTML or Vue components, and it will still work the same way!

1. 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 ping into these, we need a bit more data about the two players in our state.

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