Commit | Line | Data |
---|---|---|
85e5b5c1 | 1 | <template lang="pug"> |
7aa548e7 BA |
2 | div |
3 | table | |
4f887105 BA |
4 | thead |
5 | tr | |
602d6bef | 6 | th {{ st.tr["Variant"] }} |
bd76b456 BA |
7 | th {{ st.tr[showBoth ? "Players" : "Versus"] }} |
8 | th(v-if="showCadence") {{ st.tr["Cadence"] }} | |
26f3a887 | 9 | th {{ st.tr["Result"] }} |
4f887105 BA |
10 | tbody |
11 | tr(v-for="g in sortedGames" @click="$emit('show-game',g)" | |
12 | :class="{'my-turn': g.myTurn}") | |
bd76b456 BA |
13 | td {{ g.vname }} |
14 | td {{ player_s(g) }} | |
15 | td(v-if="showCadence") {{ g.cadence }} | |
16 | td(:class="{finished: g.score!='*'}" @click="deleteGame(g,$event)") | |
9ddaf8da | 17 | | {{ g.score }} |
85e5b5c1 BA |
18 | </template> |
19 | ||
20 | <script> | |
0b0dc040 | 21 | import { store } from "@/store"; |
9ddaf8da | 22 | import { GameStorage } from "@/utils/gameStorage"; |
85e5b5c1 BA |
23 | export default { |
24 | name: "my-game-list", | |
bd76b456 | 25 | props: ["games","showBoth"], |
0b0dc040 BA |
26 | data: function() { |
27 | return { | |
28 | st: store.state, | |
bd76b456 | 29 | showCadence: true, |
0b0dc040 BA |
30 | }; |
31 | }, | |
bd76b456 BA |
32 | mounted: function() { |
33 | // timeout to avoid calling too many time the adjust method | |
34 | let timeoutLaunched = false; | |
35 | window.addEventListener("resize", (e) => { | |
36 | if (!timeoutLaunched) | |
37 | { | |
38 | timeoutLaunched = true; | |
39 | setTimeout( () => { | |
40 | this.showCadence = window.innerWidth >= 425; //TODO: arbitrary | |
41 | timeoutLaunched = false; | |
42 | }, 500); | |
43 | } | |
44 | }); | |
45 | }, | |
dac39588 | 46 | computed: { |
0b0dc040 BA |
47 | sortedGames: function() { |
48 | // Show in order: games where it's my turn, my running games, my games, other games | |
bd76b456 BA |
49 | let minCreated = Number.MAX_SAFE_INTEGER |
50 | let maxCreated = 0 | |
0b0dc040 BA |
51 | let augmentedGames = this.games.map(g => { |
52 | let priority = 0; | |
53 | if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid)) | |
54 | { | |
55 | priority++; | |
56 | if (g.score == "*") | |
57 | { | |
58 | priority++; | |
59 | const myColor = g.players[0].uid == this.st.user.id | |
60 | || g.players[0].sid == this.st.user.sid | |
61 | ? "w" | |
62 | : "b"; | |
5fd5fb22 | 63 | // I play in this game, so g.fen will be defined |
0b0dc040 BA |
64 | if (!!g.fen.match(" " + myColor + " ")) |
65 | priority++; | |
66 | } | |
67 | } | |
bd76b456 BA |
68 | if (g.created < minCreated) |
69 | minCreated = g.created; | |
70 | if (g.created > maxCreated) | |
71 | maxCreated = g.created; | |
41c80bb6 | 72 | return Object.assign({}, g, {priority: priority, myTurn: priority==3}); |
0b0dc040 | 73 | }); |
bd76b456 BA |
74 | const deltaCreated = maxCreated - minCreated; |
75 | return augmentedGames.sort((g1,g2) => { | |
76 | return g2.priority - g1.priority + | |
77 | (g2.created - g1.created) / deltaCreated; | |
78 | }); | |
0b0dc040 BA |
79 | }, |
80 | }, | |
9ddaf8da | 81 | methods: { |
bd76b456 BA |
82 | player_s: function(g) { |
83 | if (this.showBoth) | |
84 | return (g.players[0].name || "@nonymous") + " - " + (g.players[1].name || "@nonymous"); | |
85 | if (this.st.user.sid == g.players[0].sid || this.st.user.id == g.players[0].uid) | |
86 | return g.players[1].name || "@nonymous"; | |
87 | return g.players[0].name || "@nonymous"; | |
88 | }, | |
9a3049f3 BA |
89 | deleteGame: function(game, e) { |
90 | if (game.score != "*") | |
91 | { | |
92 | if (confirm(this.st.tr["Remove game?"])) | |
93 | GameStorage.remove(game.id); | |
94 | e.stopPropagation(); | |
95 | } | |
9ddaf8da BA |
96 | }, |
97 | }, | |
85e5b5c1 BA |
98 | }; |
99 | </script> | |
0b0dc040 | 100 | |
41c80bb6 BA |
101 | <style lang="sass" scoped> |
102 | // TODO: understand why the style applied to <tr> element doesn't work | |
103 | tr.my-turn > td | |
104 | background-color: #fcd785 | |
9ddaf8da | 105 | tr td.finished |
9a3049f3 | 106 | background-color: #f5b7b1 |
0b0dc040 | 107 | </style> |