2701e9ef942926dbae0a98183e102cd365ff407d
[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 @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>