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