Renamed /src to /frontend.

frontend/ui/Highscore.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="highscores" v-if="highscore.length > 0">
+
+    <section class="heading">
+      <h3>
+        Topp 5 vinnere
+      </h3>
+      <router-link to="highscore" class="">
+        <span class="vin-link">Se alle vinnere</span>
+      </router-link>
+    </section>
+    <ol class="winner-list-container">
+      <li v-for="(person, index) in highscore" :key="person._id" class="single-winner">
+        <span class="placement">{{index + 1}}.</span>
+        <i class="icon icon--medal"></i>
+        <p class="winner-name">{{ person.name }}</p>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+
+import { highscoreStatistics } from "@/api";
+
+export default {
+  data() {
+    return { highscore: [] };
+  },
+  async mounted() {
+    let response = await highscoreStatistics();
+    response.sort((a, b) => a.wins.length < b.wins.length ? 1 : -1)
+    this.highscore = this.generateScoreBoard(response.slice(0, 5));
+  },
+  methods: {
+    generateScoreBoard(highscore=this.highscore) {
+      let place = 0;
+      let highestWinCount = -1;
+
+      return highscore.map(win => {
+        const wins = win.wins.length
+        if (wins != highestWinCount) {
+          place += 1
+          highestWinCount = wins
+        }
+
+        const placeString = place.toString().padStart(2, "0");
+        win.rank = placeString;
+        return win
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/variables.scss";
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+a {
+  text-decoration: none;
+  color: #333333;
+
+  &:focus,
+  &:active,
+  &:visited {
+    text-decoration: none;
+    color: #333333;
+  }
+}
+
+ol {
+  list-style-type: none;
+  margin-left: 0;
+  padding: 0;
+}
+
+.winner-list-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
+  gap: 5%;
+
+  .single-winner {
+    box-sizing: border-box;
+    width: 100%;
+    background: $primary;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    padding: 1em; 
+
+    i {
+      font-size: 3em;
+      width: max-content;
+      justify-self: end;
+    }
+
+    .placement {
+      grid-row: 1;
+      grid-column: 1 / 3;
+      font-size: 3em;
+    }
+
+    .winner-name {
+      grid-row: 2;
+      grid-column: 1 / -1;
+    }
+
+
+    .winner-icon {
+      grid-row: 1;
+      grid-column: 3;
+    }
+  }
+}
+</style>