<template>
    <div id="hand">
        <p>{{count()}} cartes. </p>
        <Card v-for="card in cards"
              v-bind:key="card"
              v-bind:value="card.value"
              v-bind:color="card.color"
        />
    </div>
</template>
<script>
    import Card from "./Card";

    export default {
        name: "Hand",
        components: {
            Card
        },
        props: {
            cards: Array,
        },
        methods: {
            count() {
                return this.cards.length;
            }
        }
    }
</script>
<style scoped>
    .card-pic {
        max-width: 100px;
    }
</style>