<template>
    <div class="hand" v-if="this.Hand">
        <tile v-for="tile of this.Hand.tiles_left" :key="tile.idobject" :id="tile.id_tuile"/>
    </div>
</template>

<script>
import Tile from '@/components/Tile.vue';
import TileModel from '@/model/TileModel.js';
import Hand from '@/model/HandModel.js';

export default {
    name: 'Hand',
    components: { Tile },
    props: {
        
    },
    data(){ 
        return{
        Hand: new Hand()
        }
    },
    mounted(){
            this.Hand.draw(new TileModel('0'));
            /*this.Hand.draw(new TileModel('11'));
            this.Hand.draw(new TileModel('11'));
            this.Hand.draw(new TileModel('14'));
            this.Hand.draw(new TileModel('16'));
            this.Hand.draw(new TileModel('7'));
            this.Hand.draw(new TileModel('4'));
            this.Hand.draw(new TileModel('5'));
            this.Hand.draw(new TileModel('20'));
            this.Hand.draw(new TileModel('21'));
            this.Hand.draw(new TileModel('22'));
            this.Hand.draw(new TileModel('6'));
            this.Hand.draw(new TileModel('8'));*/
        
    },
    updated(){
    }
}
</script>

<style>
.hand{
    display:flex;

}
</style>
