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