121 lines
2.3 KiB
Vue
121 lines
2.3 KiB
Vue
<template>
|
|
<div class="highscores" v-if="highscore.length > 0">
|
|
|
|
<section class="heading">
|
|
<h3>
|
|
Topp 5 vinnere
|
|
</h3>
|
|
<router-link to="highscore" class="">
|
|
<span class="vin-link">Se alle vinnere</span>
|
|
</router-link>
|
|
</section>
|
|
<ol class="winner-list-container">
|
|
<li v-for="(person, index) in highscore" :key="person._id" class="single-winner">
|
|
<span class="placement">{{index + 1}}.</span>
|
|
<i class="icon icon--medal"></i>
|
|
<p class="winner-name">{{ person.name }}</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { highscoreStatistics } from "@/api";
|
|
|
|
export default {
|
|
data() {
|
|
return { highscore: [] };
|
|
},
|
|
async mounted() {
|
|
let response = await highscoreStatistics();
|
|
response.sort((a, b) => a.wins.length < b.wins.length ? 1 : -1)
|
|
this.highscore = this.generateScoreBoard(response.slice(0, 5));
|
|
},
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../styles/variables.scss";
|
|
.heading {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #333333;
|
|
|
|
&:focus,
|
|
&:active,
|
|
&:visited {
|
|
text-decoration: none;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.winner-list-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
|
|
gap: 5%;
|
|
|
|
.single-winner {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background: $primary;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
align-items: center;
|
|
padding: 1em;
|
|
|
|
i {
|
|
font-size: 3em;
|
|
width: max-content;
|
|
justify-self: end;
|
|
}
|
|
|
|
.placement {
|
|
grid-row: 1;
|
|
grid-column: 1 / 3;
|
|
font-size: 3em;
|
|
}
|
|
|
|
.winner-name {
|
|
grid-row: 2;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
|
|
.winner-icon {
|
|
grid-row: 1;
|
|
grid-column: 3;
|
|
}
|
|
}
|
|
}
|
|
</style>
|