client/src/views/MyGames.vue

   1 <template lang="pug">
   2 main
   3   .row
   4     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   5       .button-group
   6         button.tabbtn#liveGames(@click="setDisplay('live',$event)")
   7           | {{ st.tr["Live games"] }}
   8         button.tabbtn#corrGames(@click="setDisplay('corr',$event)")
   9           | {{ st.tr["Correspondence games"] }}
  10         button.tabbtn#importGames(@click="setDisplay('import',$event)")
  11           | {{ st.tr["Imported games"] }}
  12       GameList(
  13         ref="livegames"
  14         v-show="display=='live'"
  15         :games="liveGames"
  16         @show-game="showGame"
  17         @abortgame="abortGame"
  18       )
  19       GameList(
  20         v-show="display=='corr'"
  21         ref="corrgames"
  22         :games="corrGames"
  23         @show-game="showGame"
  24         @abortgame="abortGame"
  25       )
  26       UploadGame(
  27         v-show="display=='import'"
  28         @game-uploaded="addGameImport"
  29       )
  30       GameList(
  31         v-show="display=='import'"
  32         ref="importgames"
  33         :games="importGames"
  34         :show-both="true"
  35         @show-game="showGame"
  36       )
  37       button#loadMoreBtn(
  38         v-show="hasMore[display]"
  39         @click="loadMore(display)"
  40       )
  41         | {{ st.tr["Load more"] }}
  42 </template>
  43
  44 <script>
  45 import { store } from "@/store";
  46 import { GameStorage } from "@/utils/gameStorage";
  47 import { ImportgameStorage } from "@/utils/importgameStorage";
  48 import { ajax } from "@/utils/ajax";
  49 import { getScoreMessage } from "@/utils/scoring";
  50 import params from "@/parameters";
  51 import { getRandString } from "@/utils/alea";
  52 import GameList from "@/components/GameList.vue";
  53 import UploadGame from "@/components/UploadGame.vue";
  54 export default {
  55   name: "my-my-games",
  56   components: {
  57     GameList,
  58     UploadGame
  59   },
  60   data: function() {
  61     return {
  62       st: store.state,
  63       display: "live",
  64       liveGames: [],
  65       corrGames: [],
  66       importGames: [],
  67       // timestamp of last showed (oldest) game:
  68       cursor: {
  69         live: Number.MAX_SAFE_INTEGER,
  70         "import": Number.MAX_SAFE_INTEGER,
  71         corr: Number.MAX_SAFE_INTEGER
  72       },
  73       // hasMore == TRUE: a priori there could be more games to load
  74       hasMore: {
  75         live: true,
  76         "import": true,
  77         corr: (store.state.user.id > 0)
  78       },
  79       conn: null,
  80       connexionString: "",
  81       socketCloseListener: 0
  82     };
  83   },
  84   watch: {
  85     $route: function(to, from) {
  86       if (to.path != "/mygames") this.cleanBeforeDestroy();
  87     },
  88     // st.variants changes only once, at loading from [] to [...]
  89     "st.variants": function() {
  90       // Set potential games variant names + display:
  91       this.liveGames.concat(this.corrGames).concat(this.importGames)
  92       .forEach(o => {
  93         if (!o.vname) this.setVname(o);
  94       });
  95     }
  96   },
  97   created: function() {
  98     window.addEventListener("beforeunload", this.cleanBeforeDestroy);
  99     // Initialize connection
 100     this.connexionString =
 101       params.socketUrl +
 102       "/?sid=" + this.st.user.sid +
 103       "&id=" + this.st.user.id +
 104       "&tmpId=" + getRandString() +
 105       "&page=" +
 106       encodeURIComponent(this.$route.path);
 107     this.conn = new WebSocket(this.connexionString);
 108     this.conn.onmessage = this.socketMessageListener;
 109     this.socketCloseListener = setInterval(
 110       () => {
 111         if (this.conn.readyState == 3) {
 112           // Connexion is closed: re-open
 113           this.conn.removeEventListener("message", this.socketMessageListener);
 114           this.conn = new WebSocket(this.connexionString);
 115           this.conn.addEventListener("message", this.socketMessageListener);
 116         }
 117       },
 118       1000
 119     );
 120   },
 121   mounted: function() {
 122     const adjustAndSetDisplay = () => {
 123       // showType is the last type viewed by the user (default)
 124       let showType = localStorage.getItem("type-myGames") || "live";
 125       // Live games, my turn: highest priority:
 126       if (this.liveGames.some(g => !!g.myTurn)) showType = "live";
 127       // Then corr games, my turn:
 128       else if (this.corrGames.some(g => !!g.myTurn)) showType = "corr";
 129       else {
 130         // If a listing is empty, try showing the other (if non-empty)
 131         const types = ["corr", "live"];
 132         for (let i of [0,1]) {
 133           if (
 134             this[types[i] + "Games"].length > 0 &&
 135             this[types[1-i] + "Games"].length == 0
 136           ) {
 137             showType = types[i];
 138           }
 139         }
 140       }
 141       this.setDisplay(showType);
 142     };
 143     GameStorage.getRunning(localGames => {
 144       localGames.forEach(g => g.type = "live");
 145       this.decorate(localGames);
 146       this.liveGames = localGames;
 147       if (this.st.user.id > 0) {
 148         // Ask running corr games first
 149         ajax(
 150           "/runninggames",
 151           "GET",
 152           {
 153             credentials: true,
 154             success: (res) => {
 155               // These games are garanteed to not be deleted
 156               this.corrGames = res.games;
 157               this.corrGames.forEach(g => {
 158                 g.type = "corr";
 159                 g.score = "*";
 160                 g.options = JSON.parse(g.options);
 161               });
 162               this.decorate(this.corrGames);
 163               // Now ask completed games (partial list)
 164               this.loadMore(
 165                 "live",
 166                 () => this.loadMore("corr", () => {
 167                   this.loadMore("import", adjustAndSetDisplay);
 168                 })
 169               );
 170             }
 171           }
 172         );
 173       }
 174       else {
 175         this.loadMore("live", () => {
 176           this.loadMore("import", adjustAndSetDisplay);
 177         });
 178       }
 179     });
 180   },
 181   beforeDestroy: function() {
 182     this.cleanBeforeDestroy();
 183   },
 184   methods: {
 185     cleanBeforeDestroy: function() {
 186       clearInterval(this.socketCloseListener);
 187       window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
 188       this.conn.removeEventListener("message", this.socketMessageListener);
 189       this.conn.send(JSON.stringify({code: "disconnect"}));
 190       this.conn = null;
 191     },
 192     setDisplay: function(type, e) {
 193       this.display = type;
 194       localStorage.setItem("type-myGames", type);
 195       let elt = (!!e ? e.target : document.getElementById(type + "Games"));
 196       elt.classList.add("active");
 197       elt.classList.remove("somethingnew"); //in case of
 198       for (let t of ["live","corr","import"]) {
 199         if (t != type)
 200           document.getElementById(t + "Games").classList.remove("active");
 201       }
 202     },
 203     // TODO: duplicated from Hall.vue:
 204     setVname: function(obj) {
 205       const variant = this.st.variants.find(v => v.id == obj.vid);
 206       if (!!variant) {
 207         obj.vname = variant.name;
 208         obj.vdisp = variant.display;
 209       }
 210     },
 211     addGameImport(game) {
 212       game.type = "import";
 213       ImportgameStorage.add(game, (err) => {
 214         if (!!err) {
 215           if (err.message.indexOf("Key already exists") < 0) {
 216             alert(this.st.tr["An error occurred. Try again!"]);
 217             return;
 218           }
 219           // NOTE: since a random new ID is generated for imported games,
 220           // this error will not occur.
 221           else alert(this.st.tr["The game was already imported"]);
 222         }
 223         this.$router.push("/game/" + game.id);
 224       });
 225     },
 226     tryShowNewsIndicator: function(type) {
 227       if (
 228         (type == "live" && this.display != "live") ||
 229         (type == "corr" && this.display != "corr")
 230       ) {
 231         document
 232           .getElementById(type + "Games")
 233           .classList.add("somethingnew");
 234       }
 235     },
 236     // Called at loading to augment games with myColor + myTurn infos
 237     decorate: function(games) {
 238       games.forEach(g => {
 239         g.myColor =
 240           (g.type == "corr" && g.players[0].id == this.st.user.id) ||
 241           (g.type == "live" && g.players[0].sid == this.st.user.sid)
 242             ? 'w'
 243             : 'b';
 244         // If game is over, myTurn doesn't exist:
 245         if (g.score == "*") {
 246           const rem = g.movesCount % 2;
 247           if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b'))
 248             g.myTurn = true;
 249         }
 250         this.setVname(g);
 251       });
 252     },
 253     socketMessageListener: function(msg) {
 254       if (!this.conn) return;
 255       const data = JSON.parse(msg.data);
 256       // NOTE: no imported games here
 257       let gamesArrays = {
 258         "corr": this.corrGames,
 259         "live": this.liveGames
 260       };
 261       switch (data.code) {
 262         case "notifyturn":
 263         case "notifyscore": {
 264           const info = data.data;
 265           const type = (!!parseInt(info.gid, 10) ? "corr" : "live");
 266           let game = gamesArrays[type].find(g => g.id == info.gid);
 267           // "notifything" --> "thing":
 268           const thing = data.code.substr(6);
 269           game[thing] = info[thing];
 270           if (thing == "turn") {
 271             game.myTurn = !game.myTurn;
 272             if (game.myTurn) this.tryShowNewsIndicator(type);
 273           }
 274           else game.myTurn = false;
 275           // TODO: forcing refresh like that is ugly and wrong.
 276           //       How to do it cleanly?
 277           this.$refs[type + "games"].$forceUpdate();
 278           break;
 279         }
 280         case "notifynewgame": {
 281           let gameInfo = data.data;
 282           this.setVname(gameInfo);
 283           // TODO: remove patch on next line (options || "{}")
 284           gameInfo.options = JSON.parse(gameInfo.options || "{}");
 285           const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
 286           let game = Object.assign(
 287             {
 288               type: type,
 289               score: "*",
 290               created: Date.now()
 291             },
 292             gameInfo
 293           );
 294           game.myTurn =
 295             (type == "corr" && game.players[0].id == this.st.user.id) ||
 296             (type == "live" && game.players[0].sid == this.st.user.sid);
 297           gamesArrays[type].push(game);
 298           if (game.myTurn) this.tryShowNewsIndicator(type);
 299           // TODO: cleaner refresh
 300           this.$refs[type + "games"].$forceUpdate();
 301           break;
 302         }
 303       }
 304     },
 305     showGame: function(game) {
 306       if (game.type != "corr" || !game.myTurn) {
 307         this.$router.push("/game/" + game.id);
 308         return;
 309       }
 310       // It's my turn in this game. Are there others?
 311       let nextIds = "";
 312       let otherCorrGamesMyTurn = this.corrGames.filter(g =>
 313         g.id != game.id && !!g.myTurn);
 314       if (otherCorrGamesMyTurn.length > 0) {
 315         nextIds += "/?next=[";
 316         otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
 317         // Remove last comma and close array:
 318         nextIds = nextIds.slice(0, -1) + "]";
 319       }
 320       this.$router.push("/game/" + game.id + nextIds);
 321     },
 322     abortGame: function(game) {
 323       // Special "trans-pages" case: from MyGames to Game
 324       // TODO: also for corr games? (It's less important)
 325       if (game.type == "live") {
 326         const oppsid =
 327           game.players[0].sid == this.st.user.sid
 328             ? game.players[1].sid
 329             : game.players[0].sid;
 330         if (!!this.conn) {
 331           this.conn.send(
 332             JSON.stringify(
 333               {
 334                 code: "mabort",
 335                 gid: game.id,
 336                 // NOTE: target might not be online
 337                 target: oppsid
 338               }
 339             )
 340           );
 341         }
 342       }
 343       // NOTE: no imported games here
 344       else if (!game.deletedByWhite || !game.deletedByBlack) {
 345         // Set score if game isn't deleted on server:
 346         ajax(
 347           "/games",
 348           "PUT",
 349           {
 350             data: {
 351               gid: game.id,
 352               newObj: {
 353                 score: "?",
 354                 scoreMsg: getScoreMessage("?")
 355               }
 356             }
 357           }
 358         );
 359       }
 360     },
 361     loadMore: function(type, cb) {
 362       if (type == "corr" && this.st.user.id > 0) {
 363         ajax(
 364           "/completedgames",
 365           "GET",
 366           {
 367             credentials: true,
 368             data: { cursor: this.cursor["corr"] },
 369             success: (res) => {
 370               const L = res.games.length;
 371               if (L > 0) {
 372                 this.cursor["corr"] = res.games[L - 1].created;
 373                 let moreGames = res.games;
 374                 moreGames.forEach(g => {
 375                   g.type = "corr";
 376                   g.options = JSON.parse(g.options);
 377                 });
 378                 this.decorate(moreGames);
 379                 this.corrGames = this.corrGames.concat(moreGames);
 380               }
 381               else this.hasMore["corr"] = false;
 382               if (!!cb) cb();
 383             }
 384           }
 385         );
 386       }
 387       else if (type == "live") {
 388         GameStorage.getNext(this.cursor["live"], localGames => {
 389           const L = localGames.length;
 390           if (L > 0) {
 391             // Add "-1" because IDBKeyRange.upperBound includes boundary
 392             this.cursor["live"] = localGames[L - 1].created - 1;
 393             localGames.forEach(g => {
 394               g.type = "live";
 395               // TODO: remove patch on next line (options || "{}")
 396               g.options = JSON.parse(g.options || "{}");
 397             });
 398             this.decorate(localGames);
 399             this.liveGames = this.liveGames.concat(localGames);
 400           }
 401           else this.hasMore["live"] = false;
 402           if (!!cb) cb();
 403         });
 404       }
 405       else if (type == "import") {
 406         ImportgameStorage.getNext(this.cursor["import"], importGames => {
 407           const L = importGames.length;
 408           if (L > 0) {
 409             // Add "-1" because IDBKeyRange.upperBound includes boundary
 410             this.cursor["import"] = importGames[L - 1].created - 1;
 411             importGames.forEach(g => {
 412               g.type = "import";
 413               // TODO: remove following patch (options || "{}")
 414               g.options = JSON.parse(g.options || "{}");
 415               this.setVname(g);
 416             });
 417             this.importGames = this.importGames.concat(importGames);
 418           }
 419           else this.hasMore["import"] = false;
 420           if (!!cb) cb();
 421         });
 422       }
 423     }
 424   }
 425 };
 426 </script>
 427
 428 <style lang="sass" scoped>
 429 .active
 430   color: #388e3c
 431
 432 .tabbtn
 433   background-color: #f9faee
 434
 435 button#loadMoreBtn
 436   display: block
 437   margin: 0 auto
 438
 439 .somethingnew
 440   background-color: #90C4EC !important
 441 </style>
 442
 443 <!-- Not scoped because acting on GameList -->
 444 <style lang="sass">
 445 table.game-list
 446   max-height: 100%
 447 </style>