<template>
  <div class="col-md-12 ">
    <div class="card card-default box-game " tabindex="0">
      <h5 class="card-title">{{ gameElement | getGameTitle }}</h5>
      <h6 class="card-subtitle mb-2 text-muted">
        {{ gameElement | getGameInfo }}
      </h6>
    </div>
  </div>
</template>

<script>
export default {
  props: ['game-element'],
  filters: {
    getGameTitle(gameEl) {
      let title = '';
      if (gameEl.player2 !== '') {
        title = `Resume ${gameEl.player1} VS ${gameEl.player2}`;
      } else {
        title = `${gameEl.player1} waiting...`;
      }
      return title;
    },
    getGameInfo(gameEl) {
      let desc = '';
      let rules = '';
      if (gameEl.adv_rules.length !== 0) {
        gameEl.adv_rules.forEach((rule, index) => {
          if (index === 0) {
            rules += rule;
          } else {
            rules += ' + ' + rule;
          }
        });
      } else {
        rules = 'no advandced rules';
      }
      desc = `${gameEl.deck} | ${rules}`;
      return desc;
    }
  }
};
</script>

<style scoped>
.box-game {
  cursor: pointer;
}
.box-game:hover {
  background-color: lightblue;
}
.box-game:focus {
  border: 1px solid blue;
  background-color: lightblue;
  outline: none;
}
</style>
