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.liveGames = localGames;
  51     });
  52     if (this.st.user.id > 0) {
  53       ajax(
  54         "/games",
  55         "GET",
  56         {
  57           data: { uid: this.st.user.id },
  58           success: (res) => {
  59             let serverGames = res.games.filter(g => {
  60               const mySide =
  61                 g.players[0].uid == this.st.user.id
  62                   ? "White"
  63                   : "Black";
  64               return !g["deletedBy" + mySide];
  65             });
  66             serverGames.forEach(g => g.type = "corr");
  67             this.corrGames = serverGames;
  68           }
  69         }
  70       );
  71     }
  72     // Initialize connection
  73     this.connexionString =
  74       params.socketUrl +
  75       "/?sid=" +
  76       this.st.user.sid +
  77       "&tmpId=" +
  78       getRandString() +
  79       "&page=" +
  80       encodeURIComponent(this.$route.path);
  81     this.conn = new WebSocket(this.connexionString);
  82     this.conn.onmessage = this.socketMessageListener;
  83     this.conn.onclose = this.socketCloseListener;
  84   },
  85   mounted: function() {
  86     const showType = localStorage.getItem("type-myGames") || "live";
  87     this.setDisplay(showType);
  88   },
  89   beforeDestroy: function() {
  90     this.conn.send(JSON.stringify({code: "disconnect"}));
  91   },
  92   methods: {
  93     setDisplay: function(type, e) {
  94       this.display = type;
  95       localStorage.setItem("type-myGames", type);
  96       let elt = e ? e.target : document.getElementById(type + "Games");
  97       elt.classList.add("active");
  98       elt.classList.remove("somethingnew"); //in case of
  99       if (elt.previousElementSibling)
 100         elt.previousElementSibling.classList.remove("active");
 101       else elt.nextElementSibling.classList.remove("active");
 102     },
 103     // TODO: classifyObject is redundant (see Hall.vue)
 104     classifyObject: function(o) {
 105       return o.cadence.indexOf("d") === -1 ? "live" : "corr";
 106     },
 107     showGame: function(game) {
 108       // TODO: "isMyTurn" is duplicated (see GameList component). myColor also
 109       const isMyTurn = (g) => {
 110         if (g.score != "*") return false;
 111         const myColor =
 112           g.players[0].uid == this.st.user.id ||
 113           g.players[0].sid == this.st.user.sid
 114             ? "w"
 115             : "b";
 116         const rem = g.movesCount % 2;
 117         return (
 118           (rem == 0 && myColor == "w") ||
 119           (rem == 1 && myColor == "b")
 120         );
 121       };
 122       if (game.type == "live" || !isMyTurn(game)) {
 123         this.$router.push("/game/" + game.id);
 124         return;
 125       }
 126       // It's my turn in this game. Are there others?
 127       let nextIds = "";
 128       let otherCorrGamesMyTurn = this.corrGames.filter(
 129         g => g.id != game.id && isMyTurn(g));
 130       if (otherCorrGamesMyTurn.length > 0) {
 131         nextIds += "/?next=[";
 132         otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
 133         // Remove last comma and close array:
 134         nextIds = nextIds.slice(0, -1) + "]";
 135       }
 136       this.$router.push("/game/" + game.id + nextIds);
 137     },
 138     abortGame: function(game) {
 139       // Special "trans-pages" case: from MyGames to Game
 140       // TODO: also for corr games? (It's less important)
 141       if (game.type == "live") {
 142         const oppsid =
 143           game.players[0].sid == this.st.user.sid
 144             ? game.players[1].sid
 145             : game.players[0].sid;
 146         this.conn.send(
 147           JSON.stringify(
 148             {
 149               code: "mabort",
 150               gid: game.id,
 151               // NOTE: target might not be online
 152               target: oppsid
 153             }
 154           )
 155         );
 156       }
 157       else if (!game.deletedByWhite || !game.deletedByBlack) {
 158         // Set score if game isn't deleted on server:
 159         ajax(
 160           "/games",
 161           "PUT",
 162           {
 163             data: {
 164               gid: game.id,
 165               newObj: {
 166                 score: "?",
 167                 scoreMsg: getScoreMessage("?")
 168               }
 169             }
 170           }
 171         );
 172       }
 173     },
 174     socketMessageListener: function(msg) {
 175       const data = JSON.parse(msg.data);
 176       if (data.code == "changeturn") {
 177         let games = !!parseInt(data.gid)
 178           ? this.corrGames
 179           : this.liveGames;
 180         // NOTE: new move itself is not received, because it wouldn't be used.
 181         let g = games.find(g => g.id == data.gid);
 182         this.$set(g, "movesCount", g.movesCount + 1);
 183         if (
 184           (g.type == "live" && this.display == "corr") ||
 185           (g.type == "corr" && this.display == "live")
 186         ) {
 187           document
 188             .getElementById(g.type + "Games")
 189             .classList.add("somethingnew");
 190         }
 191       }
 192     },
 193     socketCloseListener: function() {
 194       this.conn = new WebSocket(this.connexionString);
 195       this.conn.addEventListener("message", this.socketMessageListener);
 196       this.conn.addEventListener("close", this.socketCloseListener);
 197     }
 198   }
 199 };
 200 </script>
 201
 202 <style lang="sass">
 203 .active
 204   color: #42a983
 205
 206 .tabbtn
 207   background-color: #f9faee
 208
 209 table.game-list
 210   max-height: 100%
 211
 212 .somethingnew
 213   background-color: #c5fefe !important
 214 </style>