X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FMyGames.vue;h=a9e69f653ad93814d30f25240e89fc15ce59cabe;hb=68e19a449db7a12e0a168e99cd750d985c983ba1;hp=1362cb24176c4b8876f44e99157a4db57cb2e403;hpb=585d095517ca2aedab8ad125cc7c39b90e13d5cc;p=vchess.git

diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue
index 1362cb24..a9e69f65 100644
--- a/client/src/views/MyGames.vue
+++ b/client/src/views/MyGames.vue
@@ -14,13 +14,18 @@ main
         @show-game="showGame"
         @abortgame="abortGame"
       )
-      GameList(
-        ref="corrgames"
-        v-show="display=='corr'"
-        :games="corrGames"
-        @show-game="showGame"
-        @abortgame="abortGame"
-      )
+      div(v-show="display=='corr'")
+        GameList(
+          ref="corrgames"
+          :games="corrGames"
+          @show-game="showGame"
+          @abortgame="abortGame"
+        )
+        button#loadMoreBtn(
+          v-if="hasMore"
+          @click="loadMore()"
+        )
+          | {{ st.tr["Load more"] }}
 </template>
 
 <script>
@@ -42,6 +47,10 @@ export default {
       display: "live",
       liveGames: [],
       corrGames: [],
+      // timestamp of last showed (oldest) corr game:
+      cursor: Number.MAX_SAFE_INTEGER,
+      // hasMore == TRUE: a priori there could be more games to load
+      hasMore: true,
       conn: null,
       connexionString: ""
     };
@@ -89,23 +98,40 @@ export default {
       this.decorate(localGames);
       this.liveGames = localGames;
       if (this.st.user.id > 0) {
+        // Ask running corr games first
         ajax(
-          "/games",
+          "/runninggames",
           "GET",
           {
-            data: { uid: this.st.user.id },
+            credentials: true,
             success: (res) => {
-              let serverGames = res.games.filter(g => {
-                const mySide =
-                  g.players[0].uid == this.st.user.id
-                    ? "White"
-                    : "Black";
-                return !g["deletedBy" + mySide];
+              // These games are garanteed to not be deleted
+              this.corrGames = res.games;
+              this.corrGames.forEach(g => {
+                g.type = "corr";
+                g.score = "*";
               });
-              serverGames.forEach(g => g.type = "corr");
-              this.decorate(serverGames);
-              this.corrGames = serverGames;
-              adjustAndSetDisplay();
+              this.decorate(this.corrGames);
+              // Now ask completed games (partial list)
+              ajax(
+                "/completedgames",
+                "GET",
+                {
+                  credentials: true,
+                  data: { cursor: this.cursor },
+                  success: (res2) => {
+                    const L = res2.games.length;
+                    if (L > 0) {
+                      this.cursor = res2.games[L - 1].created;
+                      let completedGames = res2.games;
+                      completedGames.forEach(g => g.type = "corr");
+                      this.decorate(completedGames);
+                      this.corrGames = this.corrGames.concat(completedGames);
+                      adjustAndSetDisplay();
+                    }
+                  }
+                }
+              );
             }
           }
         );
@@ -140,7 +166,7 @@ export default {
     decorate: function(games) {
       games.forEach(g => {
         g.myColor =
-          (g.type == "corr" && g.players[0].uid == this.st.user.id) ||
+          (g.type == "corr" && g.players[0].id == this.st.user.id) ||
           (g.type == "live" && g.players[0].sid == this.st.user.sid)
             ? 'w'
             : 'b';
@@ -170,7 +196,7 @@ export default {
           if (thing == "turn") {
             game.myTurn = !game.myTurn;
             if (game.myTurn) this.tryShowNewsIndicator(type);
-          }
+          } else game.myTurn = false;
           // TODO: forcing refresh like that is ugly and wrong.
           //       How to do it cleanly?
           this.$refs[type + "games"].$forceUpdate();
@@ -193,7 +219,7 @@ export default {
             gameInfo
           );
           game.myTurn =
-            (type == "corr" && game.players[0].uid == this.st.user.id) ||
+            (type == "corr" && game.players[0].id == this.st.user.id) ||
             (type == "live" && game.players[0].sid == this.st.user.sid);
           gamesArrays[type].push(game);
           if (game.myTurn) this.tryShowNewsIndicator(type);
@@ -260,6 +286,26 @@ export default {
           }
         );
       }
+    },
+    loadMore: function() {
+      ajax(
+        "/completedgames",
+        "GET",
+        {
+          credentials: true,
+          data: { cursor: this.cursor },
+          success: (res) => {
+            const L = res.games.length;
+            if (L > 0) {
+              this.cursor = res.games[L - 1].created;
+              let moreGames = res.games;
+              moreGames.forEach(g => g.type = "corr");
+              this.decorate(moreGames);
+              this.corrGames = this.corrGames.concat(moreGames);
+            } else this.hasMore = false;
+          }
+        }
+      );
     }
   }
 };
@@ -275,6 +321,10 @@ export default {
 table.game-list
   max-height: 100%
 
+button#loadMoreBtn
+  display: block
+  margin: 0 auto
+
 .somethingnew
   background-color: #c5fefe !important
 </style>