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 }}
</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>
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" }}
</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>
</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: {
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>