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         v-show="display=='live'"
  12         :games="liveGames"
  13         @show-game="showGame"
  14         @abortgame="abortGame"
  15       )
  16       GameList(
  17         v-show="display=='corr'"
  18         :games="corrGames"
  19         @show-game="showGame"
  20         @abortgame="abortGame"
  21       )
  22 </template>
  23
  24 <script>
  25 import { store } from "@/store";
  26 import { GameStorage } from "@/utils/gameStorage";
  27 import { ajax } from "@/utils/ajax";
  28 import { getScoreMessage } from "@/utils/scoring";
  29 import params from "@/parameters";
  30 import { getRandString } from "@/utils/alea";
  31 import GameList from "@/components/GameList.vue";
  32 export default {
  33   name: "my-my-games",
  34   components: {
  35     GameList
  36   },
  37   data: function() {
  38     return {
  39       st: store.state,
  40       display: "live",
  41       liveGames: [],
  42       corrGames: [],
  43       conn: null,
  44       connexionString: ""
  45     };
  46   },
  47   created: function() {
  48     GameStorage.getAll(true, localGames => {
  49       localGames.forEach(g => g.type = "live");
  50       this.decorate(localGames);
  51       this.liveGames = localGames;
  52     });
  53     if (this.st.user.id > 0) {
  54       ajax(
  55         "/games",
  56         "GET",
  57         {
  58           data: { uid: this.st.user.id },
  59           success: (res) => {
  60             let serverGames = res.games.filter(g => {
  61               const mySide =
  62                 g.players[0].uid == this.st.user.id
  63                   ? "White"
  64                   : "Black";
  65               return !g["deletedBy" + mySide];
  66             });
  67             serverGames.forEach(g => g.type = "corr");
  68             this.decorate(serverGames);
  69             this.corrGames = serverGames;
  70           }
  71         }
  72       );
  73     }
  74     // Initialize connection
  75     this.connexionString =
  76       params.socketUrl +
  77       "/?sid=" +
  78       this.st.user.sid +
  79       "&id=" +
  80       this.st.user.id +
  81       "&tmpId=" +
  82       getRandString() +
  83       "&page=" +
  84       encodeURIComponent(this.$route.path);
  85     this.conn = new WebSocket(this.connexionString);
  86     this.conn.onmessage = this.socketMessageListener;
  87     this.conn.onclose = this.socketCloseListener;
  88   },
  89   mounted: function() {
  90     const showType = localStorage.getItem("type-myGames") || "live";
  91     this.setDisplay(showType);
  92   },
  93   beforeDestroy: function() {
  94     this.conn.send(JSON.stringify({code: "disconnect"}));
  95   },
  96   methods: {
  97     setDisplay: function(type, e) {
  98       this.display = type;
  99       localStorage.setItem("type-myGames", type);
 100       let elt = e ? e.target : document.getElementById(type + "Games");
 101       elt.classList.add("active");
 102       elt.classList.remove("somethingnew"); //in case of
 103       if (elt.previousElementSibling)
 104         elt.previousElementSibling.classList.remove("active");
 105       else elt.nextElementSibling.classList.remove("active");
 106     },
 107     tryShowNewsIndicator: function(type) {
 108       if (
 109         (type == "live" && this.display == "corr") ||
 110         (type == "corr" && this.display == "live")
 111       ) {
 112         document
 113           .getElementById(type + "Games")
 114           .classList.add("somethingnew");
 115       }
 116     },
 117     // Called at loading to augment games with myColor + myTurn infos
 118     decorate: function(games) {
 119       games.forEach(g => {
 120         // If game is over, myColor and myTurn are ignored:
 121         if (g.score == "*") {
 122           g.myColor =
 123             (g.type == "corr" && g.players[0].uid == this.st.user.id) ||
 124             (g.type == "live" && g.players[0].sid == this.st.user.sid)
 125               ? 'w'
 126               : 'b';
 127           const rem = g.movesCount % 2;
 128           if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b')) {
 129             g.myTurn = true;
 130           }
 131         }
 132       });
 133     },
 134     socketMessageListener: function(msg) {
 135       const data = JSON.parse(msg.data);
 136       let gamesArrays = {
 137         "corr": this.corrGames,
 138         "live": this.liveGames
 139       };
 140       switch (data.code) {
 141         case "notifyturn":
 142         case "notifyscore": {
 143           const info = data.data;
 144           const type = (!!parseInt(info.gid) ? "corr" : "live");
 145           let game = gamesArrays[type].find(g => g.id == info.gid);
 146           // "notifything" --> "thing":
 147           const thing = data.code.substr(6);
 148           game[thing] = info[thing];
 149           if (thing == "turn") game.myTurn = !game.myTurn;
 150           this.$forceUpdate();
 151           this.tryShowNewsIndicator(type);
 152           break;
 153         }
 154         case "notifynewgame": {
 155           const gameInfo = data.data;
 156           // st.variants might be uninitialized,
 157           // if unlucky and newgame right after connect:
 158           const v = this.st.variants.find(v => v.id == gameInfo.vid);
 159           const vname = !!v ? v.name : "";
 160           const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
 161           let game = Object.assign(
 162             {
 163               vname: vname,
 164               type: type,
 165               score: "*",
 166               created: Date.now()
 167             },
 168             gameInfo
 169           );
 170           game.myTurn =
 171             (type == "corr" && game.players[0].uid == this.st.user.id) ||
 172             (type == "live" && game.players[0].sid == this.st.user.sid);
 173           gamesArrays[type].push(game);
 174           this.$forceUpdate();
 175           this.tryShowNewsIndicator(type);
 176           break;
 177         }
 178       }
 179     },
 180     socketCloseListener: function() {
 181       this.conn = new WebSocket(this.connexionString);
 182       this.conn.addEventListener("message", this.socketMessageListener);
 183       this.conn.addEventListener("close", this.socketCloseListener);
 184     },
 185     showGame: function(game) {
 186       if (game.type == "live" || !game.myTurn) {
 187         this.$router.push("/game/" + game.id);
 188         return;
 189       }
 190       // It's my turn in this game. Are there others?
 191       let nextIds = "";
 192       let otherCorrGamesMyTurn = this.corrGames.filter(g =>
 193         g.id != game.id && !!g.myTurn);
 194       if (otherCorrGamesMyTurn.length > 0) {
 195         nextIds += "/?next=[";
 196         otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
 197         // Remove last comma and close array:
 198         nextIds = nextIds.slice(0, -1) + "]";
 199       }
 200       this.$router.push("/game/" + game.id + nextIds);
 201     },
 202     abortGame: function(game) {
 203       // Special "trans-pages" case: from MyGames to Game
 204       // TODO: also for corr games? (It's less important)
 205       if (game.type == "live") {
 206         const oppsid =
 207           game.players[0].sid == this.st.user.sid
 208             ? game.players[1].sid
 209             : game.players[0].sid;
 210         this.conn.send(
 211           JSON.stringify(
 212             {
 213               code: "mabort",
 214               gid: game.id,
 215               // NOTE: target might not be online
 216               target: oppsid
 217             }
 218           )
 219         );
 220       }
 221       else if (!game.deletedByWhite || !game.deletedByBlack) {
 222         // Set score if game isn't deleted on server:
 223         ajax(
 224           "/games",
 225           "PUT",
 226           {
 227             data: {
 228               gid: game.id,
 229               newObj: {
 230                 score: "?",
 231                 scoreMsg: getScoreMessage("?")
 232               }
 233             }
 234           }
 235         );
 236       }
 237     }
 238   }
 239 };
 240 </script>
 241
 242 <style lang="sass">
 243 .active
 244   color: #42a983
 245
 246 .tabbtn
 247   background-color: #f9faee
 248
 249 table.game-list
 250   max-height: 100%
 251
 252 .somethingnew
 253   background-color: #c5fefe !important
 254 </style>