Fix games list display + challenges display

diff --git a/client/src/components/ChallengeList.vue b/client/src/components/ChallengeList.vue
index bee328f..0b7581b 100644 (file)
--- a/client/src/components/ChallengeList.vue
+++ b/client/src/components/ChallengeList.vue
@@ -5,7 +5,7 @@ table
     th From
     th To
     th Cadence
     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 }}
     td {{ c.vname }}
     td {{ c.from.name }}
     td {{ c.to }}


@@ -13,9 +13,30 @@ table
 </template>
 
 <script>
 </template>
 
 <script>

+import { store } from "@/store";
+

 export default {
   name: "my-challenge-list",
        props: ["challenges"],
 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>
 
 };
 </script>
 

diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue
index bf9c8ff..60d4fed 100644 (file)
--- 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
     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" }}
     td {{ g.vname }}
     td {{ g.players[0].name || "@nonymous" }}
     td {{ g.players[1].name || "@nonymous" }}


@@ -16,13 +16,47 @@ table
 </template>
 
 <script>
 </template>
 
 <script>

+import { store } from "@/store";
+

 export default {
   name: "my-game-list",
        props: ["games"],
 export default {
   name: "my-game-list",
        props: ["games"],

+  data: function() {
+    return {
+      st: store.state,
+      showResult: false,
+    };
+  },

        computed: {
        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>
 };
 </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 d601bf0..6079254 100644 (file)
--- a/client/src/views/MyGames.vue
+++ b/client/src/views/MyGames.vue
@@ -12,14 +12,11 @@ main
 </template>
 
 <script>
 </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";
 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: {
 export default {
   name: "my-games",
   components: {


@@ -55,14 +52,12 @@ export default {
       return this.games.filter(g => g.type == type);
     },
     showGame: function(g) {
       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>
 
       this.$router.push("/game/" + g.id);
     },
   },
 };
 </script>
 

-<!-- Add "scoped" attribute to limit CSS to this component only -->

 <style scoped lang="sass">
 /* TODO */
 </style>
 <style scoped lang="sass">
 /* TODO */
 </style>