X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FGameList.vue;h=2a4b0239395fabfdd69d41e687e5bf5068d9dbba;hb=bd76b45611cbb58dcf774745a4d690277a82aacd;hp=5a4c8f7c39eba08525811690209c73db3d63c039;hpb=9ddaf8da8743c50b9019888a82d84392913c60c9;p=vchess.git

diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue
index 5a4c8f7c..2a4b0239 100644
--- a/client/src/components/GameList.vue
+++ b/client/src/components/GameList.vue
@@ -4,19 +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.stop="deleteGame(g)")
+        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>
 
@@ -25,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))
@@ -52,15 +65,34 @@ 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: {
-    deleteGame: function(game) {
-      if (confirm(this.st.tr["Remove game ?"]))
-        GameStorage.remove(game.id);
+    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 != "*")
+      {
+        if (confirm(this.st.tr["Remove game?"]))
+          GameStorage.remove(game.id);
+        e.stopPropagation();
+      }
     },
   },
 };
@@ -71,5 +103,5 @@ export default {
 tr.my-turn > td
   background-color: #fcd785
 tr td.finished
-  background-color: red
+  background-color: #f5b7b1
 </style>