feat: add highscore table, including animation
This commit is contained in:
Settel
parent
056ff2bdeb
commit
65865c93cf
@ -87,6 +87,11 @@ $sourcecardbadge-background-color: #ffff88;
|
||||
$sourcecardbadge-border: 2px solid #384048;
|
||||
$sourcecardbadge-text-color: #384048;
|
||||
|
||||
// Highscores
|
||||
$highscores-border-color: #00a0e0;
|
||||
$highscores-background-color: $background-primary-color;
|
||||
$highscores-text-color: #ffffff;
|
||||
|
||||
// Engine Debug
|
||||
$debug-background-color: lighten($background-primary-color, 10%);
|
||||
$debug-border: none;
|
||||
|
||||
@ -1,9 +1,250 @@
|
||||
<template>
|
||||
<p>Highscores.vue</p>
|
||||
<div class="highscores__container-outer">
|
||||
<div class="highscores__container-inner">
|
||||
<div class="highscores__table-outer-border">
|
||||
<div class="highscores__table-head">
|
||||
<div class="highscores__title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="highscores__table-body">
|
||||
<table class="highscores__table">
|
||||
<tr class="highscores__table-row" v-for="player in players" :key="player.id">
|
||||
<td class="highscores__table-col-name">{{ player.name }}</td>
|
||||
<td class="highscores__table-col-score">{{ player.score }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr class="highscores__progress" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePlayersStore } from '@/stores/PlayersStore'
|
||||
import { useGameinfoStore } from "@/stores/GameinfoStore"
|
||||
|
||||
const title = useGameinfoStore().gameInfo.name
|
||||
const players = usePlayersStore().players
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~/assets/css/components';
|
||||
|
||||
.highscores {
|
||||
&__container-outer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__container-inner {
|
||||
margin: 64px 0;
|
||||
width: 600px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
&__table-outer-border {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
border-radius: 32px;
|
||||
background: linear-gradient(45deg, $highscores-border-color 0, $highscores-border-color 68%, #ffffff 70%, $highscores-border-color 72%, $highscores-border-color 100%);
|
||||
background-size: 1000% 1000%;
|
||||
animation: highscores-gradient 10s linear infinite 5s;
|
||||
color: $highscores-text-color;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $highscores-background-color 60%);
|
||||
background-size: 1000% 1000%;
|
||||
animation: highscores-gradient__fade-in 10s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-head {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $highscores-background-color;
|
||||
border-radius: 32px 32px 0 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: $font-primary;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $highscores-background-color;
|
||||
border-radius: 0 0 32px 32px;
|
||||
font-family: $font-secondary;
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
|
||||
&__table {
|
||||
width: 100%;
|
||||
padding: 64px;
|
||||
|
||||
&-row {
|
||||
opacity: 0;
|
||||
animation: highscores-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;
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
opacity: 0;
|
||||
color: #ffffff;
|
||||
animation: highscores-progress 4s ease forwards;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes highscores-gradient__fade-in {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes highscores-gradient {
|
||||
0% {
|
||||
background-position: 130% 50%;
|
||||
}
|
||||
|
||||
10% {
|
||||
background-position: 130% 50%;
|
||||
}
|
||||
|
||||
90% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes highscores-text {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes highscores-progress {
|
||||
0% {
|
||||
margin-left: 50%;
|
||||
margin-right: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
85% {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user