<template>
  <div id="hand" class="mr-5 ml-5">
    <h3>Tu as <b>{{ count() }}</b> cartes en main.</h3>
    <b-card-group deck v-if="cards.length > 0">
      <Card
        v-for="card in cards"
        v-bind:key="card.value + ' ' + card.color"
        v-bind:value="card.value"
        v-bind:color="card.color"
      />
    </b-card-group>
  </div>
</template>
<script>
import Card from "./Card";

export default {
  name: "Hand",
  components: {
    Card
  },
  props: {
    cards: Array
  },
  methods: {
    count() {
      return this.cards.length;
    }
  }
};
</script>