<template>
  <div class="hello">
        <h1>{{ id }}</h1>
  <button class="tile-symbol">
    <img :src="this.background" :width="this.width" :height="this.height"/>
    <img :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: null, //our tile object
      svg: 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());
    console.log(this.svg);
  }
}
</script>

<style>
.tile-symbol{
    border-radius: 10px;
    background: transparent;
    border: none;
}
</style>
