Merge branch 'leaderboard-pagination' into develop

# Conflicts:
#	frontend/package-lock.json

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container everything">
     <div class="row">
       <Header></Header>
     </div>
@@ -13,11 +13,11 @@
       </Login>
     </div>
     <div class="row">
-      <div class="col">
-        <Leaderboard :title="'Highscore'" :data="higscoreLeaderboard"></Leaderboard>
+      <div class="col-4">
+        <Leaderboard type="highscore"></Leaderboard>
       </div>
-      <div class="col">
-        <Leaderboard :title="'Total Playtime'" :data="totalPlaytimeLeaderboard"></Leaderboard>
+      <div class="offset-4 col-4">
+        <Leaderboard type="totalplaytime"></Leaderboard>
       </div>
     </div>
   </div>
@@ -47,8 +47,6 @@ export default defineComponent({
   data() {
     return {
       userScores: {},
-      higscoreLeaderboard: [],
-      totalPlaytimeLeaderboard: [],
       userId: 1,
       user: null,
     }
@@ -61,14 +59,9 @@ export default defineComponent({
     async fetchUserScores() {
       return await this.fetchFromApi(`/user/${this.userId}/scores`, "GET");
     },
-    async fetchLeaderboard(type: "highscore" | "totalplaytime") {
-      return await this.fetchFromApi(`/leaderboard/${type}`, "GET");
-    },
   },
   async created() {
     this.userScores = await this.fetchUserScores();
-    this.higscoreLeaderboard = await this.fetchLeaderboard("highscore")
-    this.totalPlaytimeLeaderboard = await this.fetchLeaderboard("totalplaytime")
   }
 });
 </script>
@@ -84,4 +77,7 @@ export default defineComponent({
   margin-top:2em;
 }
 
+.everything {
+  margin-bottom: 4em;
+}
 </style>

frontend/src/components/Button.vue

@@ -0,0 +1,21 @@
+<template>
+  <button>{{ text }}</button>
+</template>
+
+<script lang="ts">
+export default {
+  name: "Button",
+  props: {
+    text: {
+      type: String
+    },
+  }
+}
+</script>
+
+<style scoped>
+button {
+  border: 3px solid black;
+  background-color: beige;
+}
+</style>

frontend/src/components/Leaderboard.vue

@@ -1,25 +1,72 @@
 <template>
-    <h3>{{ title }}</h3>
-    <div class="container">
-        <div class="row" v-for="entry in data" :key="entry.rank" >
-            <div class="col-1 text-left">{{entry.rank}}</div>
-            <div class="offset-1 col text-left">{{entry.username}}</div>
-            <div class="col text-left">{{entry.score}}</div>
-        </div>
+  <div class="container">
+    <div class="row">
+      <h3 class="col-10"><strong>{{ this.title() }}</strong></h3>
+      <div class="col-1">
+        <Button @click="prevPage" text="<"></Button>
+      </div>
+      <div class="col-1">
+        <Button @click="nextPage" text=">"></Button>
+      </div>
     </div>
+    <div class="row" v-for="entry in this.page" :key="entry.rank" >
+      <LeaderboardEntry :entry="entry" ></LeaderboardEntry>
+    </div>
+  </div>
 </template>
 
 <script>
 
+import LeaderboardEntry from "@/components/LeaderboardEntry.vue";
+import Button from "@/components/Button.vue";
+
 export default {
-    name: "Leaderboard",
-    props: {
-        title: {
-            type: String
-        },
-        data: {
-            type: Array
-        }
+  name: "Leaderboard",
+  components: {
+    LeaderboardEntry,
+    Button,
+  },
+  data() {
+    return {
+      pageNumber: 0,
+      entriesPerPage: 5,
+      page: []
     }
+  },
+  props: {
+      type: "totalplaytime" | "highscore",
+  },
+  created() {
+    this.updatePage();
+  },
+  updated() {
+    this.updatePage()
+  },
+  methods: {
+    async fetchPage() {
+      let res = await fetch(`http://localhost:3000/leaderboard/${this.type}?pagination=true&entriesPerPage=${this.entriesPerPage}&page=${this.pageNumber}`, {method: "GET"});
+      return await res.json();
+    },
+    title() {
+      return this.type === "totalplaytime" ? "Total Playtime" : "Highscore";
+    },
+    nextPage() {
+      this.pageNumber++;
+      this.updatePage();
+    },
+    prevPage() {
+      if (this.pageNumber > 0) this.pageNumber--;
+      this.updatePage();
+    },
+    async updatePage() {
+      let tempPage = await this.fetchPage();
+      for (let i = 0; i < this.entriesPerPage; i++) {
+        this.page.pop()
+      }
+      for (const entry of tempPage) {
+        this.page.push(entry)
+      }
+    }
+  }
 }
 </script>

frontend/src/components/LeaderboardEntry.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="col-1 text-left">{{this.entry.rank}}</div>
+  <div class="col text-left">{{this.entry.username}}</div>
+  <div class="col text-right">{{this.entry.score}}</div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+  name: "LeaderboardEntry",
+  props: {
+    entry: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+})
+</script>
+
+<style scoped>
+* {
+  font-size: 1.5em;
+}
+</style>