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             success: (res) => {
 107               // These games are garanteed to not be deleted
 108               this.corrGames = res.games;
 109               this.corrGames.forEach(g => g.type = "corr");
 110               this.decorate(this.corrGames);
 111               // Now ask completed games (partial list)
 112               ajax(
 113                 "/completedgames",
 114                 "GET",
 115                 {
 116                   data: { cursor: this.cursor },
 117                   success: (res2) => {
 118                     if (res2.games.length > 0) {
 119                       const L = res2.games.length;
 120                       this.cursor = res2.games[L - 1].created;
 121                       let completedGames = res2.games;
 122                       completedGames.forEach(g => g.type = "corr");
 123                       this.decorate(completedGames);
 124                       this.corrGames = this.corrGames.concat(completedGames);
 125                       adjustAndSetDisplay();
 126                     }
 127                   }
 128                 }
 129               );
 130             }
 131           }
 132         );
 133       } else adjustAndSetDisplay();
 134     });
 135   },
 136   beforeDestroy: function() {
 137     this.conn.send(JSON.stringify({code: "disconnect"}));
 138   },
 139   methods: {
 140     setDisplay: function(type, e) {
 141       this.display = type;
 142       localStorage.setItem("type-myGames", type);
 143       let elt = e ? e.target : document.getElementById(type + "Games");
 144       elt.classList.add("active");
 145       elt.classList.remove("somethingnew"); //in case of
 146       if (elt.previousElementSibling)
 147         elt.previousElementSibling.classList.remove("active");
 148       else elt.nextElementSibling.classList.remove("active");
 149     },
 150     tryShowNewsIndicator: function(type) {
 151       if (
 152         (type == "live" && this.display == "corr") ||
 153         (type == "corr" && this.display == "live")
 154       ) {
 155         document
 156           .getElementById(type + "Games")
 157           .classList.add("somethingnew");
 158       }
 159     },
 160     // Called at loading to augment games with myColor + myTurn infos
 161     decorate: function(games) {
 162       games.forEach(g => {
 163         g.myColor =
 164           (g.type == "corr" && g.players[0].id == this.st.user.id) ||
 165           (g.type == "live" && g.players[0].sid == this.st.user.sid)
 166             ? 'w'
 167             : 'b';
 168         // If game is over, myTurn doesn't exist:
 169         if (g.score == "*") {
 170           const rem = g.movesCount % 2;
 171           if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b'))
 172             g.myTurn = true;
 173         }
 174       });
 175     },
 176     socketMessageListener: function(msg) {
 177       const data = JSON.parse(msg.data);
 178       let gamesArrays = {
 179         "corr": this.corrGames,
 180         "live": this.liveGames
 181       };
 182       switch (data.code) {
 183         case "notifyturn":
 184         case "notifyscore": {
 185           const info = data.data;
 186           const type = (!!parseInt(info.gid) ? "corr" : "live");
 187           let game = gamesArrays[type].find(g => g.id == info.gid);
 188           // "notifything" --> "thing":
 189           const thing = data.code.substr(6);
 190           game[thing] = info[thing];
 191           if (thing == "turn") {
 192             game.myTurn = !game.myTurn;
 193             if (game.myTurn) this.tryShowNewsIndicator(type);
 194           }
 195           // TODO: forcing refresh like that is ugly and wrong.
 196           //       How to do it cleanly?
 197           this.$refs[type + "games"].$forceUpdate();
 198           break;
 199         }
 200         case "notifynewgame": {
 201           const gameInfo = data.data;
 202           // st.variants might be uninitialized,
 203           // if unlucky and newgame right after connect:
 204           const v = this.st.variants.find(v => v.id == gameInfo.vid);
 205           const vname = !!v ? v.name : "";
 206           const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
 207           let game = Object.assign(
 208             {
 209               vname: vname,
 210               type: type,
 211               score: "*",
 212               created: Date.now()
 213             },
 214             gameInfo
 215           );
 216           game.myTurn =
 217             (type == "corr" && game.players[0].id == this.st.user.id) ||
 218             (type == "live" && game.players[0].sid == this.st.user.sid);
 219           gamesArrays[type].push(game);
 220           if (game.myTurn) this.tryShowNewsIndicator(type);
 221           // TODO: cleaner refresh
 222           this.$refs[type + "games"].$forceUpdate();
 223           break;
 224         }
 225       }
 226     },
 227     socketCloseListener: function() {
 228       this.conn = new WebSocket(this.connexionString);
 229       this.conn.addEventListener("message", this.socketMessageListener);
 230       this.conn.addEventListener("close", this.socketCloseListener);
 231     },
 232     showGame: function(game) {
 233       if (game.type == "live" || !game.myTurn) {
 234         this.$router.push("/game/" + game.id);
 235         return;
 236       }
 237       // It's my turn in this game. Are there others?
 238       let nextIds = "";
 239       let otherCorrGamesMyTurn = this.corrGames.filter(g =>
 240         g.id != game.id && !!g.myTurn);
 241       if (otherCorrGamesMyTurn.length > 0) {
 242         nextIds += "/?next=[";
 243         otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
 244         // Remove last comma and close array:
 245         nextIds = nextIds.slice(0, -1) + "]";
 246       }
 247       this.$router.push("/game/" + game.id + nextIds);
 248     },
 249     abortGame: function(game) {
 250       // Special "trans-pages" case: from MyGames to Game
 251       // TODO: also for corr games? (It's less important)
 252       if (game.type == "live") {
 253         const oppsid =
 254           game.players[0].sid == this.st.user.sid
 255             ? game.players[1].sid
 256             : game.players[0].sid;
 257         this.conn.send(
 258           JSON.stringify(
 259             {
 260               code: "mabort",
 261               gid: game.id,
 262               // NOTE: target might not be online
 263               target: oppsid
 264             }
 265           )
 266         );
 267       }
 268       else if (!game.deletedByWhite || !game.deletedByBlack) {
 269         // Set score if game isn't deleted on server:
 270         ajax(
 271           "/games",
 272           "PUT",
 273           {
 274             data: {
 275               gid: game.id,
 276               newObj: {
 277                 score: "?",
 278                 scoreMsg: getScoreMessage("?")
 279               }
 280             }
 281           }
 282         );
 283       }
 284     },
 285     loadMore: function() {
 286       ajax(
 287         "/completedgames",
 288         "GET",
 289         {
 290           data: { cursor: this.cursor },
 291           success: (res) => {
 292             if (res.games.length > 0) {
 293               const L = res.games.length;
 294               this.cursor = res.games[L - 1].created;
 295               let moreGames = res.games;
 296               moreGames.forEach(g => g.type = "corr");
 297               this.decorate(moreGames);
 298               this.corrGames = this.corrGames.concat(moreGames);
 299             } else this.hasMore = false;
 300           }
 301         }
 302       );
 303     }
 304   }
 305 };
 306 </script>
 307
 308 <style lang="sass">
 309 .active
 310   color: #42a983
 311
 312 .tabbtn
 313   background-color: #f9faee
 314
 315 table.game-list
 316   max-height: 100%
 317
 318 button#loadMoreBtn
 319   margin-top: 0
 320   margin-bottom: 0
 321
 322 .somethingnew
 323   background-color: #c5fefe !important
 324 </style>