Commit | Line | Data |
---|---|---|
85e5b5c1 | 1 | <template lang="pug"> |
7aa548e7 | 2 | div |
1c9826a5 | 3 | table(v-if="challenges.length > 0") |
4f887105 BA |
4 | thead |
5 | tr | |
602d6bef | 6 | th {{ st.tr["Variant"] }} |
303ad63c | 7 | th {{ st.tr["With"] }} |
f44fd3bf | 8 | th {{ st.tr["Cadence"] }} |
eb2d61de | 9 | th {{ st.tr["Options"] }} |
4f887105 | 10 | tbody |
910d631b BA |
11 | tr( |
12 | v-for="c in sortedChallenges" | |
13 | :class="{toyou:c.priority==1,fromyou:c.priority==2}" | |
14 | @click="$emit('click-challenge',c)" | |
15 | ) | |
bd76b456 | 16 | td {{ c.vname }} |
303ad63c | 17 | td {{ withWho(c) }} |
50330595 | 18 | td {{ c.cadence }} |
3d9745ae | 19 | td(:class="getRandomnessClass(c)") {{ c.options.abridged || '' }} |
1c9826a5 BA |
20 | p(v-else) |
21 | | {{ st.tr["No challenges found :( Click on 'New game'!"] }} | |
85e5b5c1 BA |
22 | </template> |
23 | ||
24 | <script> | |
0b0dc040 | 25 | import { store } from "@/store"; |
85e5b5c1 BA |
26 | export default { |
27 | name: "my-challenge-list", | |
dac39588 | 28 | props: ["challenges"], |
0b0dc040 BA |
29 | data: function() { |
30 | return { | |
6808d7a1 | 31 | st: store.state |
0b0dc040 BA |
32 | }; |
33 | }, | |
34 | computed: { | |
35 | sortedChallenges: function() { | |
2c5d7b20 BA |
36 | // Show in order: |
37 | // challenges I sent, challenges I received, other challenges | |
6808d7a1 BA |
38 | let minAdded = Number.MAX_SAFE_INTEGER; |
39 | let maxAdded = 0; | |
0b0dc040 BA |
40 | let augmentedChalls = this.challenges.map(c => { |
41 | let priority = 0; | |
6808d7a1 | 42 | if (!!c.to && c.to == this.st.user.name) priority = 1; |
8f4e861c BA |
43 | else if ( |
44 | c.from.sid == this.st.user.sid || | |
45 | (c.from.id > 0 && c.from.id == this.st.user.id) | |
46 | ) { | |
0b0dc040 | 47 | priority = 2; |
8f4e861c | 48 | } |
6808d7a1 BA |
49 | if (c.added < minAdded) minAdded = c.added; |
50 | if (c.added > maxAdded) maxAdded = c.added; | |
81dd1786 | 51 | return Object.assign({ priority: priority }, c); |
0b0dc040 | 52 | }); |
bd76b456 | 53 | const deltaAdded = maxAdded - minAdded; |
6808d7a1 | 54 | return augmentedChalls.sort((c1, c2) => { |
bd76b456 BA |
55 | return c2.priority - c1.priority + (c2.added - c1.added) / deltaAdded; |
56 | }); | |
6808d7a1 | 57 | } |
303ad63c BA |
58 | }, |
59 | methods: { | |
60 | withWho: function(c) { | |
61 | if (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id) | |
62 | return c.to || this.st.tr["Any player"]; | |
63 | return c.from.name || "@nonymous"; | |
7ba4a5bc BA |
64 | }, |
65 | getRandomnessClass: function(c) { | |
2eca7311 BA |
66 | if ( |
67 | // TODO: one extra test here | |
68 | !Number.isInteger(c.options.randomness) && | |
69 | !parseInt(c.options.randomness, 10) | |
70 | ) { | |
71 | return {}; | |
72 | } | |
7ba4a5bc | 73 | return { |
eb2d61de | 74 | ["random-" + c.options.randomness]: true |
7ba4a5bc | 75 | }; |
303ad63c | 76 | } |
6808d7a1 | 77 | } |
85e5b5c1 | 78 | }; |
85e5b5c1 | 79 | </script> |
bd76b456 BA |
80 | |
81 | <style lang="sass" scoped> | |
1c9826a5 BA |
82 | p |
83 | text-align: center | |
84 | font-weight: bold | |
85 | ||
910d631b | 86 | // NOTE: the style applied to <tr> element doesn't work |
bd76b456 BA |
87 | tr.fromyou > td |
88 | font-style: italic | |
89 | tr.toyou > td | |
90 | background-color: #fcd785 | |
7ba4a5bc BA |
91 | |
92 | tr > td:last-child | |
93 | &.random-0 | |
eb2d61de | 94 | background-color: #FEAF9E |
7ba4a5bc | 95 | &.random-1 |
eb2d61de | 96 | background-color: #9EB2FE |
7ba4a5bc | 97 | &.random-2 |
eb2d61de | 98 | background-color: #A5FE9E |
bd76b456 | 99 | </style> |