PIX-41 Introduce cleanup logic to disconnect the socket and reset editor state when PlayView unmounts.

Author: matteosusca

client/src/services/socket.service.ts

@@ -38,6 +38,13 @@ class SocketService {
   emitJoinLobby(lobbyName: string) {
     this.socket?.emit('JOIN_LOBBY', lobbyName);
   }
+
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
 }
 
 export const socketService = new SocketService();

client/src/stores/editor.store.ts

@@ -229,6 +229,14 @@ export const useEditorStore = defineStore('editor', () => {
     });
   }
 
+  const cleanup = () => {
+    socketService.disconnect();
+    isConnected.value = false;
+    currentLobbyName.value = '';
+    pixelsBuffer.value = [];
+    isDrawing.value = false;
+  };
+
   return {
     width,
     height,
@@ -247,6 +255,7 @@ export const useEditorStore = defineStore('editor', () => {
     endStroke,
     clearCanvas,
     isConnected,
-    init
+    init,
+    cleanup
   };
 });

client/src/views/PlayView.vue

@@ -11,7 +11,7 @@ import { getLobbyById } from '../services/api';
 
 // Setup Store
 const store = useEditorStore();
-const { width, height, pixels, palette, selectedColorIndex, isConnected, pixelUpdateEvent } = storeToRefs(store);
+const { width, height, pixels, palette, pixelUpdateEvent } = storeToRefs(store);
 
 const route = useRoute();
 
@@ -34,6 +34,12 @@ onMounted(async () => {
 
   store.init(lobbyName);
 });
+
+import { onUnmounted } from 'vue';
+
+onUnmounted(() => {
+  store.cleanup();
+});
 </script>
 
 <template>