tile rendering test

frontend/src/components/Tile.vue

 <template>
   <div class="tile">
-    <button class="tile-symbol">
+    <button class="tile-symbol" :id="this.id">
       <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>
@@ -18,8 +18,9 @@ export default {
   },
   data(){ //data must be a function 
     return{
-      tile: null, //our tile object
+      tile: {type: Tile}, //our tile object
       svg: null,
+      background: null
     }
   },
   mounted(){ //hook on mounted, we init the object. It could have been done before.
@@ -27,6 +28,7 @@ export default {
     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());
+    this.id = this.tile.idobject;
     console.log(this.svg);
   }
 }
@@ -34,12 +36,20 @@ export default {
 
 <style>
 .tile-symbol{
+  width: 50%;
     border-radius: 10px;
     background: transparent;
     border: none;
+    display: contents;
 }
 .tile-front{
-  position: relative;
+    display: table-caption;
+
   transform: translateX(-100%);   
+  -webkit-transform: translateX(-100%);
+  transform: translateY(-100%);   
+  -webkit-transform: translateY(-100%);
+  
+
 }
 </style>