X-Git-Url: https://git.auder.net/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fcomponents%2FGameList.vue;h=2a4b0239395fabfdd69d41e687e5bf5068d9dbba;hb=bd76b45611cbb58dcf774745a4d690277a82aacd;hp=1e31e737af36655556ca52baf54490f3acffc8b8;hpb=d8b1800bcec983faabc34bdb1057ef880488a160;p=vchess.git

diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue
index 1e31e737..2a4b0239 100644
--- a/client/src/components/GameList.vue
+++ b/client/src/components/GameList.vue
@@ -4,18 +4,16 @@ div
     thead
       tr
         th {{ st.tr["Variant"] }}
-        th {{ st.tr["White"] }}
-        th {{ st.tr["Black"] }}
-        th {{ st.tr["Cadence"] }}
+        th {{ st.tr[showBoth ? "Players" : "Versus"] }}
+        th(v-if="showCadence") {{ st.tr["Cadence"] }}
         th {{ st.tr["Result"] }}
     tbody
       tr(v-for="g in sortedGames" @click="$emit('show-game',g)"
           :class="{'my-turn': g.myTurn}")
-        td(data-label="Variant") {{ g.vname }}
-        td(data-label="White") {{ g.players[0].name || "@nonymous" }}
-        td(data-label="Black") {{ g.players[1].name || "@nonymous" }}
-        td(data-label="Time control") {{ g.cadence }}
-        td(data-label="Result" :class="{finished: g.score!='*'}" @click="deleteGame(g,$event)")
+        td {{ g.vname }}
+        td {{ player_s(g) }}
+        td(v-if="showCadence") {{ g.cadence }}
+        td(:class="{finished: g.score!='*'}" @click="deleteGame(g,$event)")
           | {{ g.score }}
 </template>
 
@@ -24,16 +22,32 @@ import { store } from "@/store";
 import { GameStorage } from "@/utils/gameStorage";
 export default {
   name: "my-game-list",
-  props: ["games"],
+  props: ["games","showBoth"],
   data: function() {
     return {
       st: store.state,
+      showCadence: true,
     };
   },
+  mounted: function() {
+    // timeout to avoid calling too many time the adjust method
+    let timeoutLaunched = false;
+    window.addEventListener("resize", (e) => {
+      if (!timeoutLaunched)
+      {
+        timeoutLaunched = true;
+        setTimeout( () => {
+          this.showCadence = window.innerWidth >= 425; //TODO: arbitrary
+          timeoutLaunched = false;
+        }, 500);
+      }
+    });
+  },
   computed: {
-    // TODO: also sort by g.created
     sortedGames: function() {
       // Show in order: games where it's my turn, my running games, my games, other games
+      let minCreated = Number.MAX_SAFE_INTEGER
+      let maxCreated = 0
       let augmentedGames = this.games.map(g => {
         let priority = 0;
         if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid))
@@ -51,12 +65,27 @@ export default {
               priority++;
           }
         }
+        if (g.created < minCreated)
+          minCreated = g.created;
+        if (g.created > maxCreated)
+          maxCreated = g.created;
         return Object.assign({}, g, {priority: priority, myTurn: priority==3});
       });
-      return augmentedGames.sort((g1,g2) => { return g2.priority - g1.priority; });
+      const deltaCreated = maxCreated - minCreated;
+      return augmentedGames.sort((g1,g2) => {
+        return g2.priority - g1.priority +
+          (g2.created - g1.created) / deltaCreated;
+      });
     },
   },
   methods: {
+    player_s: function(g) {
+      if (this.showBoth)
+        return (g.players[0].name || "@nonymous") + " - " + (g.players[1].name || "@nonymous");
+      if (this.st.user.sid == g.players[0].sid || this.st.user.id == g.players[0].uid)
+        return g.players[1].name || "@nonymous";
+      return g.players[0].name || "@nonymous";
+    },
     deleteGame: function(game, e) {
       if (game.score != "*")
       {