added Vue

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>