diff --git a/client/src/services/socket.service.ts b/client/src/services/socket.service.ts index 034b028..b6b2733 100644 --- a/client/src/services/socket.service.ts +++ b/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(); \ No newline at end of file diff --git a/client/src/stores/editor.store.ts b/client/src/stores/editor.store.ts index a669047..c87f3ea 100644 --- a/client/src/stores/editor.store.ts +++ b/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 }; }); \ No newline at end of file diff --git a/client/src/views/PlayView.vue b/client/src/views/PlayView.vue index 79361d5..f269f72 100644 --- a/client/src/views/PlayView.vue +++ b/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(); +});