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", () => {
  36       if (!timeoutLaunched) {
  37         timeoutLaunched = true;
  38         setTimeout(() => {
  39           this.showCadence = window.innerWidth >= 425; //TODO: arbitrary
  40           timeoutLaunched = false;
  41         }, 500);
  42       }
  43     });
  44   },
  45   computed: {
  46     sortedGames: function() {
  47       // Show in order: games where it's my turn, my running games, my games, other games
  48       let minCreated = Number.MAX_SAFE_INTEGER;
  49       let maxCreated = 0;
  50       let augmentedGames = this.games.map(g => {
  51         let priority = 0;
  52         if (
  53           g.players.some(
  54             p => p.uid == this.st.user.id || p.sid == this.st.user.sid
  55           )
  56         ) {
  57           priority++;
  58           if (g.score == "*") {
  59             priority++;
  60             const myColor =
  61               g.players[0].uid == this.st.user.id ||
  62               g.players[0].sid == this.st.user.sid
  63                 ? "w"
  64                 : "b";
  65             // I play in this game, so g.fen will be defined
  66             if (g.fen.match(" " + myColor + " ")) priority++;
  67           }
  68         }
  69         if (g.created < minCreated) minCreated = g.created;
  70         if (g.created > maxCreated) maxCreated = g.created;
  71         return Object.assign({}, g, {
  72           priority: priority,
  73           myTurn: priority == 3
  74         });
  75       });
  76       const deltaCreated = maxCreated - minCreated;
  77       return augmentedGames.sort((g1, g2) => {
  78         return (
  79           g2.priority - g1.priority + (g2.created - g1.created) / deltaCreated
  80         );
  81       });
  82     }
  83   },
  84   methods: {
  85     player_s: function(g) {
  86       if (this.showBoth)
  87         return (
  88           (g.players[0].name || "@nonymous") +
  89           " - " +
  90           (g.players[1].name || "@nonymous")
  91         );
  92       if (
  93         this.st.user.sid == g.players[0].sid ||
  94         this.st.user.id == g.players[0].uid
  95       )
  96         return g.players[1].name || "@nonymous";
  97       return g.players[0].name || "@nonymous";
  98     },
  99     deleteGame: function(game, e) {
 100       if (game.score != "*") {
 101         if (confirm(this.st.tr["Remove game?"])) GameStorage.remove(game.id);
 102         e.stopPropagation();
 103       }
 104     }
 105   }
 106 };
 107 </script>
 108
 109 <style lang="sass" scoped>
 110 // TODO: understand why the style applied to <tr> element doesn't work
 111 tr.my-turn > td
 112   background-color: #fcd785
 113 tr td.finished
 114   background-color: #f5b7b1
 115 </style>