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"] }} | |
f44fd3bf | 9 | th {{ st.tr["Cadence"] }} |
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" }} | |
71468011 | 17 | td(data-label="Time control") {{ g.cadence }} |
9ddaf8da BA |
18 | td(data-label="Result" :class="{finished: g.score!='*'}" |
19 | @click.stop="deleteGame(g)") | |
20 | | {{ g.score }} | |
85e5b5c1 BA |
21 | </template> |
22 | ||
23 | <script> | |
0b0dc040 | 24 | import { store } from "@/store"; |
9ddaf8da | 25 | import { GameStorage } from "@/utils/gameStorage"; |
85e5b5c1 BA |
26 | export default { |
27 | name: "my-game-list", | |
dac39588 | 28 | props: ["games"], |
0b0dc040 BA |
29 | data: function() { |
30 | return { | |
31 | st: store.state, | |
0b0dc040 BA |
32 | }; |
33 | }, | |
dac39588 | 34 | computed: { |
71468011 | 35 | // TODO: also sort by g.created |
0b0dc040 BA |
36 | sortedGames: function() { |
37 | // Show in order: games where it's my turn, my running games, my games, other games | |
0b0dc040 BA |
38 | let augmentedGames = this.games.map(g => { |
39 | let priority = 0; | |
40 | if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid)) | |
41 | { | |
42 | priority++; | |
43 | if (g.score == "*") | |
44 | { | |
45 | priority++; | |
46 | const myColor = g.players[0].uid == this.st.user.id | |
47 | || g.players[0].sid == this.st.user.sid | |
48 | ? "w" | |
49 | : "b"; | |
5fd5fb22 | 50 | // I play in this game, so g.fen will be defined |
0b0dc040 BA |
51 | if (!!g.fen.match(" " + myColor + " ")) |
52 | priority++; | |
53 | } | |
54 | } | |
41c80bb6 | 55 | return Object.assign({}, g, {priority: priority, myTurn: priority==3}); |
0b0dc040 BA |
56 | }); |
57 | return augmentedGames.sort((g1,g2) => { return g2.priority - g1.priority; }); | |
58 | }, | |
59 | }, | |
9ddaf8da BA |
60 | methods: { |
61 | deleteGame: function(game) { | |
62 | if (confirm(this.st.tr["Remove game ?"])) | |
63 | GameStorage.remove(game.id); | |
64 | }, | |
65 | }, | |
85e5b5c1 BA |
66 | }; |
67 | </script> | |
0b0dc040 | 68 | |
41c80bb6 BA |
69 | <style lang="sass" scoped> |
70 | // TODO: understand why the style applied to <tr> element doesn't work | |
71 | tr.my-turn > td | |
72 | background-color: #fcd785 | |
9ddaf8da BA |
73 | tr td.finished |
74 | background-color: red | |
0b0dc040 | 75 | </style> |