The castles

This one is actually pretty simple since it consists of only two images and a castle-banners component that will take care of the health and food display:

1. In the world.js file, create a new castle component with two images that accepts a players and an index prop:

      Vue.component('castle', {
        template: `<p class="castle" :class="'player-' + index">
          <img class="building" :src="'svg/castle' + index + '.svg'" />
          <img class="ground" :src="'svg/ground' + index + '.svg'" />
          <!-- Later, we will add a castle-banners component here -->
        </p>`,
        props: ['player', 'index'],
      })

For this component, there is a castle and a ground image for each player; that means four images in total. For example, for the player at index 0, there are castle0.svg and the ground0.svg images.

1. In the main template, just below the top-bar component, create a new p element with the world CSS class, loop over the players to display the two castles, and add another p element with the land class:

      <p class="world">
        <castle v-for="(player, index) in players" :player="player"                 
         :index="index" />
        <p class="land" />
      </p>

In the browser, you should see one castle for each player, as follows: