Merge branch 'master' of http://gvipers.imt-lille-douai.fr/QVrel/projet-cdaw

frontend/src/components/Hand.vue

 <template>
     <div class="hand">
-        <tile v-for="tile of this.tiles" :key="tile.id" :id="tile.id"/>
+        <tile v-for="tile of this.tiles" :key="tile.id" :id="tile.tile"/>
     </div>
 </template>
 
@@ -16,19 +16,19 @@ export default {
     data(){ 
         return{
         tiles: [
-            {id: 1},
-            {id: 11},
-            {id: 11},
-            {id: 14},
-            {id: 16},
-            {id: 7},
-            {id: 4},
-            {id: 5},
-            {id: 20},
-            {id: 21},
-            {id: 22},
-            {id: 6},
-            {id: 8},
+            {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},
         ]
         }
     },

frontend/src/components/Tile.vue

 <template>
   <div class="tile">
-    <button class="tile-symbol" :id="this.tile.idobject">
+    <div class="tile-symbol" :id="this.tile.idobject">
       <img class="tile-background" :src="this.background" :width="this.width" :height="this.height"/>
-      <img class="tile-front" :src="this.svg" :width="this.width" :height="this.height"/>
-    </button>
+      <!--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"/>
+    </div>
   </div>
 </template>
 
 <script>
 import Tile from '@/model/Tile.js'
+import SvgButton from './SvgButton.vue';
 
 export default {
+  components: { SvgButton },
   props: {
     id: Number,
     width: { type: [Number, String], default: 80 },
@@ -34,18 +37,24 @@ export default {
 </script>
 
 <style>
+.tile {
+  
+  height: 1px;
+}
 .tile-symbol{
-  width: 50%;
+  height: 1px;
     border-radius: 10px;
     background: transparent;
     border: none;
-    display: contents;
+    display: inline-block;
+}
+.tile-background{
+    display: inline-block;
 }
 .tile-front{
-    display: table-caption;
-
-  transform: translateX(-100%);   
-  -webkit-transform: translateX(-100%);
+  margin: 0;
+  padding: 0;
+    display: inline-block;
   transform: translateY(-100%);   
   -webkit-transform: translateY(-100%);