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