The hand

Our next component will be the current player hand, holding the five cards they have. It will be animated with a 3D transition and will also be responsible for the card animations (when the card is drawn, and when it is played).

1. In the components/ui.js file, add a component registration with the 'hand' ID and a basic template, with two p elements:

      Vue.component('hand', {
        template: `<p class="hand">
          <p class="wrapper">
            <!-- Cards -->
          </p>
        </p>`,
      })

The wrapper element will help us position and animate the cards.

Each card in the hand will be represented by an object. For now, it will have the following properties:

• id: The card definition unique identifier
• def: The card definition object

As a reminder, all the card definitions are declared in the cards.js file.

1. Our hand component will receive these card objects representing the player hand via a new array prop called cards:

      Vue.component('hand', {
        // ...
        props: ['cards'],
      })

1. We can now add the card components with the v-for directive:

      <p class="wrapper">
        <card v-for="card of cards" :def="card.def" />
      </p>

1. To test our hand component, we will create in the app state a temporary property called testHand (in the state.js file):

      var state = {
        // ...
        testHand: [],
      }

1. Add a createTestHand method in the main component (in the main.js file):

      methods: {
        createTestHand () {
          const cards = []
          // Get the possible ids
          const ids = Object.keys(cards)

          // Draw 5 cards
          for (let i = 0; i < 5; i++) {
            cards.push(testDrawCard())
          }

          return cards
        },
      },

1. To test the hand, we also need this temporary testDrawCard method that simulates a random card draw:

      methods: {
        // ...
        testDrawCard () {
          // Choose a card at random with the ids
          const ids = Object.keys(cards)
          const randomId = ids[Math.floor(Math.random() * ids.length)]
          // Return a new card with this definition
          return {
            // Unique id for the card
            uid: cardUid++,
            // Id of the definition
            id: randomId,
            // Definition object
            def: cards[randomId],
          }
        }
      }

1. Use the created lifecycle hook to initialize the hand:

      created () {
        this.testHand = this.createTestHand()
      },

cardUid is a unique identifier on cards drawn by the players that will be useful to identify each of the cards in the hand, because many cards can share the exact same card definition, and we will need a way to differentiate them.

1. In the main template, add the hand component:

      template: `<p id="#app">
        <top-bar :turn="turn" :current-player-           
         index="currentPlayerIndex" :players="players" />
        <hand :cards="testHand" />
      </p>`,

The result in your browser should look like this: