6 th {{ st.tr["Variant"] }}
7 th {{ st.tr[showBoth ? "Players" : "Versus"] }}
8 th(v-if="showCadence") {{ st.tr["Cadence"] }}
9 th {{ st.tr["Result"] }}
11 tr(v-for="g in sortedGames" @click="$emit('show-game',g)"
12 :class="{'my-turn': g.myTurn}")
15 td(v-if="showCadence") {{ g.cadence }}
16 td(:class="{finished: g.score!='*'}" @click="deleteGame(g,$event)")
21 import { store } from "@/store";
22 import { GameStorage } from "@/utils/gameStorage";
25 props: ["games","showBoth"],
33 // timeout to avoid calling too many time the adjust method
34 let timeoutLaunched = false;
35 window.addEventListener("resize", (e) => {
38 timeoutLaunched = true;
40 this.showCadence = window.innerWidth >= 425; //TODO: arbitrary
41 timeoutLaunched = false;
47 sortedGames: function() {
48 // Show in order: games where it's my turn, my running games, my games, other games
49 let minCreated = Number.MAX_SAFE_INTEGER
51 let augmentedGames = this.games.map(g => {
53 if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid))
59 const myColor = g.players[0].uid == this.st.user.id
60 || g.players[0].sid == this.st.user.sid
63 // I play in this game, so g.fen will be defined
64 if (!!g.fen.match(" " + myColor + " "))
68 if (g.created < minCreated)
69 minCreated = g.created;
70 if (g.created > maxCreated)
71 maxCreated = g.created;
72 return Object.assign({}, g, {priority: priority, myTurn: priority==3});
74 const deltaCreated = maxCreated - minCreated;
75 return augmentedGames.sort((g1,g2) => {
76 return g2.priority - g1.priority +
77 (g2.created - g1.created) / deltaCreated;
82 player_s: function(g) {
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";
89 deleteGame: function(game, e) {
90 if (game.score != "*")
92 if (confirm(this.st.tr["Remove game?"]))
93 GameStorage.remove(game.id);
101 <style lang="sass" scoped>
102 // TODO: understand why the style applied to <tr> element doesn't work
104 background-color: #fcd785
106 background-color: #f5b7b1