added Vue

frontend/src/App.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <Header></Header>
+    </div>
+    <div class="row">
+      <UserScores :userScores="userScores" ></UserScores>
+    </div>
+    <div class="row">
+      <Game class="col">
+      </Game>
+    </div>
+    <div class="row">
+      <div class="col">
+        <Leaderboard :title="'Highscore'" :data="higscoreLeaderboard"></Leaderboard>
+      </div>
+      <div class="col">
+        <Leaderboard :title="'Total Playtime'" :data="totalPlaytimeLeaderboard"></Leaderboard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Leaderboard from './components/Leaderboard.vue';
+import UserScores from './components/UserScores.vue';
+import Game from './components/Game.vue';
+import Header from './components/Header.vue';
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    UserScores,
+    Leaderboard,
+    Game,
+    Header,
+  },
+  data() {
+    return {
+      userScores: {},
+      higscoreLeaderboard: [],
+      totalPlaytimeLeaderboard: [],
+      userId: 1,
+    }
+  },
+  methods: {
+    async fetchFromApi(path: string, method: "GET" | "POST") {
+    let res: Response = await fetch("http://localhost:3000" + path, {method: method,});
+    return await res.json();
+    },
+    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>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+* {
+  font-family: 'Press Start 2P', serif;
+}
+
+.row {
+  margin-top:2em;
+}
+
+</style>

frontend/src/components/Game.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="wrapper">
+        <main></main>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "Game"
+}
+</script>

frontend/src/components/Header.vue

@@ -0,0 +1,18 @@
+<template>
+    <h1>Raspberry Rocketeer</h1>
+</template>
+
+<script lang="ts">
+export default {
+    name: "Header",
+    
+}
+</script>
+
+<style scoped>
+    h1 {
+        text-align: center;
+        font-size: 5em;
+    }
+
+</style>

frontend/src/components/Leaderboard.vue

@@ -0,0 +1,25 @@
+<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>
+</template>
+
+<script>
+
+export default {
+    name: "Leaderboard",
+    props: {
+        title: {
+            type: String
+        },
+        data: {
+            type: Array
+        }
+    }
+}
+</script>

frontend/src/components/UserScores.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col text-center" >Highscore</div>
+            <div class="col text-center" >Total Score</div>
+            <div class="col text-center" >Total Playtime</div>
+            <div class="col text-center" >Average Score</div>
+            <div class="col text-center" >Games Played</div>
+        </div>
+        <div class="row">
+            <div class="col text-center" >{{ this.userScores.highscore }}</div>
+            <div class="col text-center" >{{ this.userScores.totalScore }}</div>
+            <div class="col text-center" >{{ this.userScores.totalPlaytime }}</div>
+            <div class="col text-center" >{{ this.userScores.averageScore  }}</div>
+            <div class="col text-center" >{{ this.userScores.gamesPlayed }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        userScores: {
+            type: Object
+        }
+    },
+}
+</script>
+
+<style scoped>
+* {
+    font-size: 1.2em;
+}
+</style>

frontend/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

frontend/src/model/Game.ts

@@ -0,0 +1,7 @@
+export interface Game {
+    id?: number,
+    score: number,
+    playtime: string,
+    date: Date,
+    userId: number,
+}

frontend/src/model/Leaderboard.ts

@@ -0,0 +1,10 @@
+export type Leaderboard<T> = LeaderboardEntry<T>[];
+
+export type HighscoreLeaderboard = Leaderboard<number>;
+export type TimeLeaderboard = Leaderboard<string>;
+
+export interface LeaderboardEntry<T> {
+    username: number,
+    rank: number,
+    score: T,
+}

frontend/src/model/Time.ts

@@ -0,0 +1,6 @@
+export interface Time {
+    seconds: number,
+    minutes?: number,
+    hours?: number,
+    days?: number,
+}

frontend/src/model/User.ts

@@ -0,0 +1,4 @@
+export interface User {
+    id?: number,
+    name: string,
+}

frontend/src/model/UserScores.ts

@@ -0,0 +1,10 @@
+import {Time} from "./Time.js";
+
+export interface UserScores {
+    userId: number,
+    highscore: number,
+    totalScore: number,
+    totalPlaytime: Time,
+    averageScore: number,
+    gamesPlayed: number,
+}

frontend/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}