Merge remote-tracking branch 'origin/develop' into develop

# Conflicts:
#	frontend/src/components/Login.vue

frontend/src/components/Leaderboard.vue

@@ -9,9 +9,12 @@
         <RRButton @click="nextPage" text=">"></RRButton>
       </div>
     </div>
-    <div class="row" v-for="entry in this.page" :key="entry.rank">
+    <div class="row" v-if="this.page.length > 0" v-for="entry in this.page" :key="entry.rank">
       <LeaderboardEntry :entry="entry"></LeaderboardEntry>
     </div>
+    <div class="row" v-else>
+      Loading...
+    </div>
   </div>
 </template>
 
@@ -39,11 +42,7 @@ export default {
   },
   created() {
     this.updatePage();
-    window.addEventListener('itemInserted', (event) => {
-      if (event.key === 'game-isRunning' && event.value === 'false'){
-        this.updatePage();
-      }
-    }, false)
+    window.addEventListener('itemInserted', event => this.onItemInserted(event), false);
   },
   methods: {
     async fetchPage() {
@@ -53,21 +52,33 @@ export default {
     title() {
       return this.type === "totalplaytime" ? "Total Playtime" : "Highscore";
     },
-    nextPage() {
+    async nextPage() {
+      if (this.page.length !== this.entriesPerPage) return;
+
       this.pageNumber++;
-      this.updatePage();
+      await this.updatePage();
+      if (this.page.length === 0) {
+        this.prevPage();
+      }
     },
     prevPage() {
-      if (this.pageNumber > 0) this.pageNumber--;
+      if (this.pageNumber <= 0) return;
+
+      this.pageNumber--;
       this.updatePage();
     },
     async updatePage() {
       let tempPage = await this.fetchPage();
       for (let i = 0; i < this.entriesPerPage; i++) {
-        this.page.pop()
+        this.page.pop();
       }
       for (const entry of tempPage) {
-        this.page.push(entry)
+        this.page.push(entry);
+      }
+    },
+    onItemInserted(event) {
+      if (event.key === 'game-isRunning' && event.value === 'false') {
+        this.updatePage();
       }
     }
   }

frontend/src/components/LeaderboardEntry.vue

@@ -1,17 +1,18 @@
 <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>
+  <div class="col-1 text-right">{{this.entry.rank}}</div>
+  <span class="col offset-1 text-left username">{{this.entry.username}}</span>
+  <div class="col-2 text-right">{{this.entry.score}}</div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
+import {Leaderboard, LeaderboardEntry} from "@/model/Leaderboard";
 
 export default defineComponent({
   name: "LeaderboardEntry",
   props: {
     entry: {
-      type: Object,
+      type: Object as PropType<LeaderboardEntry<string>>,
       default: () => ({}),
     },
   },
@@ -22,4 +23,9 @@ export default defineComponent({
 * {
   font-size: 1.5em;
 }
+.username {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>

frontend/src/components/Login.vue

@@ -16,15 +16,16 @@ export default {
   components: {
     RRButton
   },
-  data(){
+  data() {
     return {
       username: '',
-      _user: null,
     }
   },
   emits: ['userChange'],
   methods: {
-    async setUser(){
+    async setUser() {
+      if (this.username === '') return;
+
       let user;
       user = await User.getByName(this.username);
       if(user.errors){
@@ -33,17 +34,13 @@ export default {
 
       if(user.errors){
         console.error("Something when wrong when logging in, please contact admin!")
+        return;
       }
 
-      if(user){
-        this.user(user);
+      if (user) {
+        this.$emit('userChange', user);
       }
     },
-    user(user){
-      this._user = user;
-      localStorage.setItem("frontend-ready", "true");
-      this.$emit('userChange', this._user);
-    }
   }
 }
 </script>
@@ -51,6 +48,18 @@ export default {
 <style scoped>
 input {
   border: 3px solid black;
+  border-radius: 0;
   background-color: beige;
+  margin-bottom: 5px;
+}
+
+input:focus {
+  background: beige;
+  border-color: rgba(184,134,11, 0.8);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(184,134,11, 0.6);
+}
+
+label {
+  margin-left: 10px;
 }
 </style>