client/src/components/GameList.vue

   1 <template lang="pug">
   2 table
   3   tr
   4     th(v-if="showVariant") Variant
   5     th Players names
   6     th Cadence
   7     th(v-if="showResult") Result
   8   tr(v-for="g in games" @click="$emit('show-game',g)")
   9     td(v-if="showVariant") {{ g.vname }}
  10     td
  11       span(v-for="p in g.players") {{ p.name }}
  12     td {{ g.mainTime }} + {{ g.increment }}
  13     td(v-if="showResult") {{ g.score }}
  14 </template>
  15
  16 <script>
  17 export default {
  18   name: "my-game-list",
  19     props: ["games"],
  20     computed: {
  21         showVariant: function() {
  22             return this.games.length > 0 && !!this.games[0].vname;
  23         },
  24         showResult: function() {
  25             return this.games.length > 0 && this.games[0].score != "*";
  26         },
  27     },
  28 };
  29 </script>