vue.js used

src/App.vue

@@ -0,0 +1,98 @@
+// src/App.vue
+<template>
+  <div :class="[theme, 'min-h-screen flex flex-col no-select']">
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, watch } from 'vue'; // Added onUnmounted
+import { useStore } from 'vuex';
+import { AudioService } from './services/AudioService';
+
+const store = useStore();
+const theme = computed(() => store.getters.theme);
+
+onMounted(() => {
+  // store.dispatch('loadState'); // <-- REMOVE THIS LINE
+  applyTheme();
+  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.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();
+});
+
+watch(() => store.state.isMuted, (newMutedState) => {
+  AudioService.setMuted(newMutedState);
+});
+
+
+const applyTheme = () => {
+  if (store.getters.theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+};
+
+const handleGlobalKeyDown = (event) => {
+  if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.isContentEditable) {
+    return;
+  }
+
+  const keyPressed = event.key.toLowerCase();
+  
+  if (keyPressed === store.getters.globalHotkeyStopPause && store.getters.globalHotkeyStopPause) {
+    event.preventDefault();
+    store.dispatch('globalStopPauseAll');
+    return;
+  }
+
+  const currentPlayerFromStore = store.getters.currentPlayer; // Renamed to avoid conflict
+  const gameMode = store.getters.gameMode;
+
+  if (gameMode === 'normal' && currentPlayerFromStore && keyPressed === currentPlayerFromStore.hotkey) {
+    event.preventDefault();
+    const wasRunning = currentPlayerFromStore.isTimerRunning;
+    store.dispatch('passTurn').then(() => {
+        const newCurrentPlayer = store.getters.currentPlayer; // Get updated player
+        if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
+            AudioService.playPassTurnAlert();
+        }
+    });
+    return;
+  }
+  
+  if (gameMode === 'allTimers') {
+    const playerToToggle = store.state.players.find(p => p.hotkey === keyPressed && !p.isSkipped);
+    if (playerToToggle) {
+      event.preventDefault();
+      const playerIndex = store.state.players.indexOf(playerToToggle);
+      store.dispatch('togglePlayerTimerAllTimersMode', playerIndex);
+    }
+  }
+};
+
+</script>
+
+<style>
+html, body, #app {
+  height: 100%;
+  overscroll-behavior: none;
+}
+</style>