Calls api from within and get as screen can fit.
This commit is contained in:
@@ -1,54 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="highscores" v-if="highscore.length > 0">
|
<div class="highscores" v-if="highscore.length > 0">
|
||||||
|
|
||||||
<section class="heading">
|
<section class="heading">
|
||||||
<h3>
|
<h3>
|
||||||
Topp 5 vinnere
|
Topp vinnere
|
||||||
</h3>
|
</h3>
|
||||||
<router-link to="highscore" class="">
|
<router-link to="highscore" class="">
|
||||||
<span class="vin-link">Se alle vinnere</span>
|
<span class="vin-link">Se alle vinnere</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<ol class="winner-list-container">
|
<ol class="winner-list-container">
|
||||||
<li v-for="(person, index) in highscore" :key="person._id" class="single-winner">
|
<li v-for="(person, index) in highscore" :key="person._id">
|
||||||
<span class="placement">{{index + 1}}.</span>
|
<router-link :to="`/highscore/${person.name}`" class="single-winner">
|
||||||
<i class="icon icon--medal"></i>
|
<span class="placement">{{ index + 1 }}.</span>
|
||||||
<p class="winner-name">{{ person.name }}</p>
|
<i class="icon icon--medal"></i>
|
||||||
|
<p class="winner-name">{{ person.name }}</p>
|
||||||
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import { highscoreStatistics } from "@/api";
|
import { highscoreStatistics } from "@/api";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return { highscore: [] };
|
return {
|
||||||
|
highscore: [],
|
||||||
|
limit: 22
|
||||||
|
};
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
let response = await highscoreStatistics();
|
return fetch(`/api/history/by-wins?limit=${limit}`)
|
||||||
response.sort((a, b) => a.wins.length < b.wins.length ? 1 : -1)
|
.then(resp => resp.json())
|
||||||
this.highscore = this.generateScoreBoard(response.slice(0, 5));
|
.then(response => {
|
||||||
},
|
this.highscore = response.winners;
|
||||||
methods: {
|
});
|
||||||
generateScoreBoard(highscore=this.highscore) {
|
|
||||||
let place = 0;
|
|
||||||
let highestWinCount = -1;
|
|
||||||
|
|
||||||
return highscore.map(win => {
|
|
||||||
const wins = win.wins.length
|
|
||||||
if (wins != highestWinCount) {
|
|
||||||
place += 1
|
|
||||||
highestWinCount = wins
|
|
||||||
}
|
|
||||||
|
|
||||||
const placeString = place.toString().padStart(2, "0");
|
|
||||||
win.rank = placeString;
|
|
||||||
return win
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user