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