Fix README, TODO and a mistake in MyGames
[vchess.git] / 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 localGames.forEach(g => (g.type = this.classifyObject(g)));
47 this.liveGames = localGames;
48 });
49 if (this.st.user.id > 0) {
50 ajax("/games", "GET", { uid: this.st.user.id }, res => {
51 res.games.forEach(g => (g.type = this.classifyObject(g)));
52 this.corrGames = res.games;
53 });
54 }
55 // Initialize connection
56 this.connexionString =
57 params.socketUrl +
58 "/?sid=" +
59 this.st.user.sid +
60 "&tmpId=" +
61 getRandString() +
62 "&page=" +
63 encodeURIComponent(this.$route.path);
64 this.conn = new WebSocket(this.connexionString);
65 this.conn.onmessage = this.socketMessageListener;
66 this.conn.onclose = this.socketCloseListener;
67 },
68 mounted: function() {
69 const showType = localStorage.getItem("type-myGames") || "live";
70 this.setDisplay(showType);
71 },
72 beforeDestroy: function() {
73 this.conn.send(JSON.stringify({code: "disconnect"}));
74 },
75 methods: {
76 setDisplay: function(type, e) {
77 this.display = type;
78 localStorage.setItem("type-myGames", type);
79 let elt = e ? e.target : document.getElementById(type + "Games");
80 elt.classList.add("active");
81 elt.classList.remove("somethingnew"); //in case of
82 if (elt.previousElementSibling)
83 elt.previousElementSibling.classList.remove("active");
84 else elt.nextElementSibling.classList.remove("active");
85 },
86 // TODO: classifyObject is redundant (see Hall.vue)
87 classifyObject: function(o) {
88 return o.cadence.indexOf("d") === -1 ? "live" : "corr";
89 },
90 showGame: function(game) {
91 // TODO: "isMyTurn" is duplicated (see GameList component). myColor also
92 const isMyTurn = (g) => {
93 if (g.score != "*") return false;
94 const myColor =
95 g.players[0].uid == this.st.user.id ||
96 g.players[0].sid == this.st.user.sid
97 ? "w"
98 : "b";
99 const rem = g.movesCount % 2;
100 return (
101 (rem == 0 && myColor == "w") ||
102 (rem == 1 && myColor == "b")
103 );
104 };
105 if (game.type == "live" || !isMyTurn(game)) {
106 this.$router.push("/game/" + game.id);
107 return;
108 }
109 // It's my turn in this game. Are there others?
110 let nextIds = "";
111 let otherCorrGamesMyTurn = this.corrGames.filter(
112 g => g.id != game.id && isMyTurn(g));
113 if (otherCorrGamesMyTurn.length > 0) {
114 nextIds += "/?next=[";
115 otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
116 // Remove last comma and close array:
117 nextIds = nextIds.slice(0, -1) + "]";
118 }
119 this.$router.push("/game/" + game.id + nextIds);
120 },
121 socketMessageListener: function(msg) {
122 const data = JSON.parse(msg.data);
123 if (data.code == "changeturn") {
124 let games = !!parseInt(data.gid)
125 ? this.corrGames
126 : this.liveGames;
127 // NOTE: new move itself is not received, because it wouldn't be used.
128 let g = games.find(g => g.id == data.gid);
129 this.$set(g, "movesCount", g.movesCount + 1);
130 if (
131 (g.type == "live" && this.display == "corr") ||
132 (g.type == "corr" && this.display == "live")
133 ) {
134 document
135 .getElementById(g.type + "Games")
136 .classList.add("somethingnew");
137 }
138 }
139 },
140 socketCloseListener: function() {
141 this.conn = new WebSocket(this.connexionString);
142 this.conn.addEventListener("message", this.socketMessageListener);
143 this.conn.addEventListener("close", this.socketCloseListener);
144 }
145 }
146 };
147 </script>
148
149 <style lang="sass">
150 .active
151 color: #42a983
152
153 .tabbtn
154 background-color: #f9faee
155
156 table.game-list
157 max-height: 100%
158
159 .somethingnew
160 background-color: #c5fefe !important
161 </style>