feat: add highscore table, including animation

client/src/assets/css/colors.scss

@@ -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;

client/src/components/Highscores.vue

@@ -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>