Improvements - untested
[vchess.git] / client / src / views / MyGames.vue
CommitLineData
afd3240d
BA
1<template lang="pug">
2main
3 .row
4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
5 .button-group
910d631b
BA
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 )
afd3240d
BA
20</template>
21
22<script>
afd3240d
BA
23import { store } from "@/store";
24import { GameStorage } from "@/utils/gameStorage";
25import { ajax } from "@/utils/ajax";
26import GameList from "@/components/GameList.vue";
27export default {
89021f18 28 name: "my-my-games",
afd3240d 29 components: {
6808d7a1 30 GameList
afd3240d
BA
31 },
32 data: function() {
33 return {
34 st: store.state,
dac39588 35 display: "live",
2f258c37 36 liveGames: [],
db1f1f9a
BA
37 corrGames: [],
38 conn: null,
39 connexionString: ""
afd3240d
BA
40 };
41 },
42 created: function() {
db1f1f9a 43 GameStorage.getAll(true, localGames => {
6808d7a1 44 localGames.forEach(g => (g.type = this.classifyObject(g)));
2f258c37 45 this.liveGames = localGames;
afd3240d 46 });
6808d7a1
BA
47 if (this.st.user.id > 0) {
48 ajax("/games", "GET", { uid: this.st.user.id }, res => {
49 res.games.forEach(g => (g.type = this.classifyObject(g)));
2f258c37 50 this.corrGames = res.games;
afd3240d
BA
51 });
52 }
db1f1f9a
BA
53 // Initialize connection
54 this.connexionString =
55 params.socketUrl +
56 "/?sid=" +
57 this.st.user.sid +
58 "&tmpId=" +
59 getRandString() +
60 "&page=" +
61 encodeURIComponent(this.$route.path);
62 this.conn = new WebSocket(this.connexionString);
63 this.conn.onmessage = this.socketMessageListener;
64 this.conn.onclose = this.socketCloseListener;
afd3240d 65 },
2f258c37
BA
66 mounted: function() {
67 const showType = localStorage.getItem("type-myGames") || "live";
68 this.setDisplay(showType);
69 },
afd3240d 70 methods: {
2f258c37
BA
71 setDisplay: function(type, e) {
72 this.display = type;
73 localStorage.setItem("type-myGames", type);
6808d7a1 74 let elt = e ? e.target : document.getElementById(type + "Games");
2f258c37 75 elt.classList.add("active");
6808d7a1 76 if (elt.previousElementSibling)
2f258c37 77 elt.previousElementSibling.classList.remove("active");
6808d7a1 78 else elt.nextElementSibling.classList.remove("active");
2f258c37
BA
79 },
80 // TODO: classifyObject is redundant (see Hall.vue)
afd3240d 81 classifyObject: function(o) {
6808d7a1 82 return o.cadence.indexOf("d") === -1 ? "live" : "corr";
afd3240d 83 },
afd3240d 84 showGame: function(g) {
afd3240d 85 this.$router.push("/game/" + g.id);
db1f1f9a
BA
86 },
87 socketMessageListener: function(msg) {
88 const data = JSON.parse(msg.data);
89 // Only event is newmove, and received only:
90 if (data.code == "newmove") {
91 let games = !!parseInt(data.gid)
92 ? this.corrGames
93 : this.liveGames;
94 // NOTE: new move itself is not received, because it wouldn't be used.
95 let g = games.find(g => g.id == data.gid);
96 this.$set(g, "movesCount", g.movesCount + 1);
97 }
98 },
99 socketCloseListener: function() {
100 this.conn = new WebSocket(this.connexionString);
101 this.conn.addEventListener("message", this.socketMessageListener);
102 this.conn.addEventListener("close", this.socketCloseListener);
6808d7a1
BA
103 }
104 }
afd3240d
BA
105};
106</script>
2f258c37 107
e2590fa8 108<style lang="sass">
2f258c37
BA
109.active
110 color: #42a983
5fe7e71c
BA
111
112.tabbtn
113 background-color: #f9faee
e2590fa8
BA
114
115table.game-list
116 max-height: 100%
2f258c37 117</style>