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 | 10 | tbody |
910d631b BA |
11 | tr( |
12 | v-for="g in sortedGames" | |
13 | @click="$emit('show-game',g)" | |
14 | :class="{'my-turn': g.myTurn}" | |
15 | ) | |
bd76b456 BA |
16 | td {{ g.vname }} |
17 | td {{ player_s(g) }} | |
18 | td(v-if="showCadence") {{ g.cadence }} | |
910d631b | 19 | td( |
df647c70 | 20 | :class="scoreClass(g)" |
910d631b BA |
21 | @click="deleteGame(g,$event)" |
22 | ) | |
9ddaf8da | 23 | | {{ g.score }} |
85e5b5c1 BA |
24 | </template> |
25 | ||
26 | <script> | |
0b0dc040 | 27 | import { store } from "@/store"; |
9ddaf8da | 28 | import { GameStorage } from "@/utils/gameStorage"; |
85e5b5c1 BA |
29 | export default { |
30 | name: "my-game-list", | |
6808d7a1 | 31 | props: ["games", "showBoth"], |
0b0dc040 BA |
32 | data: function() { |
33 | return { | |
34 | st: store.state, | |
6808d7a1 | 35 | showCadence: true |
0b0dc040 BA |
36 | }; |
37 | }, | |
bd76b456 BA |
38 | mounted: function() { |
39 | // timeout to avoid calling too many time the adjust method | |
40 | let timeoutLaunched = false; | |
6808d7a1 BA |
41 | window.addEventListener("resize", () => { |
42 | if (!timeoutLaunched) { | |
bd76b456 | 43 | timeoutLaunched = true; |
6808d7a1 | 44 | setTimeout(() => { |
bd76b456 BA |
45 | this.showCadence = window.innerWidth >= 425; //TODO: arbitrary |
46 | timeoutLaunched = false; | |
47 | }, 500); | |
48 | } | |
49 | }); | |
50 | }, | |
dac39588 | 51 | computed: { |
0b0dc040 BA |
52 | sortedGames: function() { |
53 | // Show in order: games where it's my turn, my running games, my games, other games | |
6808d7a1 BA |
54 | let minCreated = Number.MAX_SAFE_INTEGER; |
55 | let maxCreated = 0; | |
0b0dc040 BA |
56 | let augmentedGames = this.games.map(g => { |
57 | let priority = 0; | |
df647c70 | 58 | let myColor = undefined; |
6808d7a1 BA |
59 | if ( |
60 | g.players.some( | |
61 | p => p.uid == this.st.user.id || p.sid == this.st.user.sid | |
62 | ) | |
63 | ) { | |
0b0dc040 | 64 | priority++; |
df647c70 BA |
65 | myColor = |
66 | g.players[0].uid == this.st.user.id || | |
67 | g.players[0].sid == this.st.user.sid | |
68 | ? "w" | |
69 | : "b"; | |
6808d7a1 | 70 | if (g.score == "*") { |
0b0dc040 | 71 | priority++; |
5fd5fb22 | 72 | // I play in this game, so g.fen will be defined |
df647c70 BA |
73 | // NOTE: this is a fragile way to detect turn, |
74 | // but since V isn't defined let's do that for now. (TODO:) | |
75 | //if (V.ParseFen(g.fen).turn == myColor) | |
6808d7a1 | 76 | if (g.fen.match(" " + myColor + " ")) priority++; |
0b0dc040 BA |
77 | } |
78 | } | |
6808d7a1 BA |
79 | if (g.created < minCreated) minCreated = g.created; |
80 | if (g.created > maxCreated) maxCreated = g.created; | |
81 | return Object.assign({}, g, { | |
82 | priority: priority, | |
df647c70 BA |
83 | myTurn: priority == 3, |
84 | myColor: myColor | |
6808d7a1 | 85 | }); |
0b0dc040 | 86 | }); |
bd76b456 | 87 | const deltaCreated = maxCreated - minCreated; |
6808d7a1 BA |
88 | return augmentedGames.sort((g1, g2) => { |
89 | return ( | |
90 | g2.priority - g1.priority + (g2.created - g1.created) / deltaCreated | |
91 | ); | |
bd76b456 | 92 | }); |
6808d7a1 | 93 | } |
0b0dc040 | 94 | }, |
9ddaf8da | 95 | methods: { |
bd76b456 BA |
96 | player_s: function(g) { |
97 | if (this.showBoth) | |
6808d7a1 BA |
98 | return ( |
99 | (g.players[0].name || "@nonymous") + | |
100 | " - " + | |
101 | (g.players[1].name || "@nonymous") | |
102 | ); | |
103 | if ( | |
104 | this.st.user.sid == g.players[0].sid || | |
105 | this.st.user.id == g.players[0].uid | |
106 | ) | |
bd76b456 BA |
107 | return g.players[1].name || "@nonymous"; |
108 | return g.players[0].name || "@nonymous"; | |
109 | }, | |
df647c70 BA |
110 | scoreClass: function(g) { |
111 | if (g.score == "*" || !g.myColor) return {}; | |
112 | // Ok it's my finished game: determine if I won, drew or lost. | |
113 | let res = {}; | |
114 | switch (g.score) { | |
115 | case "1-0": | |
116 | res[g.myColor == "w" ? "won" : "lost"] = true; | |
117 | break; | |
118 | case "0-1": | |
119 | res[g.myColor == "b" ? "won" : "lost"] = true; | |
120 | break; | |
121 | case "1/2": | |
122 | res["draw"] = true; | |
123 | break; | |
124 | // default case: "?" for unknown finished | |
125 | default: | |
126 | res["unknown"] = true; | |
127 | } | |
128 | return res; | |
129 | }, | |
9a3049f3 | 130 | deleteGame: function(game, e) { |
6808d7a1 BA |
131 | if (game.score != "*") { |
132 | if (confirm(this.st.tr["Remove game?"])) GameStorage.remove(game.id); | |
9a3049f3 BA |
133 | e.stopPropagation(); |
134 | } | |
6808d7a1 BA |
135 | } |
136 | } | |
85e5b5c1 BA |
137 | }; |
138 | </script> | |
0b0dc040 | 139 | |
41c80bb6 | 140 | <style lang="sass" scoped> |
910d631b | 141 | // NOTE: the style applied to <tr> element doesn't work |
41c80bb6 BA |
142 | tr.my-turn > td |
143 | background-color: #fcd785 | |
df647c70 BA |
144 | |
145 | tr | |
146 | td.lost | |
147 | background-color: #f5b7b1 | |
148 | td.won | |
149 | background-color: lightgreen | |
150 | td.draw | |
151 | background-color: lightblue | |
152 | td.unknown | |
153 | background-color: lightgrey | |
0b0dc040 | 154 | </style> |