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