The castle banners will display the health and food for the castle. There will be two components inside the castle-banners component:

• A vertical banner whose height changes, depending of the amount of the stat
• A bubble with the actual number displayed

It will look like this:

1. First, create a new castle-banners component with only the stat icons and a player prop:

      Vue.component('castle-banners', {
        template: `<div class="banners">
          <!-- Food -->
          <img class="food-icon" src="svg/food-icon.svg" />
          <!-- Bubble here -->
          <!-- Banner bar here -->

          <!-- Health -->
          <img class="health-icon" src="svg/health-icon.svg" />
          <!-- Bubble here -->
          <!-- Banner bar here -->
        </div>`,
        props: ['player'],
      })

2. We also need two computed properties that calculate the health and food ratios:

      computed: {
        foodRatio () {
          return this.player.food / maxFood
        },
        healthRatio () {
          return this.player.health / maxHealth
        },
      }

3. In the castle component, add the new castle-banners component:

      template: `<div class="castle" :class="'player-' + index">
        <img class="building" :src="'svg/castle' + index + '.svg'" />
        <img class="ground" :src="'svg/ground' + index + '.svg'" />
        <castle-banners :player="player" />
      </div>`,