Improve style
[vchess.git] / client / src / components / ChallengeList.vue
CommitLineData
85e5b5c1 1<template lang="pug">
7aa548e7
BA
2div
3 table
4f887105
BA
4 thead
5 tr
602d6bef 6 th {{ st.tr["Variant"] }}
303ad63c 7 th {{ st.tr["With"] }}
f44fd3bf 8 th {{ st.tr["Cadence"] }}
4f887105 9 tbody
910d631b
BA
10 tr(
11 v-for="c in sortedChallenges"
12 :class="{toyou:c.priority==1,fromyou:c.priority==2}"
13 @click="$emit('click-challenge',c)"
14 )
bd76b456 15 td {{ c.vname }}
303ad63c 16 td {{ withWho(c) }}
bd76b456 17 td {{ c.cadence }}
85e5b5c1
BA
18</template>
19
20<script>
0b0dc040 21import { store } from "@/store";
85e5b5c1
BA
22export default {
23 name: "my-challenge-list",
dac39588 24 props: ["challenges"],
0b0dc040
BA
25 data: function() {
26 return {
6808d7a1 27 st: store.state
0b0dc040
BA
28 };
29 },
30 computed: {
31 sortedChallenges: function() {
32 // Show in order: challenges I sent, challenges I received, other challenges
6808d7a1
BA
33 let minAdded = Number.MAX_SAFE_INTEGER;
34 let maxAdded = 0;
0b0dc040
BA
35 let augmentedChalls = this.challenges.map(c => {
36 let priority = 0;
6808d7a1 37 if (!!c.to && c.to == this.st.user.name) priority = 1;
bd76b456 38 else if (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id)
0b0dc040 39 priority = 2;
6808d7a1
BA
40 if (c.added < minAdded) minAdded = c.added;
41 if (c.added > maxAdded) maxAdded = c.added;
42 return Object.assign({}, c, { priority: priority });
0b0dc040 43 });
bd76b456 44 const deltaAdded = maxAdded - minAdded;
6808d7a1 45 return augmentedChalls.sort((c1, c2) => {
bd76b456
BA
46 return c2.priority - c1.priority + (c2.added - c1.added) / deltaAdded;
47 });
6808d7a1 48 }
303ad63c
BA
49 },
50 methods: {
51 withWho: function(c) {
52 if (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id)
53 return c.to || this.st.tr["Any player"];
54 return c.from.name || "@nonymous";
55 }
6808d7a1 56 }
85e5b5c1 57};
85e5b5c1 58</script>
bd76b456
BA
59
60<style lang="sass" scoped>
910d631b 61// NOTE: the style applied to <tr> element doesn't work
bd76b456
BA
62tr.fromyou > td
63 font-style: italic
64tr.toyou > td
65 background-color: #fcd785
66</style>