Banner bars

The other component we need is a vertical banner hanging up on one of the castle's towers. Its length will change depending on the amount of food or health. This time, we will create a dynamic SVG template so that we can modify the height of the banner.

1. First, create the component with two props (the color and the ratio) and the height computed property:

      Vue.component('banner-bar', {
        props: ['color', 'ratio'],
        computed: {
          height () {
            return 220 * this.ratio + 40
          },
        },
      })

For now, we defined our templates in two different ways--we either used the HTML of our page or we set a string into the template option of our components. We will use another method of writing component templates--a special script tag in the HTML. It works by writing the template inside this script tag with a unique ID and referencing this ID when defining the component.

1. Open the banner-template.svg file, which contains the SVG markup of the banner image we will use as a dynamic template. Copy the content of the file.
2. In the index.html file, after the <p id="app"> element, add a script tag with the text/x-template type and the banner ID, and paste the svg content inside:

      <script type="text/x-template" id="banner">
        <svg viewBox="0 0 20 260">
          <path :d="`m 0,0 20,0 0,${height} -10,-10 -10,10 z`"                    
          :style="`fill:${color};stroke:none;`" />
        </svg>
      </script>

As you can see, this is a standard template with all the syntax and directives available to use. Here, we use the v-bind directive shorthand twice. Note that you can use SVG markup inside all of your Vue templates.

1. Now, back in our component definition, add the template option with the ID of our script tag template preceded by a hashtag:

      Vue.component('banner-bar', {
        template: '#banner',
        // ...
      })

Done! The component will now look up for a scrip tag template with the banner ID in the page and will use it as its template.

1. In the castle-banners component, add the two remaining banner-bar components with the corresponding colors and ratios:

      template: `<p class="banners">
        <!-- Food -->
        <img class="food-icon" src="svg/food-icon.svg" />
        <bubble type="food" :value="player.food" :ratio="foodRatio" />
        <banner-bar class="food-bar" color="#288339" :ratio="foodRatio"        
        />

        <!-- Health -->
        <img class="health-icon" src="svg/health-icon.svg" />
        <bubble type="health" :value="player.health"                   
        :ratio="healthRatio" />
        <banner-bar class="health-bar" color="#9b2e2e"                         
       :ratio="healthRatio" />
      </p>`,

You should now see the banners that hang up on the castles and shrink if you change the food and health values.