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["Correspondance games"] }}
  10       GameList(
  11         ref="livegames"
  12         v-show="display=='live'"
  13         :games="liveGames"
  14         @show-game="showGame"
  15         @abortgame="abortGame"
  16       )
  17       div(v-show="display=='corr'")
  18         GameList(
  19           ref="corrgames"
  20           :games="corrGames"
  21           @show-game="showGame"
  22           @abortgame="abortGame"
  23         )
  24         button#loadMoreBtn(
  25           v-if="hasMore"
  26           @click="loadMore()"
  27         )
  28           | {{ st.tr["Load more"] }}
  29 </template>
  30
  31 <script>
  32 import { store } from "@/store";
  33 import { GameStorage } from "@/utils/gameStorage";
  34 import { ajax } from "@/utils/ajax";
  35 import { getScoreMessage } from "@/utils/scoring";
  36 import params from "@/parameters";
  37 import { getRandString } from "@/utils/alea";
  38 import GameList from "@/components/GameList.vue";
  39 export default {
  40   name: "my-my-games",
  41   components: {
  42     GameList
  43   },
  44   data: function() {
  45     return {
  46       st: store.state,
  47       display: "live",
  48       liveGames: [],
  49       corrGames: [],
  50       // timestamp of last showed (oldest) corr game:
  51       cursor: Number.MAX_SAFE_INTEGER,
  52       // hasMore == TRUE: a priori there could be more games to load
  53       hasMore: true,
  54       conn: null,
  55       connexionString: ""
  56     };
  57   },
  58   created: function() {
  59     // Initialize connection
  60     this.connexionString =
  61       params.socketUrl +
  62       "/?sid=" +
  63       this.st.user.sid +
  64       "&id=" +
  65       this.st.user.id +
  66       "&tmpId=" +
  67       getRandString() +
  68       "&page=" +
  69       encodeURIComponent(this.$route.path);
  70     this.conn = new WebSocket(this.connexionString);
  71     this.conn.onmessage = this.socketMessageListener;
  72     this.conn.onclose = this.socketCloseListener;
  73   },
  74   mounted: function() {
  75     const adjustAndSetDisplay = () => {
  76       // showType is the last type viwed by the user (default)
  77       let showType = localStorage.getItem("type-myGames") || "live";
  78       // Live games, my turn: highest priority:
  79       if (this.liveGames.some(g => !!g.myTurn)) showType = "live";
  80       // Then corr games, my turn:
  81       else if (this.corrGames.some(g => !!g.myTurn)) showType = "corr";
  82       else {
  83         // If a listing is empty, try showing the other (if non-empty)
  84         const types = ["corr", "live"];
  85         for (let i of [0,1]) {
  86           if (
  87             this[types[i] + "Games"].length > 0 &&
  88             this[types[1-i] + "Games"].length == 0
  89           ) {
  90             showType = types[i];
  91           }
  92         }
  93       }
  94       this.setDisplay(showType);
  95     };
  96     GameStorage.getAll(localGames => {
  97       localGames.forEach(g => g.type = "live");
  98       this.decorate(localGames);
  99       this.liveGames = localGames;
 100       if (this.st.user.id > 0) {
 101         // Ask running corr games first
 102         ajax(
 103           "/runninggames",
 104           "GET",
 105           {
 106             credentials: true,
 107             success: (res) => {
 108               // These games are garanteed to not be deleted
 109               this.corrGames = res.games;
 110               this.corrGames.forEach(g => {
 111                 g.type = "corr";
 112                 g.score = "*";
 113               });
 114               this.decorate(this.corrGames);
 115               // Now ask completed games (partial list)
 116               ajax(
 117                 "/completedgames",
 118                 "GET",
 119                 {
 120                   credentials: true,
 121                   data: { cursor: this.cursor },
 122                   success: (res2) => {
 123                     if (res2.games.length > 0) {
 124                       const L = res2.games.length;
 125                       this.cursor = res2.games[L - 1].created;
 126                       let completedGames = res2.games;
 127                       completedGames.forEach(g => g.type = "corr");
 128                       this.decorate(completedGames);
 129                       this.corrGames = this.corrGames.concat(completedGames);
 130                       adjustAndSetDisplay();
 131                     }
 132                   }
 133                 }
 134               );
 135             }
 136           }
 137         );
 138       } else adjustAndSetDisplay();
 139     });
 140   },
 141   beforeDestroy: function() {
 142     this.conn.send(JSON.stringify({code: "disconnect"}));
 143   },
 144   methods: {
 145     setDisplay: function(type, e) {
 146       this.display = type;
 147       localStorage.setItem("type-myGames", type);
 148       let elt = e ? e.target : document.getElementById(type + "Games");
 149       elt.classList.add("active");
 150       elt.classList.remove("somethingnew"); //in case of
 151       if (elt.previousElementSibling)
 152         elt.previousElementSibling.classList.remove("active");
 153       else elt.nextElementSibling.classList.remove("active");
 154     },
 155     tryShowNewsIndicator: function(type) {
 156       if (
 157         (type == "live" && this.display == "corr") ||
 158         (type == "corr" && this.display == "live")
 159       ) {
 160         document
 161           .getElementById(type + "Games")
 162           .classList.add("somethingnew");
 163       }
 164     },
 165     // Called at loading to augment games with myColor + myTurn infos
 166     decorate: function(games) {
 167       games.forEach(g => {
 168         g.myColor =
 169           (g.type == "corr" && g.players[0].id == this.st.user.id) ||
 170           (g.type == "live" && g.players[0].sid == this.st.user.sid)
 171             ? 'w'
 172             : 'b';
 173         // If game is over, myTurn doesn't exist:
 174         if (g.score == "*") {
 175           const rem = g.movesCount % 2;
 176           if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b'))
 177             g.myTurn = true;
 178         }
 179       });
 180     },
 181     socketMessageListener: function(msg) {
 182       const data = JSON.parse(msg.data);
 183       let gamesArrays = {
 184         "corr": this.corrGames,
 185         "live": this.liveGames
 186       };
 187       switch (data.code) {
 188         case "notifyturn":
 189         case "notifyscore": {
 190           const info = data.data;
 191           const type = (!!parseInt(info.gid) ? "corr" : "live");
 192           let game = gamesArrays[type].find(g => g.id == info.gid);
 193           // "notifything" --> "thing":
 194           const thing = data.code.substr(6);
 195           game[thing] = info[thing];
 196           if (thing == "turn") {
 197             game.myTurn = !game.myTurn;
 198             if (game.myTurn) this.tryShowNewsIndicator(type);
 199           } else game.myTurn = false;
 200           // TODO: forcing refresh like that is ugly and wrong.
 201           //       How to do it cleanly?
 202           this.$refs[type + "games"].$forceUpdate();
 203           break;
 204         }
 205         case "notifynewgame": {
 206           const gameInfo = data.data;
 207           // st.variants might be uninitialized,
 208           // if unlucky and newgame right after connect:
 209           const v = this.st.variants.find(v => v.id == gameInfo.vid);
 210           const vname = !!v ? v.name : "";
 211           const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
 212           let game = Object.assign(
 213             {
 214               vname: vname,
 215               type: type,
 216               score: "*",
 217               created: Date.now()
 218             },
 219             gameInfo
 220           );
 221           game.myTurn =
 222             (type == "corr" && game.players[0].id == this.st.user.id) ||
 223             (type == "live" && game.players[0].sid == this.st.user.sid);
 224           gamesArrays[type].push(game);
 225           if (game.myTurn) this.tryShowNewsIndicator(type);
 226           // TODO: cleaner refresh
 227           this.$refs[type + "games"].$forceUpdate();
 228           break;
 229         }
 230       }
 231     },
 232     socketCloseListener: function() {
 233       this.conn = new WebSocket(this.connexionString);
 234       this.conn.addEventListener("message", this.socketMessageListener);
 235       this.conn.addEventListener("close", this.socketCloseListener);
 236     },
 237     showGame: function(game) {
 238       if (game.type == "live" || !game.myTurn) {
 239         this.$router.push("/game/" + game.id);
 240         return;
 241       }
 242       // It's my turn in this game. Are there others?
 243       let nextIds = "";
 244       let otherCorrGamesMyTurn = this.corrGames.filter(g =>
 245         g.id != game.id && !!g.myTurn);
 246       if (otherCorrGamesMyTurn.length > 0) {
 247         nextIds += "/?next=[";
 248         otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
 249         // Remove last comma and close array:
 250         nextIds = nextIds.slice(0, -1) + "]";
 251       }
 252       this.$router.push("/game/" + game.id + nextIds);
 253     },
 254     abortGame: function(game) {
 255       // Special "trans-pages" case: from MyGames to Game
 256       // TODO: also for corr games? (It's less important)
 257       if (game.type == "live") {
 258         const oppsid =
 259           game.players[0].sid == this.st.user.sid
 260             ? game.players[1].sid
 261             : game.players[0].sid;
 262         this.conn.send(
 263           JSON.stringify(
 264             {
 265               code: "mabort",
 266               gid: game.id,
 267               // NOTE: target might not be online
 268               target: oppsid
 269             }
 270           )
 271         );
 272       }
 273       else if (!game.deletedByWhite || !game.deletedByBlack) {
 274         // Set score if game isn't deleted on server:
 275         ajax(
 276           "/games",
 277           "PUT",
 278           {
 279             data: {
 280               gid: game.id,
 281               newObj: {
 282                 score: "?",
 283                 scoreMsg: getScoreMessage("?")
 284               }
 285             }
 286           }
 287         );
 288       }
 289     },
 290     loadMore: function() {
 291       ajax(
 292         "/completedgames",
 293         "GET",
 294         {
 295           credentials: true,
 296           data: { cursor: this.cursor },
 297           success: (res) => {
 298             if (res.games.length > 0) {
 299               const L = res.games.length;
 300               this.cursor = res.games[L - 1].created;
 301               let moreGames = res.games;
 302               moreGames.forEach(g => g.type = "corr");
 303               this.decorate(moreGames);
 304               this.corrGames = this.corrGames.concat(moreGames);
 305             } else this.hasMore = false;
 306           }
 307         }
 308       );
 309     }
 310   }
 311 };
 312 </script>
 313
 314 <style lang="sass">
 315 .active
 316   color: #42a983
 317
 318 .tabbtn
 319   background-color: #f9faee
 320
 321 table.game-list
 322   max-height: 100%
 323
 324 button#loadMoreBtn
 325   display: block
 326   margin: 0 auto
 327
 328 .somethingnew
 329   background-color: #c5fefe !important
 330 </style>