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(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         g.myColor =
 121           (g.type == "corr" && g.players[0].uid == this.st.user.id) ||
 122           (g.type == "live" && g.players[0].sid == this.st.user.sid)
 123             ? 'w'
 124             : 'b';
 125         // If game is over, myTurn doesn't exist:
 126         if (g.score == "*") {
 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     socketMessageListener: function(msg) {
 134       const data = JSON.parse(msg.data);
 135       let gamesArrays = {
 136         "corr": this.corrGames,
 137         "live": this.liveGames
 138       };
 139       switch (data.code) {
 140         case "notifyturn":
 141         case "notifyscore": {
 142           const info = data.data;
 143           const type = (!!parseInt(info.gid) ? "corr" : "live");
 144           let game = gamesArrays[type].find(g => g.id == info.gid);
 145           // "notifything" --> "thing":
 146           const thing = data.code.substr(6);
 147           game[thing] = info[thing];
 148           if (thing == "turn") game.myTurn = !game.myTurn;
 149           this.$forceUpdate();
 150           this.tryShowNewsIndicator(type);
 151           break;
 152         }
 153         case "notifynewgame": {
 154           const gameInfo = data.data;
 155           // st.variants might be uninitialized,
 156           // if unlucky and newgame right after connect:
 157           const v = this.st.variants.find(v => v.id == gameInfo.vid);
 158           const vname = !!v ? v.name : "";
 159           const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
 160           let game = Object.assign(
 161             {
 162               vname: vname,
 163               type: type,
 164               score: "*",
 165               created: Date.now()
 166             },
 167             gameInfo
 168           );
 169           game.myTurn =
 170             (type == "corr" && game.players[0].uid == this.st.user.id) ||
 171             (type == "live" && game.players[0].sid == this.st.user.sid);
 172           gamesArrays[type].push(game);
 173           this.$forceUpdate();
 174           this.tryShowNewsIndicator(type);
 175           break;
 176         }
 177       }
 178     },
 179     socketCloseListener: function() {
 180       this.conn = new WebSocket(this.connexionString);
 181       this.conn.addEventListener("message", this.socketMessageListener);
 182       this.conn.addEventListener("close", this.socketCloseListener);
 183     },
 184     showGame: function(game) {
 185       if (game.type == "live" || !game.myTurn) {
 186         this.$router.push("/game/" + game.id);
 187         return;
 188       }
 189       // It's my turn in this game. Are there others?
 190       let nextIds = "";
 191       let otherCorrGamesMyTurn = this.corrGames.filter(g =>
 192         g.id != game.id && !!g.myTurn);
 193       if (otherCorrGamesMyTurn.length > 0) {
 194         nextIds += "/?next=[";
 195         otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
 196         // Remove last comma and close array:
 197         nextIds = nextIds.slice(0, -1) + "]";
 198       }
 199       this.$router.push("/game/" + game.id + nextIds);
 200     },
 201     abortGame: function(game) {
 202       // Special "trans-pages" case: from MyGames to Game
 203       // TODO: also for corr games? (It's less important)
 204       if (game.type == "live") {
 205         const oppsid =
 206           game.players[0].sid == this.st.user.sid
 207             ? game.players[1].sid
 208             : game.players[0].sid;
 209         this.conn.send(
 210           JSON.stringify(
 211             {
 212               code: "mabort",
 213               gid: game.id,
 214               // NOTE: target might not be online
 215               target: oppsid
 216             }
 217           )
 218         );
 219       }
 220       else if (!game.deletedByWhite || !game.deletedByBlack) {
 221         // Set score if game isn't deleted on server:
 222         ajax(
 223           "/games",
 224           "PUT",
 225           {
 226             data: {
 227               gid: game.id,
 228               newObj: {
 229                 score: "?",
 230                 scoreMsg: getScoreMessage("?")
 231               }
 232             }
 233           }
 234         );
 235       }
 236     }
 237   }
 238 };
 239 </script>
 240
 241 <style lang="sass">
 242 .active
 243   color: #42a983
 244
 245 .tabbtn
 246   background-color: #f9faee
 247
 248 table.game-list
 249   max-height: 100%
 250
 251 .somethingnew
 252   background-color: #c5fefe !important
 253 </style>