Refractor socket store into game store

src/App.vue

@@ -16,26 +16,29 @@ import Register from '@/screens/Register.vue'
 import Characters from '@/screens/Characters.vue'
 import Game from '@/screens/Game.vue'
 import { storeToRefs } from 'pinia'
-import { useSocketStore } from '@/stores/socket'
 
-const socket = useSocketStore()
 const gameStore = useGameStore()
 const {screen} = storeToRefs(gameStore);
 
-socket.$subscribe(
+gameStore.$subscribe(
   (mutation, state) => {
-    if (!state.connection) {
-      screen.value = 'login'
-    }
+    let newScreen = screen.value;
 
-    if (state.token && state.connection) {
-      screen.value = 'characters'
+    if (!state.connection) {
+      newScreen = 'login';
+    } else if (state.token && state.connection) {
+      newScreen = 'characters';
 
       if (state.character) {
-        screen.value = 'game'
+        newScreen = 'game';
       }
     }
+
+    // Update screen.value only if it's different from the new state
+    if (screen.value !== newScreen) {
+      screen.value = newScreen;
+    }
   },
   { detached: true }
-)
+);
 </script>