<template>
    <div class="hand">
        <tile v-for="tile of this.tiles" :key="tile.id" :id="tile.tile"/>
    </div>
</template>

<script>
import Tile from '@/components/Tile.vue';

export default {
    name: 'Hand',
    components: { Tile },
    props: {
        
    },
    data(){ 
        return{
        tiles: [
            {id: 1, tile: 1},
            {id: 2, tile: 11},
            {id: 3, tile: 11},
            {id: 4, tile: 14},
            {id: 5, tile: 16},
            {id: 6, tile: 7},
            {id: 7, tile: 4},
            {id: 8, tile: 5},
            {id: 9, tile: 20},
            {id: 10, tile: 21},
            {id: 11, tile: 22},
            {id: 12, tile: 6},
            {id: 13, tile: 8},
        ]
        }
    },
    mounted(){
    }
}
</script>

<style>
.hand{
    display:flex;

}
</style>
