<template>
  <div class="scrolling-wrapper-flexbox">
    <div style="display:flex;" v-if="myHeroesIn('Hand').length === 0">
      <div class="pile">0</div>
      <div class="pile2"></div>
      <div class="pile2"></div>
    </div>
    <hero
      v-else
      :add-style="{ flex: '0 0 auto', 'margin-right': '3px' }"
      v-for="hero in myHeroesIn('Hand')"
      :key="hero.id"
      :hero="hero"
      :selectable="false"
      :removable="false"
    ></hero>
  </div>
</template>

<script>
import Hero from '../../../common/heroes-display/components/Hero';
import { mapGetters } from 'vuex';
export default {
  components: {
    Hero
  },
  computed: {
    ...mapGetters({
      myHeroesIn: 'game/myHeroesIn'
    })
  }
};
</script>

<style scoped>
.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.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>
