finals table

client/src/components/final.vue

@@ -25,20 +25,11 @@ export default {
       return 'Team Banana Mania'
     },
     players() {
-      return [
+      var players = [...this.$store.state.players.players]
-        { name: 'Hans-Hugo', score: 170 },
+      players.sort((a, b) => {
-        { name: 'Ferdinand', score: 140 },
+        return b.score - a.score
-        { name: 'Ann-Marie', score: 137 },
+      })
-        { name: 'Jocelyn', score: 80 },
+      return players
-        { name: 'Klaus-Bernd', score: 61 },
-        { name: 'Annegret', score: 11 },
-        { name: 'Jens-Jörg Hinterhammer-Füllschmied', score: 9 },
-        { name: 'Brunhilde', score: 7 },
-        { name: 'Margarete Bausenkopf', score: 7 },
-        { name: 'Edwin', score: 1 },
-        { name: 'Bastoph', score: 0 },
-        { name: 'Henndirk', score: -12 },
-      ]
     },
   },
 }
@@ -63,9 +54,12 @@ export default {
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-color: #8060c0;
     padding: 4px;
     border-radius: 32px;
+    // background-color: #8060c0;
+    background: linear-gradient(45deg, #8060c0 0, #8060c0 45%, #ffffff 50%, #8060c0 55%, #8060c0 100%);
+    background-size: 400% 400%;
+    animation: finals-gradient 5s ease infinite;
   }
 
   &__table-head {
@@ -108,4 +102,8 @@ export default {
     }
   }
 }
+@keyframes finals-gradient {
+  0% { background-position: 130% 50%; }
+  100% { background-position: -30% 50%; }
+}
 </style>