Commit | Line | Data |
---|---|---|
85e5b5c1 | 1 | <template lang="pug"> |
7aa548e7 | 2 | div |
1c9826a5 | 3 | table.game-list(v-if="games.length > 0") |
4f887105 BA |
4 | thead |
5 | tr | |
602d6bef | 6 | th {{ st.tr["Variant"] }} |
bd76b456 BA |
7 | th {{ st.tr[showBoth ? "Players" : "Versus"] }} |
8 | th(v-if="showCadence") {{ st.tr["Cadence"] }} | |
26f3a887 | 9 | th {{ st.tr["Result"] }} |
4f887105 | 10 | tbody |
910d631b | 11 | tr( |
585d0955 | 12 | v-for="g in sortedGames()" |
910d631b | 13 | @click="$emit('show-game',g)" |
e727fe31 | 14 | :class="{'my-turn': !!g.myTurn}" |
910d631b | 15 | ) |
3d9745ae | 16 | td {{ g.vname + (g.options.abridged || '') }} |
bd76b456 BA |
17 | td {{ player_s(g) }} |
18 | td(v-if="showCadence") {{ g.cadence }} | |
910d631b | 19 | td( |
df647c70 | 20 | :class="scoreClass(g)" |
910d631b BA |
21 | @click="deleteGame(g,$event)" |
22 | ) | |
9ddaf8da | 23 | | {{ g.score }} |
1c9826a5 BA |
24 | p(v-else) |
25 | | {{ st.tr["No games found :( Send a challenge!"] }} | |
85e5b5c1 BA |
26 | </template> |
27 | ||
28 | <script> | |
0b0dc040 | 29 | import { store } from "@/store"; |
9ddaf8da | 30 | import { GameStorage } from "@/utils/gameStorage"; |
5f918a27 | 31 | import { ImportgameStorage } from "@/utils/importgameStorage"; |
aae89b49 | 32 | import { ajax } from "@/utils/ajax"; |
85e5b5c1 BA |
33 | export default { |
34 | name: "my-game-list", | |
6808d7a1 | 35 | props: ["games", "showBoth"], |
0b0dc040 BA |
36 | data: function() { |
37 | return { | |
38 | st: store.state, | |
8477e53d BA |
39 | deleted: {}, //mark deleted games |
40 | showCadence: window.innerWidth >= 425 //TODO: arbitrary value | |
0b0dc040 BA |
41 | }; |
42 | }, | |
bd76b456 BA |
43 | mounted: function() { |
44 | // timeout to avoid calling too many time the adjust method | |
45 | let timeoutLaunched = false; | |
6808d7a1 BA |
46 | window.addEventListener("resize", () => { |
47 | if (!timeoutLaunched) { | |
bd76b456 | 48 | timeoutLaunched = true; |
6808d7a1 | 49 | setTimeout(() => { |
8477e53d | 50 | this.showCadence = window.innerWidth >= 425; |
bd76b456 BA |
51 | timeoutLaunched = false; |
52 | }, 500); | |
53 | } | |
54 | }); | |
55 | }, | |
585d0955 BA |
56 | methods: { |
57 | player_s: function(g) { | |
58 | if (this.showBoth) | |
59 | return ( | |
60 | (g.players[0].name || "@nonymous") + | |
61 | " - " + | |
62 | (g.players[1].name || "@nonymous") | |
63 | ); | |
64 | if ( | |
65 | this.st.user.sid == g.players[0].sid || | |
0234201f | 66 | this.st.user.id == g.players[0].id |
5b18515f | 67 | ) { |
585d0955 | 68 | return g.players[1].name || "@nonymous"; |
5b18515f | 69 | } |
585d0955 BA |
70 | return g.players[0].name || "@nonymous"; |
71 | }, | |
0b0dc040 | 72 | sortedGames: function() { |
e727fe31 | 73 | // Show in order: it's my turn, running games, completed games |
6808d7a1 BA |
74 | let minCreated = Number.MAX_SAFE_INTEGER; |
75 | let maxCreated = 0; | |
b265313e BA |
76 | let remGames = this.games.filter(g => !this.deleted[g.id]); |
77 | remGames.forEach(g => { | |
e727fe31 BA |
78 | if (g.created < minCreated) minCreated = g.created; |
79 | if (g.created > maxCreated) maxCreated = g.created; | |
28b32b4f BA |
80 | g.priority = 0; |
81 | if (g.score == "*") { | |
82 | g.priority++; | |
83 | if (!!g.myColor) g.priority++; | |
84 | if (!!g.myTurn) g.priority++; | |
85 | } | |
e727fe31 | 86 | }); |
bd76b456 | 87 | const deltaCreated = maxCreated - minCreated; |
b265313e | 88 | return remGames.sort((g1, g2) => { |
6808d7a1 | 89 | return ( |
f14572c4 BA |
90 | g2.priority - g1.priority + |
91 | // Modulate with creation time (value in ]0,1[) | |
92 | (g2.created - g1.created) / (deltaCreated + 1) | |
6808d7a1 | 93 | ); |
bd76b456 | 94 | }); |
e727fe31 | 95 | }, |
df647c70 BA |
96 | scoreClass: function(g) { |
97 | if (g.score == "*" || !g.myColor) return {}; | |
98 | // Ok it's my finished game: determine if I won, drew or lost. | |
99 | let res = {}; | |
100 | switch (g.score) { | |
101 | case "1-0": | |
102 | res[g.myColor == "w" ? "won" : "lost"] = true; | |
103 | break; | |
104 | case "0-1": | |
105 | res[g.myColor == "b" ? "won" : "lost"] = true; | |
106 | break; | |
107 | case "1/2": | |
108 | res["draw"] = true; | |
109 | break; | |
110 | // default case: "?" for unknown finished | |
111 | default: | |
112 | res["unknown"] = true; | |
113 | } | |
114 | return res; | |
115 | }, | |
9a3049f3 | 116 | deleteGame: function(game, e) { |
f9c36b2d | 117 | if ( |
902378e6 BA |
118 | // Import ? |
119 | (typeof game.id == "string" && game.id.charAt(0) == 'i') || | |
aae89b49 | 120 | // My game ? |
f9c36b2d | 121 | game.players.some(p => |
0234201f | 122 | p.sid == this.st.user.sid || p.id == this.st.user.id |
f9c36b2d BA |
123 | ) |
124 | ) { | |
aae89b49 BA |
125 | const message = |
126 | game.score != "*" | |
127 | ? "Remove game?" | |
128 | : "Abort and remove game?"; | |
129 | if (confirm(this.st.tr[message])) { | |
130 | const afterDelete = () => { | |
5f918a27 BA |
131 | if (game.score == "*" && game.type != "import") |
132 | this.$emit("abortgame", game); | |
aae89b49 BA |
133 | this.$set(this.deleted, game.id, true); |
134 | }; | |
135 | if (game.type == "live") | |
136 | // Effectively remove game: | |
137 | GameStorage.remove(game.id, afterDelete); | |
5f918a27 BA |
138 | else if (game.type == "import") |
139 | ImportgameStorage.remove(game.id, afterDelete); | |
aae89b49 BA |
140 | else { |
141 | const mySide = | |
0234201f | 142 | game.players[0].id == this.st.user.id |
aae89b49 BA |
143 | ? "White" |
144 | : "Black"; | |
145 | game["deletedBy" + mySide] = true; | |
146 | // Mark the game for deletion on server | |
147 | // If both people mark it, it is deleted | |
148 | ajax( | |
149 | "/games", | |
150 | "PUT", | |
151 | { | |
e57c4de4 BA |
152 | data: { |
153 | gid: game.id, | |
154 | newObj: { removeFlag: true } | |
155 | }, | |
156 | success: afterDelete | |
157 | } | |
aae89b49 BA |
158 | ); |
159 | } | |
8477e53d | 160 | } |
9a3049f3 BA |
161 | e.stopPropagation(); |
162 | } | |
6808d7a1 BA |
163 | } |
164 | } | |
85e5b5c1 BA |
165 | }; |
166 | </script> | |
0b0dc040 | 167 | |
41c80bb6 | 168 | <style lang="sass" scoped> |
1c9826a5 BA |
169 | p |
170 | text-align: center | |
171 | font-weight: bold | |
172 | ||
910d631b | 173 | // NOTE: the style applied to <tr> element doesn't work |
41c80bb6 BA |
174 | tr.my-turn > td |
175 | background-color: #fcd785 | |
df647c70 BA |
176 | |
177 | tr | |
178 | td.lost | |
179 | background-color: #f5b7b1 | |
180 | td.won | |
181 | background-color: lightgreen | |
182 | td.draw | |
183 | background-color: lightblue | |
184 | td.unknown | |
185 | background-color: lightgrey | |
0b0dc040 | 186 | </style> |