vudash/vudash

<div class="vudash-health">
  <div class="value">
    <img alt="heart {{ heart }}" ref:heartbeat src="{{ heart }}" />
  </div>
  <div class="label">
    Health
  </div>
</div>

<style>
  .vudash-health > * {
    text-align: center;
    width: 100%;
  }

  .label {
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    font-weight: bold;
  }

  .value {
    height: 80px;
    display: block;
  }

  .value > img {
    transition: width 0.5s, height 0.5s;
    color: rgb(255,105,94);
  }
</style>

<script>
  import heart from '../images/heart.svg'

  export default {
    data () {
      return {
        heart: heart,
        size: '92'
      }
    },

    methods: {
      update ({ meta, data }) {
        this.set({ size: data.on ? '92' : '56' })
        this.refs.heartbeat.width = this.get('size')
        this.refs.heartbeat.height = this.get('size')
      }
    }
  }
</script>