frontend pagination done

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container everything">
     <div class="row">
       <Header></Header>
     </div>
@@ -11,11 +11,11 @@
       </Game>
     </div>
     <div class="row">
-      <div class="col">
-        <Leaderboard :title="'Highscore'" :data="higscoreLeaderboard"></Leaderboard>
+      <div class="col-4">
+        <Leaderboard :title="'Highscore'" :leaderboard="this.highscoreLeaderboard"></Leaderboard>
       </div>
-      <div class="col">
-        <Leaderboard :title="'Total Playtime'" :data="totalPlaytimeLeaderboard"></Leaderboard>
+      <div class="offset-4 col-4">
+        <Leaderboard :title="'Total Playtime'" :leaderboard="this.totalPlaytimeLeaderboard"></Leaderboard>
       </div>
     </div>
   </div>
@@ -42,7 +42,7 @@ export default defineComponent({
   data() {
     return {
       userScores: {},
-      higscoreLeaderboard: [],
+      highscoreLeaderboard: [],
       totalPlaytimeLeaderboard: [],
       userId: 1,
     }
@@ -61,8 +61,9 @@ export default defineComponent({
   },
   async created() {
     this.userScores = await this.fetchUserScores();
-    this.higscoreLeaderboard = await this.fetchLeaderboard("highscore")
+    this.highscoreLeaderboard = await this.fetchLeaderboard("highscore")
     this.totalPlaytimeLeaderboard = await this.fetchLeaderboard("totalplaytime")
+    console.log(this)
   }
 });
 </script>
@@ -78,4 +79,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/Game.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="wrapper">
-        <main></main>
-    </div>
+  <div>
+  <main></main>
+  </div>
 </template>
 
 <script lang="ts">

frontend/src/components/Leaderboard.vue

@@ -1,25 +1,64 @@
 <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>{{ 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 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: 3,
+      page: [],
     }
+  },
+  props: {
+      title: String,
+      leaderboard: Array,
+  },
+  updated() {
+    this.updatePage()
+    console.log(this.leaderboard)
+  },
+  methods: {
+    nextPage() {
+      if (this.pageNumber < (this.leaderboard.length / this.entriesPerPage) - 1) this.pageNumber++;
+      this.updatePage();
+    },
+    prevPage() {
+      if (this.pageNumber > 0) this.pageNumber--;
+      this.updatePage();
+    },
+    updatePage() {
+      let tempPage = this.leaderboard.slice(this.entriesPerPage * this.pageNumber, this.entriesPerPage * (this.pageNumber + 1));
+      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>