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