LocalStorageListener

frontend/src/App.vue

@@ -4,12 +4,13 @@
       <Header></Header>
     </div>
     <div class="row">
-      <UserScores :userScores="userScores" ></UserScores>
+      <UserScores :userScores="userScores"></UserScores>
     </div>
     <div class="row">
-      <Game v-if="user" class="col">
+      <Game v-if="user" v-bind:user-id=this.userId class="col"
+            @gameFinished="this.updateUserScores()">
       </Game>
-      <Login v-else @userChange="(event) => this.user = event">
+      <Login v-else @userChange="(event) => {this.user = event; this.userId = this.user.id}">
       </Login>
     </div>
     <div class="row">
@@ -24,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import {defineComponent} from 'vue';
 import Leaderboard from './components/Leaderboard.vue';
 import UserScores from './components/UserScores.vue';
 import Game from './components/Game.vue';
@@ -33,7 +34,6 @@ import Header from './components/Header.vue';
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.min.js";
 import Login from "@/components/Login.vue";
-import {User} from "@/model/User";
 
 export default defineComponent({
   name: 'App',
@@ -49,19 +49,25 @@ export default defineComponent({
       userScores: {},
       userId: 1,
       user: null,
+      restUrl:'http://localhost:3000',
     }
   },
+
+
   methods: {
     async fetchFromApi(path: string, method: "GET" | "POST") {
-    let res: Response = await fetch("http://localhost:3000" + path, {method: method,});
-    return await res.json();
+      let res: Response = await fetch(this.restUrl + path, {method: method,});
+      return await res.json();
     },
     async fetchUserScores() {
       return await this.fetchFromApi(`/user/${this.userId}/scores`, "GET");
     },
+    async updateUserScores() {
+      this.userScores = await this.fetchUserScores();
+    },
   },
   async created() {
-    this.userScores = await this.fetchUserScores();
+    await this.updateUserScores();
   }
 });
 </script>
@@ -74,7 +80,7 @@ export default defineComponent({
 }
 
 .row {
-  margin-top:2em;
+  margin-top: 2em;
 }
 
 .everything {

frontend/src/components/Game.vue

@@ -1,11 +1,53 @@
 <template>
-    <div class="wrapper">
-        <main></main>
-    </div>
+  <div class="wrapper">
+    <main></main>
+  </div>
 </template>
 
-<script lang="ts">
+<script>
+import App from "@/App.vue";
 export default {
-    name: "Game"
+  name: "Game",
+  props: {
+    userId: null
+  },
+  emits: ['gameFinished'],
+  created() {
+    window.addEventListener('storage', this.localStorageHandler, false);
+  },
+  methods: {
+
+    localStorageHandler() {
+      if (localStorage.getItem('game-isRunning') !== 'true') {
+        let playTime = this.msToHMS(Number(localStorage.getItem('game-playTime')));
+        let score = Number(localStorage.getItem('game-score'));
+        this.submitGame(score, playTime);
+      }
+    },
+
+    msToHMS(ms) {
+      // 1- Convert to seconds:
+      let seconds = ms / 1000;
+      // 2- Extract hours:
+      const hours = parseInt(String(seconds / 3600)); // 3,600 seconds in 1 hour
+      seconds = seconds % 3600; // seconds remaining after extracting hours
+      // 3- Extract minutes:
+      const minutes = parseInt(String(seconds / 60)); // 60 seconds in 1 minute
+      // 4- Keep only seconds not extracted to minutes:
+      seconds = seconds % 60;
+      return hours + ":" + minutes + ":" + seconds;
+    },
+
+    async submitGame(score, playTime) {
+      let body = {
+        score: score,
+        playtime: playTime,
+        date: new Date(),
+        userId: this.userId,
+      }
+      await fetch(App.data().restUrl + '/game/add', {method: 'POST', body: JSON.stringify(body)});
+      this.$emit('gameFinished');
+    }
+  },
 }
-</script>
+</script>

frontend/src/components/Leaderboard.vue

@@ -19,6 +19,7 @@
 
 import LeaderboardEntry from "@/components/LeaderboardEntry.vue";
 import RRButton from "@/components/RRButton.vue";
+import App from "@/App.vue";
 
 export default {
   name: "Leaderboard",
@@ -44,7 +45,7 @@ export default {
   },
   methods: {
     async fetchPage() {
-      let res = await fetch(`http://localhost:3000/leaderboard/${this.type}?pagination=true&entriesPerPage=${this.entriesPerPage}&page=${this.pageNumber}`, {method: "GET"});
+      let res = await fetch(`${App.data().restUrl}/leaderboard/${this.type}?pagination=true&entriesPerPage=${this.entriesPerPage}&page=${this.pageNumber}`, {method: "GET"});
       return await res.json();
     },
     title() {