client/src/components/GameList.vue

   1 <template lang="pug">
   2 div
   3   table
   4     thead
   5       tr
   6         th {{ st.tr["Variant"] }}
   7         th {{ st.tr[showBoth ? "Players" : "Versus"] }}
   8         th(v-if="showCadence") {{ st.tr["Cadence"] }}
   9         th {{ st.tr["Result"] }}
  10     tbody
  11       tr(v-for="g in sortedGames" @click="$emit('show-game',g)"
  12           :class="{'my-turn': g.myTurn}")
  13         td {{ g.vname }}
  14         td {{ player_s(g) }}
  15         td(v-if="showCadence") {{ g.cadence }}
  16         td(:class="{finished: g.score!='*'}" @click="deleteGame(g,$event)")
  17           | {{ g.score }}
  18 </template>
  19
  20 <script>
  21 import { store } from "@/store";
  22 import { GameStorage } from "@/utils/gameStorage";
  23 export default {
  24   name: "my-game-list",
  25   props: ["games","showBoth"],
  26   data: function() {
  27     return {
  28       st: store.state,
  29       showCadence: true,
  30     };
  31   },
  32   mounted: function() {
  33     // timeout to avoid calling too many time the adjust method
  34     let timeoutLaunched = false;
  35     window.addEventListener("resize", (e) => {
  36       if (!timeoutLaunched)
  37       {
  38         timeoutLaunched = true;
  39         setTimeout( () => {
  40           this.showCadence = window.innerWidth >= 425; //TODO: arbitrary
  41           timeoutLaunched = false;
  42         }, 500);
  43       }
  44     });
  45   },
  46   computed: {
  47     sortedGames: function() {
  48       // Show in order: games where it's my turn, my running games, my games, other games
  49       let minCreated = Number.MAX_SAFE_INTEGER
  50       let maxCreated = 0
  51       let augmentedGames = this.games.map(g => {
  52         let priority = 0;
  53         if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid))
  54         {
  55           priority++;
  56           if (g.score == "*")
  57           {
  58             priority++;
  59             const myColor = g.players[0].uid == this.st.user.id
  60                 || g.players[0].sid == this.st.user.sid
  61               ? "w"
  62               : "b";
  63             // I play in this game, so g.fen will be defined
  64             if (!!g.fen.match(" " + myColor + " "))
  65               priority++;
  66           }
  67         }
  68         if (g.created < minCreated)
  69           minCreated = g.created;
  70         if (g.created > maxCreated)
  71           maxCreated = g.created;
  72         return Object.assign({}, g, {priority: priority, myTurn: priority==3});
  73       });
  74       const deltaCreated = maxCreated - minCreated;
  75       return augmentedGames.sort((g1,g2) => {
  76         return g2.priority - g1.priority +
  77           (g2.created - g1.created) / deltaCreated;
  78       });
  79     },
  80   },
  81   methods: {
  82     player_s: function(g) {
  83       if (this.showBoth)
  84         return (g.players[0].name || "@nonymous") + " - " + (g.players[1].name || "@nonymous");
  85       if (this.st.user.sid == g.players[0].sid || this.st.user.id == g.players[0].uid)
  86         return g.players[1].name || "@nonymous";
  87       return g.players[0].name || "@nonymous";
  88     },
  89     deleteGame: function(game, e) {
  90       if (game.score != "*")
  91       {
  92         if (confirm(this.st.tr["Remove game?"]))
  93           GameStorage.remove(game.id);
  94         e.stopPropagation();
  95       }
  96     },
  97   },
  98 };
  99 </script>
 100
 101 <style lang="sass" scoped>
 102 // TODO: understand why the style applied to <tr> element doesn't work
 103 tr.my-turn > td
 104   background-color: #fcd785
 105 tr td.finished
 106   background-color: #f5b7b1
 107 </style>