discard

frontend/src/components/Hand.vue

 <template>
     <div class="hand" v-if="this.Hand">
-        <tile v-for="tile of this.Hand.tiles_left" :key="tile.idobject" :id="tile.id_tuile"/>
+        <tile v-for="tile of this.Hand.tiles_left" :key="tile.idobject" :id="tile.id_tuile" @tileClicked="tileClickedListener"/>
     </div>
 </template>
 
@@ -17,28 +17,26 @@ export default {
     },
     data(){ 
         return{
-        Hand: null
+        Hand: null,
         }
     },
     mounted(){
+        let startingHand = [8,11,11,14,16,7,4,5,20,21,22,6,0];
         this.Hand= new Hand();
-        this.Hand.draw(new TileModel(8));
-        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(0));
+        startingHand.forEach(tile => {
+            this.Hand.draw(new TileModel(tile));
+        });
         this.Hand.sort(); 
-        
     },
     updated(){
+    },
+    methods: {      
+        tileClickedListener: function(tile){
+            console.log('tile clicked');
+            console.log(tile);
+            let dicarded = this.Hand.discard(tile);
+            console.log(dicarded);
+        }
     }
 }
 </script>

frontend/src/components/Tile.vue

 <template>
   <div class="tile">
-    <div class="tile-symbol" :id="this.tile.idobject">
+    <div v-on:click="tileClicked(id)" class="tile-symbol" :id="this.tile.idobject">
       <img class="tile-background" :src="this.background" :width="this.width" :height="this.height"/>
       <!--img class="tile-background" :src="this.background" :width="this.width" :height="this.height"/-->
       <svg-button class="tile-front" :svg="this.svg" :width="this.width" :height="this.height"/>
@@ -27,11 +27,16 @@ export default {
     }
   },
   mounted(){ //hook on mounted, we init the object. It could have been done before.
-  console.log(typeof(this.id));
     this.tile = new Tile(this.id);
     this.background = require("@/assets/img/mahjong-tiles/Black/Front.svg");
     this.svg = require("@/assets/img/mahjong-tiles/Black/"+ this.tile.getSVG());
-    console.log(this.svg);
+  },
+  methods: {      
+    tileClicked: function(id){
+      this.$emit('tileClicked', {
+         'id_tuile' : id
+       });
+    }
   }
 }
 </script>

frontend/src/model/HandModel.js

@@ -12,9 +12,13 @@ export default class Hand{
         this.claimed =[];
     }
 
-    discard(pos){
-        var discarded_tile = this.tiles_left.splice(pos, 1);
-        return discarded_tile;
+    discard(tile){
+        console.log('tiles_left');
+        console.log(this.tiles_left);
+        const tile_ids = this.tiles_left.map(tile => tile.id_tuile);
+        console.log(tile_ids);
+        var index = tile_ids.indexOf(tile);
+        return this.tiles_left.splice(index, 1);
     }
 
     draw(tile){