feat: Create authorization

src/composables/useWebsocket.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
 import {
   connectWebSocket,
   disconnectWebSocket,
@@ -8,6 +8,7 @@ import {
   isWebSocketConnected,
   setDefaultHandler,
 } from "@/services/ws";
+import { useIngame } from "@/composables/useIngame";
 
 function defaultEventHandler<T = any>(data: (data: T) => void) {
   setDefaultHandler(data);
@@ -16,15 +17,28 @@ function defaultEventHandler<T = any>(data: (data: T) => void) {
 export function useWebSocket() {
   const isConnected = ref(isWebSocketConnected());
   const lastMessage = ref<any>(null);
-
   const lastError = ref<string | null>(null);
+  
+  // Get ingame store to sync connection state
+  const ig = useIngame();
+
+  // Watch the ingame store's connection state and keep this composable in sync
+  watch(() => ig.isWsConnected, (connected) => {
+    isConnected.value = connected;
+  });
+
+  // Also update this composable's state when connecting/disconnecting
+  const updateConnectionState = (connected: boolean) => {
+    isConnected.value = connected;
+  };
 
   async function safeConnect(url?: string) {
     return connectWebSocket(url)
       .then(() => {
-        isConnected.value = true;
+        updateConnectionState(true);
       })
       .catch((err) => {
+        updateConnectionState(false);
         lastError.value = err?.message ?? "Unknown WS error";
         throw err;
       });