Displaying a card

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
      })

1. 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'],
      })

1. Now, we can add the template. Start with the main p element, with the card class:

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

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

      <p 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.

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

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

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

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

After the image, append the description element.

Note that since the description property of the card object is an HTML-formatted text, we need to use the special v-html directive introduced in the Chapter 2, Markdown Notebook.

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

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

You may have noted that we added a nested p element, which will contain the description text. This is to center the text vertically using CSS flexbox.

1. 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:

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

The card component should now look like this:

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

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

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

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

1. 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: