without footer

src/App.vue

@@ -1,12 +1,11 @@
-// src/App.vue
 <template>
-  <div :class="[theme, 'min-h-screen flex flex-col no-select']">
-    <router-view />
+  <div :class="[theme, 'min-h-screen flex flex-col no-select']"> <!-- min-h-screen and flex flex-col are good -->
+    <router-view class="flex-grow" /> <!-- Add flex-grow to router-view if its direct child needs to expand -->
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue'; // Added onUnmounted
+import { computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { AudioService } from './services/AudioService';
 
@@ -14,25 +13,24 @@ const store = useStore();
 const theme = computed(() => store.getters.theme);
 
 onMounted(() => {
-  // store.dispatch('loadState'); // <-- REMOVE THIS LINE
-  applyTheme();
+  store.dispatch('loadState').then(() => {
+    console.log("App.vue: Store has finished loading state.");
+    applyTheme();
+  }).catch(error => {
+    console.error("App.vue: Error during store.dispatch('loadState'):", error);
+  });
+  
   document.addEventListener('keydown', handleGlobalKeyDown);
 
   const resumeAudio = () => {
     AudioService.resumeContext();
-    // document.body.removeEventListener('click', resumeAudio); // These are fine with {once: true}
-    // document.body.removeEventListener('touchstart', resumeAudio);
+    document.body.removeEventListener('click', resumeAudio);
+    document.body.removeEventListener('touchstart', resumeAudio);
   };
   document.body.addEventListener('click', resumeAudio, { once: true });
   document.body.addEventListener('touchstart', resumeAudio, { once: true });
 });
 
-// Add onUnmounted to clean up the global event listener
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleGlobalKeyDown);
-});
-
-
 watch(theme, () => {
   applyTheme();
 });
@@ -63,14 +61,14 @@ const handleGlobalKeyDown = (event) => {
     return;
   }
 
-  const currentPlayerFromStore = store.getters.currentPlayer; // Renamed to avoid conflict
-  const gameMode = store.getters.gameMode;
+  const currentPlayerInStore = store.getters.currentPlayer;
+  const gameModeInStore = store.getters.gameMode;
 
-  if (gameMode === 'normal' && currentPlayerFromStore && keyPressed === currentPlayerFromStore.hotkey) {
+  if (gameModeInStore === 'normal' && currentPlayerInStore && keyPressed === currentPlayerInStore.hotkey) {
     event.preventDefault();
-    const wasRunning = currentPlayerFromStore.isTimerRunning;
+    const wasRunning = currentPlayerInStore.isTimerRunning;
     store.dispatch('passTurn').then(() => {
-        const newCurrentPlayer = store.getters.currentPlayer; // Get updated player
+        const newCurrentPlayer = store.getters.currentPlayer;
         if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
             AudioService.playPassTurnAlert();
         }
@@ -78,7 +76,7 @@ const handleGlobalKeyDown = (event) => {
     return;
   }
   
-  if (gameMode === 'allTimers') {
+  if (gameModeInStore === 'allTimers') {
     const playerToToggle = store.state.players.find(p => p.hotkey === keyPressed && !p.isSkipped);
     if (playerToToggle) {
       event.preventDefault();
@@ -87,12 +85,20 @@ const handleGlobalKeyDown = (event) => {
     }
   }
 };
-
 </script>
 
 <style>
-html, body, #app {
+html, body, #app { /* These styles are critical */
   height: 100%;
+  margin: 0; /* Ensure no default margin */
+  padding: 0; /* Ensure no default padding */
   overscroll-behavior: none;
 }
+/* Ensure #app's direct child (from router-view) can also flex expand if needed */
+/* This might not be necessary if GameView itself handles its height with flex */
+/* #app > div {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+} */
 </style>