knowyt/client/src/components/Highscores.vue

<template>
  <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 { computed } from 'vue'
import { usePlayersStore } from '@/stores/PlayersStore'
import { useGameinfoStore } from "@/stores/GameinfoStore"

const title = useGameinfoStore().gameInfo.name
const players = computed(() => {
  const p = usePlayersStore().players
  p.sort((a, b) => {
    return b.score - a.score
  })
  return p
})
</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>