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       )
  20 </template>
  21
  22 <script>
  23 import { store } from "@/store";
  24 import { GameStorage } from "@/utils/gameStorage";
  25 import { ajax } from "@/utils/ajax";
  26 import params from "@/parameters";
  27 import { getRandString } from "@/utils/alea";
  28 import GameList from "@/components/GameList.vue";
  29 export default {
  30   name: "my-my-games",
  31   components: {
  32     GameList
  33   },
  34   data: function() {
  35     return {
  36       st: store.state,
  37       display: "live",
  38       liveGames: [],
  39       corrGames: [],
  40       conn: null,
  41       connexionString: ""
  42     };
  43   },
  44   created: function() {
  45     GameStorage.getAll(true, localGames => {
  46
  47
  48 console.log(localGames);
  49
  50       localGames.forEach(g => (g.type = this.classifyObject(g)));
  51       this.liveGames = localGames;
  52     });
  53     if (this.st.user.id > 0) {
  54       ajax("/games", "GET", { uid: this.st.user.id }, res => {
  55         res.games.forEach(g => (g.type = this.classifyObject(g)));
  56         this.corrGames = res.games;
  57       });
  58     }
  59     // Initialize connection
  60     this.connexionString =
  61       params.socketUrl +
  62       "/?sid=" +
  63       this.st.user.sid +
  64       "&tmpId=" +
  65       getRandString() +
  66       "&page=" +
  67       encodeURIComponent(this.$route.path);
  68     this.conn = new WebSocket(this.connexionString);
  69     this.conn.onmessage = this.socketMessageListener;
  70     this.conn.onclose = this.socketCloseListener;
  71   },
  72   mounted: function() {
  73     const showType = localStorage.getItem("type-myGames") || "live";
  74     this.setDisplay(showType);
  75   },
  76   beforeDestroy: function() {
  77     this.conn.send(JSON.stringify({code: "disconnect"}));
  78   },
  79   methods: {
  80     setDisplay: function(type, e) {
  81       this.display = type;
  82       localStorage.setItem("type-myGames", type);
  83       let elt = e ? e.target : document.getElementById(type + "Games");
  84       elt.classList.add("active");
  85       elt.classList.remove("somethingnew"); //in case of
  86       if (elt.previousElementSibling)
  87         elt.previousElementSibling.classList.remove("active");
  88       else elt.nextElementSibling.classList.remove("active");
  89     },
  90     // TODO: classifyObject is redundant (see Hall.vue)
  91     classifyObject: function(o) {
  92       return o.cadence.indexOf("d") === -1 ? "live" : "corr";
  93     },
  94     showGame: function(g) {
  95       this.$router.push("/game/" + g.id);
  96     },
  97     socketMessageListener: function(msg) {
  98       const data = JSON.parse(msg.data);
  99       // Only event is newmove, and received only:
 100       if (data.code == "newmove") {
 101         let games = !!parseInt(data.gid)
 102           ? this.corrGames
 103           : this.liveGames;
 104         // NOTE: new move itself is not received, because it wouldn't be used.
 105         let g = games.find(g => g.id == data.gid);
 106         this.$set(g, "movesCount", g.movesCount + 1);
 107         if (
 108           (g.type == "live" && this.display == "corr") ||
 109           (g.type == "corr" && this.display == "live")
 110         ) {
 111           document
 112             .getElementById(g.type + "Games")
 113             .classList.add("somethingnew");
 114         }
 115       }
 116     },
 117     socketCloseListener: function() {
 118       this.conn = new WebSocket(this.connexionString);
 119       this.conn.addEventListener("message", this.socketMessageListener);
 120       this.conn.addEventListener("close", this.socketCloseListener);
 121     }
 122   }
 123 };
 124 </script>
 125
 126 <style lang="sass">
 127 .active
 128   color: #42a983
 129
 130 .tabbtn
 131   background-color: #f9faee
 132
 133 table.game-list
 134   max-height: 100%
 135
 136 .somethingnew
 137   background-color: #c5fefe !important
 138 </style>