Some graphical improvements (first attempt)
[vchess.git] / client / src / components / GameList.vue
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>