160 lines
3.9 KiB
Vue
160 lines
3.9 KiB
Vue
<template>
|
|
<div class="final">
|
|
<div class="final__container">
|
|
<div class="final__table-outer-border">
|
|
<div class="final__table-head">
|
|
<div class="final__title">{{ title }}</div>
|
|
</div>
|
|
<div class="final__table-body">
|
|
<table class="final__table">
|
|
<tr class="final__table-row" v-for="player in players" :key="player.id">
|
|
<td class="final__table-col-name">{{ player.name }}</td>
|
|
<td class="final__table-col-score">{{ player.score }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
title() {
|
|
return this.$store.state.game.name
|
|
},
|
|
players() {
|
|
var players = [...this.$store.state.players.players]
|
|
players.sort((a, b) => {
|
|
return b.score - a.score
|
|
})
|
|
return players
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.final {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&__container {
|
|
margin: 64px 0;
|
|
width: 600px;
|
|
min-height: 600px;
|
|
}
|
|
|
|
&__table-outer-border {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 4px;
|
|
border-radius: 32px;
|
|
background: linear-gradient(45deg, $primary-box-border-color 0, $primary-box-border-color 68%, #ffffff 70%, $primary-box-border-color 72%, $primary-box-border-color 100%);
|
|
background-size: 1000% 1000%;
|
|
animation: finals-gradient 10s linear infinite 5s;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $primary-background-color 60%);
|
|
background-size: 1000% 1000%;
|
|
animation: finals-gradient__fade-in 5s ease forwards;
|
|
}
|
|
}
|
|
|
|
&__table-head {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: $primary-box-background-color;
|
|
border-radius: 32px 32px 0 0;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
&__title {
|
|
color: $primary-box-text-color;
|
|
font-family: "Wendy One";
|
|
font-size: 48px;
|
|
}
|
|
|
|
&__table-body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $primary-box-background-color;
|
|
border-radius: 0 0 32px 32px;
|
|
color: $primary-box-text-color;
|
|
font-family: Dosis;
|
|
font-size: 32px;
|
|
|
|
}
|
|
&__table {
|
|
width: 100%;
|
|
padding: 64px;
|
|
|
|
&-row {
|
|
opacity: 0;
|
|
animation: finals-text 1s ease forwards;
|
|
&:nth-child(1) { animation-delay: 5.5s; }
|
|
&:nth-child(2) { animation-delay: 4.5s; }
|
|
&:nth-child(3) { animation-delay: 3.5s; }
|
|
&:nth-child(4) { animation-delay: 2.4s; }
|
|
&:nth-child(5) { animation-delay: 2.2s; }
|
|
&:nth-child(6) { animation-delay: 2s; }
|
|
&:nth-child(7) { animation-delay: 1.9s; }
|
|
&:nth-child(8) { animation-delay: 1.8s; }
|
|
&:nth-child(9) { animation-delay: 1.7s; }
|
|
&:nth-child(10) { animation-delay: 1.6s; }
|
|
&:nth-child(11) { animation-delay: 1.5s; }
|
|
&:nth-child(12) { animation-delay: 1.4s; }
|
|
&:nth-child(13) { animation-delay: 1.3s; }
|
|
&:nth-child(14) { animation-delay: 1.2s; }
|
|
&:nth-child(15) { animation-delay: 1.1s; }
|
|
&:nth-child(16) { animation-delay: 1s; }
|
|
}
|
|
|
|
&-col-name {
|
|
max-width: 300px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-col-score {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes finals-gradient__fade-in {
|
|
0% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@keyframes finals-gradient {
|
|
0% { background-position: 130% 50%; }
|
|
10% { background-position: 130% 50%; }
|
|
90% { background-position: 0% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
@keyframes finals-text {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 100%; }
|
|
}
|
|
</style>
|