twelve-heroes/src/common/heroes-display/HeroesDisplay.vue

<template>
  <div>
    <heroes-selector
      v-if="selectHeroes"
      :factionSelected="factionSelected"
    ></heroes-selector>
    <hr />
    <h4 v-if="areHeroesSelectable">Select Heroes from below</h4>
    <div v-if="noFilter === false">
      <button class="btn btn-primary" @click="showFilter = !showFilter">
        Show/Hide filter
      </button>
      <button class="btn btn-primary" @click="resetFilter">
        Reset filter
      </button>
      <heroes-filter
        v-if="showFilter"
        :filter-options="filterOptions"
        v-model="filter"
      ></heroes-filter>
    </div>
    <div
      class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 mt-3"
    >
      <div class="col mb-4" v-for="hero in heroesToDisplay" :key="hero.id">
        <hero
          :hero="hero"
          :selectable="areHeroesSelectable"
          :removable="false"
        ></hero>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Hero from './components/Hero';
import HeroesFilter from './components/HeroesFilter';
import HeroesSelector from './components/HeroesSelector';
import { Constants } from 'const/constants';

let initialFilter = function(filterOptions) {
  return {
    minPower: 0,
    maxPower: 6,
    minCost: 0,
    maxCost: 7,
    faction: filterOptions.faction[0],
    popularity: filterOptions.popularity[0],
    draft: filterOptions.draft[0],
    name: '',
    byName: false
  };
};

export default {
  // selectHeroes : if true it means we are not just displaying the cards
  // we need to offer a way to user to select heroes based on current game mode
  props: {
    selectHeroes: {
      type: Boolean,
      default: false
    },
    display12heroesOnly: {
      type: Boolean,
      default: false
    },
    noFilter: {
      type: Boolean,
      default: false
    },
    displayCustomListOfHeroes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showFilter: this.selectHeroes === true && this.deckMode === 'faction',
      filter: {
        minPower: 0,
        maxPower: 6,
        minCost: 0,
        maxCost: 7,
        faction: '',
        popularity: '',
        draft: '',
        name: '',
        byName: false,
        byId: []
      }
    };
  },
  components: {
    Hero,
    HeroesFilter,
    HeroesSelector
  },
  computed: {
    ...mapGetters({
      filterHeroes: 'game/filterHeroes',
      allHeroes: 'game/allHeroes',
      deckMode: 'game/deckMode',
      isPopularityRule: 'game/isPopularityRule',
      myColor: 'game/myColor',
      getSelectableDraftIds: 'game/myDraftIds',
      myTwelveHeroes: 'game/myTwelveHeroes',
      chosenIds: 'chosenIds',
      isItMyTurn: 'game/isItMyTurn'
    }),
    filterOptions() {
      // init filter options will all
      let factionFilter = ['all', 'orcs', 'humans', 'elves', 'meca', 'none'];
      let popularityFilter = ['without', 'with'];
      let draftFilter = ['all', 'yes', 'no'];
      if (this.selectHeroes === true) {
        draftFilter = ['all'];
        // if tournament and pop rule ON, let's authorize to select between all golems
        if (this.isPopularityRule === true && this.deckMode !== 'tournament') {
          popularityFilter = ['with'];
        } else if (this.isPopularityRule === false) {
          popularityFilter = ['without'];
        }
        if (this.deckMode === 'faction') {
          factionFilter = ['orcs', 'humans', 'elves', 'meca'];
        }
      }
      if (this.display12heroesOnly === true) {
        popularityFilter = ['none'];
      }
      return {
        faction: factionFilter,
        popularity: popularityFilter,
        draft: draftFilter,
        power: true,
        cost: true,
        byName: true
      };
    },
    heroesToDisplay() {
      //Possibility here to display heroes we want
      if (this.displayCustomListOfHeroes.length > 0) {
        return this.displayCustomListOfHeroes;
      }
      if (this.display12heroesOnly === true) {
        return this.myTwelveHeroes;
      }
      if (this.selectHeroes === true) {
        return this.filterHeroes(
          this.filter,
          this.deckMode === 'draft' || this.deckMode === 'tournament'
        );
      } else {
        return this.allHeroes;
      }
    },
    factionSelected() {
      return this.filter.faction;
    },
    areHeroesSelectable() {
      if (this.selectHeroes === true && this.isItMyTurn === true) {
        if (
          (this.deckMode === 'draft' &&
            this.chosenIds.length < Constants.NB_CARDS_TO_PICK_DRAFT) ||
          (this.deckMode === 'tournament' &&
            this.chosenIds.length < Constants.NB_CARDS_TO_PICK_TOURNAMENT)
        ) {
          return true;
        }
      }
      return false;
    }
  },
  methods: {
    resetFilter() {
      Object.assign(this.filter, initialFilter(this.filterOptions));
    }
  },
  created() {
    Object.assign(this.filter, initialFilter(this.filterOptions));
    this.showFilter = this.selectHeroes === true && this.deckMode === 'faction';
  },
  watch: {
    'filter.byName'(newValue) {
      if (newValue === false) {
        this.filter.name = '';
      }
    }
  }
};
</script>

<style scoped>
div {
  color: antiquewhite;
}
</style>