X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FGameList.vue;h=f85c49fe967a12b99c75ffa1eb2d398e1c0c40b2;hb=8477e53d8e78606e4c4e4bf91c77b1011aab583c;hp=2a4b0239395fabfdd69d41e687e5bf5068d9dbba;hpb=bd76b45611cbb58dcf774745a4d690277a82aacd;p=vchess.git diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index 2a4b0239..f85c49fe 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -8,12 +8,18 @@ div th(v-if="showCadence") {{ st.tr["Cadence"] }} th {{ st.tr["Result"] }} tbody - tr(v-for="g in sortedGames" @click="$emit('show-game',g)" - :class="{'my-turn': g.myTurn}") + tr( + v-for="g in sortedGames" + @click="$emit('show-game',g)" + :class="{'my-turn': g.myTurn}" + ) td {{ g.vname }} td {{ player_s(g) }} td(v-if="showCadence") {{ g.cadence }} - td(:class="{finished: g.score!='*'}" @click="deleteGame(g,$event)") + td( + :class="scoreClass(g)" + @click="deleteGame(g,$event)" + ) | {{ g.score }} @@ -22,22 +28,22 @@ import { store } from "@/store"; import { GameStorage } from "@/utils/gameStorage"; export default { name: "my-game-list", - props: ["games","showBoth"], + props: ["games", "showBoth"], data: function() { return { st: store.state, - showCadence: true, + deleted: {}, //mark deleted games + showCadence: window.innerWidth >= 425 //TODO: arbitrary value }; }, mounted: function() { // timeout to avoid calling too many time the adjust method let timeoutLaunched = false; - window.addEventListener("resize", (e) => { - if (!timeoutLaunched) - { + window.addEventListener("resize", () => { + if (!timeoutLaunched) { timeoutLaunched = true; - setTimeout( () => { - this.showCadence = window.innerWidth >= 425; //TODO: arbitrary + setTimeout(() => { + this.showCadence = window.innerWidth >= 425; timeoutLaunched = false; }, 500); } @@ -46,62 +52,113 @@ export default { computed: { sortedGames: function() { // Show in order: games where it's my turn, my running games, my games, other games - let minCreated = Number.MAX_SAFE_INTEGER - let maxCreated = 0 - let augmentedGames = this.games.map(g => { - let priority = 0; - if (g.players.some(p => p.uid == this.st.user.id || p.sid == this.st.user.sid)) - { - priority++; - if (g.score == "*") - { + let minCreated = Number.MAX_SAFE_INTEGER; + let maxCreated = 0; + let augmentedGames = this.games + .filter(g => !this.deleted[g.id]) + .map(g => { + let priority = 0; + let myColor = undefined; + if ( + g.players.some( + p => p.uid == this.st.user.id || p.sid == this.st.user.sid + ) + ) { priority++; - const myColor = g.players[0].uid == this.st.user.id - || g.players[0].sid == this.st.user.sid - ? "w" - : "b"; - // I play in this game, so g.fen will be defined - if (!!g.fen.match(" " + myColor + " ")) + myColor = + g.players[0].uid == this.st.user.id || + g.players[0].sid == this.st.user.sid + ? "w" + : "b"; + if (g.score == "*") { priority++; + // I play in this game, so g.fen will be defined + // NOTE: this is a fragile way to detect turn, + // but since V isn't defined let's do that for now. (TODO:) + //if (V.ParseFen(g.fen).turn == myColor) + if (g.fen.match(" " + myColor + " ")) priority++; + } } - } - if (g.created < minCreated) - minCreated = g.created; - if (g.created > maxCreated) - maxCreated = g.created; - return Object.assign({}, g, {priority: priority, myTurn: priority==3}); - }); + if (g.created < minCreated) minCreated = g.created; + if (g.created > maxCreated) maxCreated = g.created; + return Object.assign({}, g, { + priority: priority, + myTurn: priority == 3, + myColor: myColor + }); + }); const deltaCreated = maxCreated - minCreated; - return augmentedGames.sort((g1,g2) => { - return g2.priority - g1.priority + - (g2.created - g1.created) / deltaCreated; + return augmentedGames.sort((g1, g2) => { + return ( + g2.priority - g1.priority + (g2.created - g1.created) / deltaCreated + ); }); - }, + } }, methods: { player_s: function(g) { if (this.showBoth) - return (g.players[0].name || "@nonymous") + " - " + (g.players[1].name || "@nonymous"); - if (this.st.user.sid == g.players[0].sid || this.st.user.id == g.players[0].uid) + return ( + (g.players[0].name || "@nonymous") + + " - " + + (g.players[1].name || "@nonymous") + ); + if ( + this.st.user.sid == g.players[0].sid || + this.st.user.id == g.players[0].uid + ) return g.players[1].name || "@nonymous"; return g.players[0].name || "@nonymous"; }, + scoreClass: function(g) { + if (g.score == "*" || !g.myColor) return {}; + // Ok it's my finished game: determine if I won, drew or lost. + let res = {}; + switch (g.score) { + case "1-0": + res[g.myColor == "w" ? "won" : "lost"] = true; + break; + case "0-1": + res[g.myColor == "b" ? "won" : "lost"] = true; + break; + case "1/2": + res["draw"] = true; + break; + // default case: "?" for unknown finished + default: + res["unknown"] = true; + } + return res; + }, deleteGame: function(game, e) { - if (game.score != "*") - { - if (confirm(this.st.tr["Remove game?"])) - GameStorage.remove(game.id); + if (game.score != "*") { + if (confirm(this.st.tr["Remove game?"])) { + GameStorage.remove( + game.id, + () => { + this.$set(this.deleted, game.id, true); + } + ); + } e.stopPropagation(); } - }, - }, + } + } };