Commit | Line | Data |
---|---|---|
85e5b5c1 | 1 | <template lang="pug"> |
7aa548e7 BA |
2 | div |
3 | table | |
4f887105 BA |
4 | thead |
5 | tr | |
602d6bef BA |
6 | th {{ st.tr["Variant"] }} |
7 | th {{ st.tr["White"] }} | |
8 | th {{ st.tr["Black"] }} | |
9 | th {{ st.tr["Time control"] }} | |
26f3a887 | 10 | th {{ st.tr["Result"] }} |
4f887105 BA |
11 | tbody |
12 | tr(v-for="g in sortedGames" @click="$emit('show-game',g)" | |
13 | :class="{'my-turn': g.myTurn}") | |
14 | td(data-label="Variant") {{ g.vname }} | |
15 | td(data-label="White") {{ g.players[0].name || "@nonymous" }} | |
16 | td(data-label="Black") {{ g.players[1].name || "@nonymous" }} | |
17 | td(data-label="Time control") {{ g.timeControl }} | |
26f3a887 | 18 | td(data-label="Result") {{ g.score }} |
85e5b5c1 BA |
19 | </template> |
20 | ||
21 | <script> | |
0b0dc040 BA |
22 | import { store } from "@/store"; |
23 | ||
85e5b5c1 BA |
24 | export default { |
25 | name: "my-game-list", | |
dac39588 | 26 | props: ["games"], |
0b0dc040 BA |
27 | data: function() { |
28 | return { | |
29 | st: store.state, | |
0b0dc040 BA |
30 | }; |
31 | }, | |
dac39588 | 32 | computed: { |
0b0dc040 BA |
33 | sortedGames: function() { |
34 | // Show in order: games where it's my turn, my running games, my games, other games | |
0b0dc040 BA |
35 | let augmentedGames = this.games.map(g => { |
36 | let priority = 0; | |
37 | if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid)) | |
38 | { | |
39 | priority++; | |
40 | if (g.score == "*") | |
41 | { | |
42 | priority++; | |
43 | const myColor = g.players[0].uid == this.st.user.id | |
44 | || g.players[0].sid == this.st.user.sid | |
45 | ? "w" | |
46 | : "b"; | |
5fd5fb22 | 47 | // I play in this game, so g.fen will be defined |
0b0dc040 BA |
48 | if (!!g.fen.match(" " + myColor + " ")) |
49 | priority++; | |
50 | } | |
51 | } | |
41c80bb6 | 52 | return Object.assign({}, g, {priority: priority, myTurn: priority==3}); |
0b0dc040 BA |
53 | }); |
54 | return augmentedGames.sort((g1,g2) => { return g2.priority - g1.priority; }); | |
55 | }, | |
56 | }, | |
85e5b5c1 BA |
57 | }; |
58 | </script> | |
0b0dc040 | 59 | |
41c80bb6 BA |
60 | <style lang="sass" scoped> |
61 | // TODO: understand why the style applied to <tr> element doesn't work | |
62 | tr.my-turn > td | |
63 | background-color: #fcd785 | |
0b0dc040 | 64 | </style> |