Vue.js 2 Web Development Projects

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: `<div 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 -->        </div>`,        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 ...