public/javascripts/components/gameList.js

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