Merge branch 'leaderboard-pagination' into develop

# Conflicts:
#	frontend/package-lock.json

backend/api/src/leaderboardRoute.ts

@@ -1,4 +1,5 @@
 import express from 'express';
+import {query, validationResult} from 'express-validator';
 import {TimeLeaderboardRepository} from "./repositories/TimeLeaderboardRepository.js";
 import {TimeLeaderboardPgPromiseRepository} from "./repositories/pgPromise/TimeLeaderboardPgPromiseRepository.js";
 import {HighscoreLeaderboardPgPromiseRepository} from "./repositories/pgPromise/HighscoreLeaderboardPgPromiseRepository.js";
@@ -8,6 +9,9 @@ import {HighscoreLeaderboard, TimeLeaderboard} from "./model/Leaderboard.js";
 export const leaderboardRoute = express.Router()
 
 leaderboardRoute.get('/highscore',
+    query('pagination').toBoolean(),
+    query('entriesPerPage').optional().isInt({min: 1}).toInt(),
+    query('page').optional().isInt({min: 0}).toInt(),
     /**
      * Returns the highscore leaderboard as JSON response, fetched from DB
      * @param req
@@ -15,8 +19,21 @@ leaderboardRoute.get('/highscore',
      */
     async (req, res) => {
     try {
+        //region validate parameters
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({ errors: errors.array() });
+        }
+        //endregion
         const highscoreLeaderboardRepo: HighscoreLeaderboardRepository = new HighscoreLeaderboardPgPromiseRepository;
-        const highscoreLeaderboard: HighscoreLeaderboard = await highscoreLeaderboardRepo.getAll();
+        let highscoreLeaderboard: HighscoreLeaderboard;
+        if (req.query.pagination) {
+            const entriesPerPage = req.query.entriesPerPage;
+            const page = req.query.page;
+            highscoreLeaderboard = await highscoreLeaderboardRepo.getPage(entriesPerPage, page);
+        } else {
+            highscoreLeaderboard = await highscoreLeaderboardRepo.getAll();
+        }
         res.send(highscoreLeaderboard);
     } catch (error) {
         // handle errors
@@ -26,6 +43,9 @@ leaderboardRoute.get('/highscore',
 })
 
 leaderboardRoute.get('/totalplaytime',
+    query('pagination').toBoolean(),
+    query('entriesPerPage').optional().isInt({min: 1}).toInt(),
+    query('page').optional().isInt({min: 0}).toInt(),
     /**
      * Returns the total playtime leaderboard as JSON response, fetched from DB
      * @param req
@@ -33,8 +53,21 @@ leaderboardRoute.get('/totalplaytime',
      */
     async (req, res) => {
     try {
+        //region validate parameters
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({ errors: errors.array() });
+        }
+        //endregion
         const timeLeaderboardRepo: TimeLeaderboardRepository = new TimeLeaderboardPgPromiseRepository;
-        const timeLeaderboard: TimeLeaderboard = await timeLeaderboardRepo.getAll();
+        let timeLeaderboard: TimeLeaderboard;
+        if (req.query.pagination) {
+            const entriesPerPage = req.query.entriesPerPage;
+            const page = req.query.page;
+            timeLeaderboard = await timeLeaderboardRepo.getPage(entriesPerPage, page);
+        } else {
+            timeLeaderboard = await timeLeaderboardRepo.getAll();
+        }
         res.send(timeLeaderboard);
     } catch (error) {
         // handle errors

backend/api/src/repositories/HighscoreLeaderboardRepository.ts

@@ -2,4 +2,5 @@ import {HighscoreLeaderboard} from "../model/Leaderboard.js";
 
 export abstract class HighscoreLeaderboardRepository {
     abstract getAll(): Promise<HighscoreLeaderboard>;
+    abstract getPage(entriesPerPage: number, page: number): Promise<HighscoreLeaderboard>
 }

backend/api/src/repositories/TimeLeaderboardRepository.ts

@@ -2,4 +2,5 @@ import {TimeLeaderboard} from "../model/Leaderboard.js";
 
 export abstract class TimeLeaderboardRepository {
     abstract getAll(): Promise<TimeLeaderboard>;
+    abstract getPage(entriesPerPage: number, page: number);
 }

backend/api/src/repositories/pgPromise/HighscoreLeaderboardPgPromiseRepository.ts

@@ -5,7 +5,15 @@ import {Database} from "../../Database.js";
 export class HighscoreLeaderboardPgPromiseRepository extends HighscoreLeaderboardRepository {
     async getAll(): Promise<HighscoreLeaderboard> {
         const raw: any = await Database.db.manyOrNone(
-            'SELECT * FROM lb_highscore INNER JOIN "user" ON user_id = id ORDER BY RANK;'
+            'SELECT * FROM lb_highscore INNER JOIN "user" ON user_id = id ORDER BY rank;'
+        );
+        return this.serialize(raw);
+    }
+
+    async getPage(entriesPerPage, page): Promise<HighscoreLeaderboard> {
+        const raw: any = await Database.db.manyOrNone(
+            'SELECT * FROM lb_highscore INNER JOIN "user" ON user_id = id ORDER BY rank LIMIT $1 OFFSET $2;',
+            [entriesPerPage, page * entriesPerPage]
         );
         return this.serialize(raw);
     }

backend/api/src/repositories/pgPromise/TimeLeaderboardPgPromiseRepository.ts

@@ -5,7 +5,15 @@ import {Database} from "../../Database.js";
 export class TimeLeaderboardPgPromiseRepository extends TimeLeaderboardRepository {
     async getAll(): Promise<TimeLeaderboard> {
         const raw: any = await Database.db.manyOrNone(
-            'SELECT * FROM lb_total_playtime INNER JOIN "user" ON user_id = id ORDER BY RANK;'
+            'SELECT * FROM lb_total_playtime INNER JOIN "user" ON user_id = id ORDER BY rank;'
+        );
+        return this.serialize(raw);
+    }
+
+    async getPage(entriesPerPage: number, page: number): Promise<TimeLeaderboard> {
+        const raw: any = await Database.db.manyOrNone(
+            'SELECT * FROM lb_total_playtime INNER JOIN "user" ON user_id = id ORDER BY rank LIMIT $1 OFFSET $2;',
+            [entriesPerPage, page * entriesPerPage]
         );
         return this.serialize(raw);
     }

frontend/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

frontend/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off', 
+  }
+}

frontend/game/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "noImplicitAny": true,
-    "outFile": "../public/game/build.js",
+    "outFile": "../public/game.js",
     "preserveConstEnums": true,
     "removeComments": true,
     "rootDir": ".",

frontend/public/index.html

@@ -8,9 +8,10 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-    <script src="./game/build.js"></script>
+
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
+      <script src="./game.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
   </head>
   <body style="background-color: beige;">
     <noscript>

frontend/public/main.js

@@ -1,12 +0,0 @@
-function setup() {
-    createCanvas(400, 400);
-  }
-  
-  function draw() {
-    if (mouseIsPressed) {
-      fill(0);
-    } else {
-      fill(255);
-    }
-    ellipse(mouseX, mouseY, 80, 80);
-  }

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>