Commit | Line | Data |
---|---|---|
afd3240d BA |
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 | |
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 |
23 | import { store } from "@/store"; |
24 | import { GameStorage } from "@/utils/gameStorage"; | |
25 | import { ajax } from "@/utils/ajax"; | |
23ecf008 BA |
26 | import params from "@/parameters"; |
27 | import { getRandString } from "@/utils/alea"; | |
afd3240d BA |
28 | import GameList from "@/components/GameList.vue"; |
29 | export 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 => { |
1aaae6ce BA |
46 | |
47 | ||
48 | console.log(localGames); | |
49 | ||
6808d7a1 | 50 | localGames.forEach(g => (g.type = this.classifyObject(g))); |
2f258c37 | 51 | this.liveGames = localGames; |
afd3240d | 52 | }); |
6808d7a1 BA |
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))); | |
2f258c37 | 56 | this.corrGames = res.games; |
afd3240d BA |
57 | }); |
58 | } | |
db1f1f9a BA |
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; | |
afd3240d | 71 | }, |
2f258c37 BA |
72 | mounted: function() { |
73 | const showType = localStorage.getItem("type-myGames") || "live"; | |
74 | this.setDisplay(showType); | |
75 | }, | |
23ecf008 BA |
76 | beforeDestroy: function() { |
77 | this.conn.send(JSON.stringify({code: "disconnect"})); | |
78 | }, | |
afd3240d | 79 | methods: { |
2f258c37 BA |
80 | setDisplay: function(type, e) { |
81 | this.display = type; | |
82 | localStorage.setItem("type-myGames", type); | |
6808d7a1 | 83 | let elt = e ? e.target : document.getElementById(type + "Games"); |
2f258c37 | 84 | elt.classList.add("active"); |
23ecf008 | 85 | elt.classList.remove("somethingnew"); //in case of |
6808d7a1 | 86 | if (elt.previousElementSibling) |
2f258c37 | 87 | elt.previousElementSibling.classList.remove("active"); |
6808d7a1 | 88 | else elt.nextElementSibling.classList.remove("active"); |
2f258c37 BA |
89 | }, |
90 | // TODO: classifyObject is redundant (see Hall.vue) | |
afd3240d | 91 | classifyObject: function(o) { |
6808d7a1 | 92 | return o.cadence.indexOf("d") === -1 ? "live" : "corr"; |
afd3240d | 93 | }, |
afd3240d | 94 | showGame: function(g) { |
afd3240d | 95 | this.$router.push("/game/" + g.id); |
db1f1f9a BA |
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); | |
23ecf008 BA |
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 | } | |
db1f1f9a BA |
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); | |
6808d7a1 BA |
121 | } |
122 | } | |
afd3240d BA |
123 | }; |
124 | </script> | |
2f258c37 | 125 | |
e2590fa8 | 126 | <style lang="sass"> |
2f258c37 BA |
127 | .active |
128 | color: #42a983 | |
5fe7e71c BA |
129 | |
130 | .tabbtn | |
131 | background-color: #f9faee | |
e2590fa8 BA |
132 | |
133 | table.game-list | |
134 | max-height: 100% | |
23ecf008 BA |
135 | |
136 | .somethingnew | |
137 | background-color: #c5fefe !important | |
2f258c37 | 138 | </style> |