<template>
  <div class="tile">
    <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>
  </div>
</template>

<script>
import Tile from '@/model/Tile.js'

export default {
  props: {
    id: Number,
    width: { type: [Number, String], default: 80 },
    height: {type: [Number, String], default: 80 }
  },
  data(){ //data must be a function 
    return{
      tile: {type: Tile}, //our tile object
      svg: null,
      background: null
    }
  },
  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());
    this.id = this.tile.idobject;
    console.log(this.svg);
  }
}
</script>

<style>
.tile-symbol{
  width: 50%;
    border-radius: 10px;
    background: transparent;
    border: none;
    display: contents;
}
.tile-front{
    display: table-caption;

  transform: translateX(-100%);   
  -webkit-transform: translateX(-100%);
  transform: translateY(-100%);   
  -webkit-transform: translateY(-100%);
  

}
</style>
