feat: add highscore table, including animation

This commit is contained in:
Settel 2022-09-02 22:13:40 +02:00
parent 056ff2bdeb
commit 65865c93cf
2 changed files with 248 additions and 2 deletions

View File

@ -87,6 +87,11 @@ $sourcecardbadge-background-color: #ffff88;
$sourcecardbadge-border: 2px solid #384048; $sourcecardbadge-border: 2px solid #384048;
$sourcecardbadge-text-color: #384048; $sourcecardbadge-text-color: #384048;
// Highscores
$highscores-border-color: #00a0e0;
$highscores-background-color: $background-primary-color;
$highscores-text-color: #ffffff;
// Engine Debug // Engine Debug
$debug-background-color: lighten($background-primary-color, 10%); $debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none; $debug-border: none;

View File

@ -1,9 +1,250 @@
<template> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { usePlayersStore } from '@/stores/PlayersStore'
import { useGameinfoStore } from "@/stores/GameinfoStore"
const title = useGameinfoStore().gameInfo.name
const players = usePlayersStore().players
</script> </script>
<style lang="scss"> <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> </style>