All the cards are described in the card definition objects, declared in the cards.js file. You can open it, but you shouldn't have to modify its content. Each card definition has the following fields:

• id: Unique for each card
• type: Changes the color background to help distinguish the cards from each other
• title: The displayed name of the card
• description: An HTML text explaining what the card does
• note: An optional flavor text, in HTML too
• play: The function we will call when the card is played

We need a new component to display any card, either in the player hand or in the overlay, that describes what the opponent played last turn. It will look like this:

1. In the components/ui.js file, create a new card component:

      Vue.component('card', {
        // Definition here
      })

2. This component will receive a def prop that will be the card definition object we described above. Declare it with the props option as we did for the top-bar component:

      Vue.component('card', {
        props: ['def'],
      })

3. Now, we can add the template. Start with the main div element, with the card class:

      Vue.component('card', {
        template: `<div class="card">
        </div>`,
        props: ['def'],
      })

4. To change the background color depending on the card type, add a dynamic CSS class that uses the type property of the card object:

      <div class="card" :class="'type-' + def.type">

For example, if the card has the 'attack' type, the element will get the type-attack class. Then, it will have a red background.

5. Now, add the title of the card with the corresponding class:

      <div class="card" :class="'type-' + def.type">
        <div class="title">{{ def.title }}</div>
      </div>

6. Add the separator image, which will display some lines between the card title and the description:

      <div class="title">{{ def.title }}</div>
      <img class="separator" src="svg/card-separator.svg" />

After the image, append the description element.

7. Use the v-html directive to display the description:

      <div class="description"><div v-html="def.description"></div>             
      </div>

8. Finally, add the card note (which is also in an HTML-formatted text). Note that some cards don't have note, so we have to use the v-if directive here:

      <div class="note" v-if="def.note"><div v-html="def.note"></div>        
      </div>

The card component should now look like this:

Vue.component('card', {
  props: ['def'],
  template: `<div class="card" :class="'type-' + def.type">
    <div class="title">{{ def.title }}</div>
    <img class="separator" src="svg/card-separator.svg" />
    <div class="description"><div v-html="def.description"></div></div>
    <div class="note" v-if="def.note"><div v-html="def.note"></div></div>
  </div>`,
})

Now, we can try our new card component in the main application component.

9. Edit the main template as follows and add a card component just after the top bar:

      template: `<div id="#app">
        <top-bar :turn="turn" :current-player-             
         index="currentPlayerIndex" :players="players" />
        <card :def="testCard" />
      </div>`,

10. We also need to define a temporary computed property:

      computed: {
        testCard () {
          return cards.archers
        },
      },

Now, you should see a red attack card with a title, description, and flavor text: