This component contains an image and a text that displays the current amount for either the food or health of the castle. Its position will change depending on this amount--it will go up as the amount diminishes and will go down when it replenishes.

We will need three props for this component:

• type is either food or health; it will used for the CSS class and for the image path
• value is the amount displayed in the bubble
• ratio is the amount divided by the maximum amount

We also need a computed property to calculate the vertical position of the bubble with the ratio prop. The position will range from 40 pixels to 260 pixels. So, the position value will be given by this expression:

(this.ratio * 220 + 40) * state.worldRatio + 'px'

1. Let's write our new bubble component:

      Vue.component('bubble', {
        template: `<div class="stat-bubble" :class="type + '-bubble'"               
        :style="bubbleStyle">
          <img :src="'svg/' + type + '-bubble.svg'" />
          <div class="counter">{{ value }}</div>
        </div>`,
        props: ['type', 'value', 'ratio'],
        computed: {
          bubbleStyle () {
            return {
              top: (this.ratio * 220 + 40) * state.worldRatio + 'px',
            }
          },
        },
      })

It has a root div element with the stat-bubble CSS class, a dynamic class (either 'food-bubble' or 'health-bubble', depending on the type prop value) plus a dynamic CSS style we set with the bubbleStyle computed property.

It contains an SVG image, which is not the same for food and health, and a div element with the counter class that displays the amount.

2. Add a food and an health bubble to the castle-banners component:

      template: `<div class="banners">
        <!-- Food -->
        <img class="food-icon" src="svg/food-icon.svg" />
        <bubble type="food" :value="player.food" :ratio="foodRatio" />
        <!-- Banner bar here -->

        <!-- Health -->
        <img class="health-icon" src="svg/health-icon.svg" />
        <bubble type="health" :value="player.health"             
      :ratio="healthRatio" />
        <!-- Banner bar here -->
      </div>`,