<template>
  <div style="display:flex;">
    <div class="pile">{{ hisNbOfHeroesIn('Hand') }}</div>
    <div class="pile2"></div>
    <div class="pile2"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters({
      hisNbOfHeroesIn: 'game/hisNbOfHeroesIn'
    })
  }
};
</script>

<style scoped>
.pile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  width: 100px;
  background-color: brown;
  color: antiquewhite;
  border: medium solid antiquewhite;
}
.pile2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  width: 20px;
  background-color: brown;
  color: antiquewhite;
  border: medium solid antiquewhite;
}
</style>
