From: Benjamin Auder <benjamin.auder@somewhere>
Date: Wed, 22 Jan 2020 16:51:01 +0000 (+0100)
Subject: Fix games list display + challenges display
X-Git-Url: https://git.auder.net/doc/html/css/current/scripts/%3C?a=commitdiff_plain;h=0b0dc040acd01ff1855b159c2933cb2eff73b26d;p=vchess.git

Fix games list display + challenges display
---

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>