From 0b0dc040acd01ff1855b159c2933cb2eff73b26d Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Wed, 22 Jan 2020 17:51:01 +0100 Subject: [PATCH] Fix games list display + challenges display --- client/src/components/ChallengeList.vue | 23 ++++++++++++- client/src/components/GameList.vue | 46 +++++++++++++++++++++---- client/src/views/MyGames.vue | 7 +--- 3 files changed, 63 insertions(+), 13 deletions(-) diff --git a/client/src/components/ChallengeList.vue b/client/src/components/ChallengeList.vue index bee328f1..0b7581bf 100644 --- a/client/src/components/ChallengeList.vue +++ b/client/src/components/ChallengeList.vue @@ -5,7 +5,7 @@ table th From th To th Cadence - tr(v-for="c in challenges" @click="$emit('click-challenge',c)") + tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)") td {{ c.vname }} td {{ c.from.name }} td {{ c.to }} @@ -13,9 +13,30 @@ table </template> <script> +import { store } from "@/store"; + export default { name: "my-challenge-list", props: ["challenges"], + data: function() { + return { + st: store.state, + }; + }, + computed: { + sortedChallenges: function() { + // Show in order: challenges I sent, challenges I received, other challenges + let augmentedChalls = this.challenges.map(c => { + let priority = 0; + if (c.to == this.st.user.name) + priority = 1; + else if (c.from.id == this.st.user.id || c.from.sid == this.st.user.sid) + priority = 2; + return Object.assign({}, c, {priority: priority}); + }); + return augmentedChalls.sort((c1,c2) => { return c2.priority - c1.priority; }); + }, + }, }; </script> diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index bf9c8ffc..60d4fede 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -6,8 +6,8 @@ table th Black th Time control th(v-if="showResult") Result - // TODO: show my games first (st.user.id or sid) - tr(v-for="g in games" @click="$emit('show-game',g)") + tr(v-for="g in sortedGames" @click="$emit('show-game',g)" + :class="{'my-turn': g.myTurn}") td {{ g.vname }} td {{ g.players[0].name || "@nonymous" }} td {{ g.players[1].name || "@nonymous" }} @@ -16,13 +16,47 @@ table </template> <script> +import { store } from "@/store"; + export default { name: "my-game-list", props: ["games"], + data: function() { + return { + st: store.state, + showResult: false, + }; + }, computed: { - showResult: function() { - return this.games.some(g => g.score != "*"); - }, - }, + sortedGames: function() { + // Show in order: games where it's my turn, my running games, my games, other games + this.showResult = this.games.some(g => g.score != "*"); + 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 == "*") + { + priority++; + const myColor = g.players[0].uid == this.st.user.id + || g.players[0].sid == this.st.user.sid + ? "w" + : "b"; + if (!!g.fen.match(" " + myColor + " ")) + priority++; + } + } + return Object.assign({}, g, {priority: priority, myTurn: priority==2}); + }); + return augmentedGames.sort((g1,g2) => { return g2.priority - g1.priority; }); + }, + }, }; </script> + +<style scoped lang="sass"> +.my-turn + // TODO: the style doesn't work... why? + background-color: orange +</style> diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue index d601bf04..60792542 100644 --- a/client/src/views/MyGames.vue +++ b/client/src/views/MyGames.vue @@ -12,14 +12,11 @@ main </template> <script> -// TODO: background orange si à moi de jouer -// (helper: static fonction "GetNextCol()" dans base_rules.js) -// use GameStorage.getAll() - import { store } from "@/store"; import { GameStorage } from "@/utils/gameStorage"; import { ajax } from "@/utils/ajax"; import GameList from "@/components/GameList.vue"; + export default { name: "my-games", components: { @@ -55,14 +52,12 @@ export default { return this.games.filter(g => g.type == type); }, showGame: function(g) { - // NOTE: we play in this game, since this is "MyGames" page this.$router.push("/game/" + g.id); }, }, }; </script> -<!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="sass"> /* TODO */ </style> -- 2.44.0