Better display on main Hall when no challenges or games found
[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";
23ecf008
BA
26import params from "@/parameters";
27import { getRandString } from "@/utils/alea";
afd3240d
BA
28import GameList from "@/components/GameList.vue";
29export default {
89021f18 30 name: "my-my-games",
afd3240d 31 components: {
6808d7a1 32 GameList
afd3240d
BA
33 },
34 data: function() {
35 return {
36 st: store.state,
dac39588 37 display: "live",
2f258c37 38 liveGames: [],
db1f1f9a
BA
39 corrGames: [],
40 conn: null,
41 connexionString: ""
afd3240d
BA
42 };
43 },
44 created: function() {
db1f1f9a 45 GameStorage.getAll(true, localGames => {
6808d7a1 46 localGames.forEach(g => (g.type = this.classifyObject(g)));
2f258c37 47 this.liveGames = localGames;
afd3240d 48 });
6808d7a1
BA
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)));
2f258c37 52 this.corrGames = res.games;
afd3240d
BA
53 });
54 }
db1f1f9a
BA
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;
afd3240d 67 },
2f258c37
BA
68 mounted: function() {
69 const showType = localStorage.getItem("type-myGames") || "live";
70 this.setDisplay(showType);
71 },
23ecf008
BA
72 beforeDestroy: function() {
73 this.conn.send(JSON.stringify({code: "disconnect"}));
74 },
afd3240d 75 methods: {
2f258c37
BA
76 setDisplay: function(type, e) {
77 this.display = type;
78 localStorage.setItem("type-myGames", type);
6808d7a1 79 let elt = e ? e.target : document.getElementById(type + "Games");
2f258c37 80 elt.classList.add("active");
23ecf008 81 elt.classList.remove("somethingnew"); //in case of
6808d7a1 82 if (elt.previousElementSibling)
2f258c37 83 elt.previousElementSibling.classList.remove("active");
6808d7a1 84 else elt.nextElementSibling.classList.remove("active");
2f258c37
BA
85 },
86 // TODO: classifyObject is redundant (see Hall.vue)
afd3240d 87 classifyObject: function(o) {
6808d7a1 88 return o.cadence.indexOf("d") === -1 ? "live" : "corr";
afd3240d 89 },
afd3240d 90 showGame: function(g) {
afd3240d 91 this.$router.push("/game/" + g.id);
db1f1f9a
BA
92 },
93 socketMessageListener: function(msg) {
94 const data = JSON.parse(msg.data);
f9c36b2d 95 if (data.code == "changeturn") {
db1f1f9a
BA
96 let games = !!parseInt(data.gid)
97 ? this.corrGames
98 : this.liveGames;
99 // NOTE: new move itself is not received, because it wouldn't be used.
100 let g = games.find(g => g.id == data.gid);
101 this.$set(g, "movesCount", g.movesCount + 1);
23ecf008
BA
102 if (
103 (g.type == "live" && this.display == "corr") ||
104 (g.type == "corr" && this.display == "live")
105 ) {
106 document
107 .getElementById(g.type + "Games")
108 .classList.add("somethingnew");
109 }
db1f1f9a
BA
110 }
111 },
112 socketCloseListener: function() {
113 this.conn = new WebSocket(this.connexionString);
114 this.conn.addEventListener("message", this.socketMessageListener);
115 this.conn.addEventListener("close", this.socketCloseListener);
6808d7a1
BA
116 }
117 }
afd3240d
BA
118};
119</script>
2f258c37 120
e2590fa8 121<style lang="sass">
2f258c37
BA
122.active
123 color: #42a983
5fe7e71c
BA
124
125.tabbtn
126 background-color: #f9faee
e2590fa8
BA
127
128table.game-list
129 max-height: 100%
23ecf008
BA
130
131.somethingnew
132 background-color: #c5fefe !important
2f258c37 133</style>