From 235e43902e73e54b78c4e74fb4e144ce6c04d834 Mon Sep 17 00:00:00 2001
From: alanmcilwaine <alan.j.mcilwaine@gmail.com>
Date: Wed, 1 Oct 2025 10:46:43 +1300
Subject: [PATCH] fix(navigation): Showing the timer on navigation screen now

---
 frontend/src/types/PlayerSession.ts           | 30 ++++++++++---
 frontend/src/views/QuestionNavigationView.vue | 45 ++++++++++++++++---
 2 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/frontend/src/types/PlayerSession.ts b/frontend/src/types/PlayerSession.ts
index 5a53193..c931bf0 100644
--- a/frontend/src/types/PlayerSession.ts
+++ b/frontend/src/types/PlayerSession.ts
@@ -131,15 +131,33 @@ export class PlayerSession extends Session {
 
     // Update leaderboards with final data
     if (data.sessLeaderboard && Array.isArray(data.sessLeaderboard)) {
-      this.lobbyLeaderboard = data.sessLeaderboard.map((player: any) => 
-        createReactivePlayer(player.rank.toString(), player.name, parseFloat(player.score))
-      );
+      try {
+        this.lobbyLeaderboard = data.sessLeaderboard.map((player: any) => {
+          // Parse if it's a string
+          if (typeof player === 'string') {
+            player = JSON.parse(player);
+          }
+          return createReactivePlayer(player.rank?.toString() ?? '0', player.name ?? 'Unknown', parseFloat(player.score ?? 0));
+        });
+      } catch (error) {
+        console.error('Error parsing session leaderboard:', error);
+        this.lobbyLeaderboard = [];
+      }
     }
 
     if (data.globalLeaderoard && Array.isArray(data.globalLeaderoard)) {
-      this.globalLeaderboard = data.globalLeaderoard.map((player: any) => 
-        createReactivePlayer(player.rank.toString(), player.name, parseFloat(player.score))
-      );
+      try {
+        this.globalLeaderboard = data.globalLeaderoard.map((player: any) => {
+          // Parse if it's a string
+          if (typeof player === 'string') {
+            player = JSON.parse(player);
+          }
+          return createReactivePlayer(player.rank?.toString() ?? '0', player.name ?? 'Unknown', parseFloat(player.score ?? 0));
+        });
+      } catch (error) {
+        console.error('Error parsing global leaderboard:', error);
+        this.globalLeaderboard = [];
+      }
     }
 
     // Emit custom event for game end with all the data
diff --git a/frontend/src/views/QuestionNavigationView.vue b/frontend/src/views/QuestionNavigationView.vue
index c1ee0e0..fa0e14d 100644
--- a/frontend/src/views/QuestionNavigationView.vue
+++ b/frontend/src/views/QuestionNavigationView.vue
@@ -3,10 +3,6 @@
     <ReturnHomeComponent
         :onConfirm="handleReturnHome"/>
 
-    <div class="tutorial">
-        <TutorialPopup />
-    </div>
-    
     <div class="question-navigation-view">
         <h2 class="page-title">Question Navigation</h2>
         <div class="questions-container">
@@ -15,6 +11,10 @@
             </div>
         </div>
     </div>
+    <div class="top-right-buttons">
+        <TimerComponent class="timer-component" :gameTimer="gameTimer" />
+        <TutorialPopup class="tutorial-popup" />
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -26,8 +26,10 @@ import { PlayerSession } from '@/types/PlayerSession';
 import APIManager from '@/types/APIManager';
 import router from '@/router';
 import TutorialPopup from '@/components/TutorialPopup.vue';
+import TimerComponent from '@/components/TimerComponent.vue';
+import { onMounted, onUnmounted } from 'vue';
 
-const { questions } = usePlayerSession();
+const { questions, gameTimer } = usePlayerSession();
 
 const handleReturnHome = async () => {
     const session: PlayerSession | null = await APIManager.getInstance().getSession() as PlayerSession;
@@ -37,6 +39,32 @@ const handleReturnHome = async () => {
     router.push('/');
 }
 
+
+onMounted(async () => {
+    const session = await APIManager.getInstance().getSession();
+    console.log(session);
+    if (!session || !(session instanceof PlayerSession)) return;
+    session.getGameTimer()?.start();
+    session.addEventListener("GAME_ENDED", handleGameEnded);
+    console.log("Game timer started");
+});
+
+onUnmounted(async () => {
+    // Clean up game end event listener
+    const session = await APIManager.getInstance().getSession();
+    if (!session || !(session instanceof PlayerSession)) return;
+    session.getGameTimer()?.stop();
+    session.removeEventListener("GAME_ENDED", handleGameEnded);
+    gameTimer.value?.stop();
+});
+
+// Handle game end event
+const handleGameEnded = (data: any) => {
+    console.log("Game ended, navigating to leaderboard", data);
+    router.push('/leaderboard');
+};
+
+
 </script>
 
 <style>
@@ -59,10 +87,13 @@ const handleReturnHome = async () => {
     width: 650px;
 }
 
-.tutorial {
+.top-right-buttons {
     position: absolute;
-    top: 20px;
+    top: 25px;
     right: 20px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
     z-index: 100;
 }