#363 : Moved socket logic into socketManager and removed it from Pinia store

src/App.vue

@@ -16,6 +16,7 @@ import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useSoundComposable } from '@/composables/useSoundComposable'
+import { socketManager } from '@/managers/SocketManager'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, watch } from 'vue'
 
@@ -26,8 +27,8 @@ const { playSound } = useSoundComposable()
 
 const currentScreen = computed(() => {
   if (!gameStore.game.isLoaded) return Loading
-  if (!gameStore.connection) return Login
+  if (!socketManager.connection) return Login
-  if (!gameStore.token) return Login
+  if (!socketManager.token) return Login
   if (!gameStore.character) return Characters
   if (mapEditor.active.value) return MapEditor
   return Game

src/application/enums.ts

@@ -5,6 +5,8 @@ export enum Direction {
 }
 
 export enum SocketEvent {
+  CONNECT_ERROR = 'connect_error',
+  RECONNECT_FAILED = 'reconnect_failed',
   CLOSE = '52',
   DATA = '51',
   CHARACTER_CONNECT = '50',

src/components/game/gui/Chat.vue

@@ -22,6 +22,7 @@
 
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
+import { socketManager } from '@/managers/SocketManager'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { onClickOutside, useFocus } from '@vueuse/core'
@@ -30,7 +31,6 @@ import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const scene = useScene()
 const gameStore = useGameStore()
-const mapStore = useMapStore()
 
 const message = ref('')
 const chats = ref<{ character: string; message: string }[]>([])
@@ -55,7 +55,7 @@ function unfocusChat(event: Event, targetElement: HTMLElement) {
 
 const sendMessage = () => {
   if (!message.value.trim()) return
-  gameStore.connection?.emit(SocketEvent.CHAT_MESSAGE, { message: message.value }, (response: boolean) => {})
+  socketManager.emit(SocketEvent.CHAT_MESSAGE, { message: message.value }, (response: boolean) => {})
   message.value = ''
 }
 
@@ -79,7 +79,7 @@ const scrollToBottom = () => {
   })
 }
 
-gameStore.connection?.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
+socketManager.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
   if (!data.character || !data.message) return
 
   chats.value.push({ character: data.character, message: data.message })
@@ -153,7 +153,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  gameStore.connection?.off(SocketEvent.CHAT_MESSAGE)
+  socketManager.off(SocketEvent.CHAT_MESSAGE)
   removeEventListener('keydown', focusChat)
 })
 </script>

src/components/game/gui/Clock.vue

@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
+import { socketManager } from '@/managers/SocketManager'
 import { useGameStore } from '@/stores/gameStore'
 import { useDateFormat } from '@vueuse/core'
 import { onUnmounted } from 'vue'
@@ -15,6 +16,6 @@ import { onUnmounted } from 'vue'
 const gameStore = useGameStore()
 
 onUnmounted(() => {
-  gameStore.connection?.off(SocketEvent.DATE)
+  socketManager.off(SocketEvent.DATE)
 })
 </script>

src/components/game/map/Characters.vue

@@ -6,6 +6,7 @@
 import { SocketEvent } from '@/application/enums'
 import type { MapCharacter, UUID } from '@/application/types'
 import Character from '@/components/game/character/Character.vue'
+import { socketManager } from '@/managers/SocketManager'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { onUnmounted } from 'vue'
@@ -17,15 +18,15 @@ const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
 }>()
 
-gameStore.connection?.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
+socketManager.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
   mapStore.addCharacter(data)
 })
 
-gameStore.connection?.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
+socketManager.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
   mapStore.removeCharacter(characterId)
 })
 
-gameStore.connection?.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [UUID, number, number, number, boolean]) => {
+socketManager.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [UUID, number, number, number, boolean]) => {
   mapStore.updateCharacterPosition([characterId, posX, posY, rot, isMoving])
 
   if (characterId === gameStore.character?.id) {
@@ -35,14 +36,14 @@ gameStore.connection?.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, po
   }
 })
 
-gameStore.connection?.on(SocketEvent.MAP_CHARACTER_ATTACK, (characterId: UUID) => {
+socketManager.on(SocketEvent.MAP_CHARACTER_ATTACK, (characterId: UUID) => {
   mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
 })
 
 onUnmounted(() => {
-  gameStore.connection?.off(SocketEvent.MAP_CHARACTER_ATTACK)
+  socketManager.off(SocketEvent.MAP_CHARACTER_ATTACK)
-  gameStore.connection?.off(SocketEvent.MAP_CHARACTER_MOVE)
+  socketManager.off(SocketEvent.MAP_CHARACTER_MOVE)
-  gameStore.connection?.off(SocketEvent.MAP_CHARACTER_JOIN)
+  socketManager.off(SocketEvent.MAP_CHARACTER_JOIN)
-  gameStore.connection?.off(SocketEvent.MAP_CHARACTER_LEAVE)
+  socketManager.off(SocketEvent.MAP_CHARACTER_LEAVE)
 })
 </script>

src/components/game/map/Map.vue

@@ -11,6 +11,7 @@ import { unduplicateArray } from '@/application/utilities'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
 import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
+import { socketManager } from '@/managers/SocketManager'
 import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray } from '@/services/mapService'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
@@ -29,7 +30,7 @@ const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
 // Event listeners
-gameStore.connection?.on(SocketEvent.MAP_CHARACTER_TELEPORT, (data: mapLoadData) => {
+socketManager.on(SocketEvent.MAP_CHARACTER_TELEPORT, (data: mapLoadData) => {
   mapStore.setMapId(data.mapId)
   mapStore.setCharacters(data.characters)
 })
@@ -65,6 +66,6 @@ onUnmounted(() => {
     tileMap.value.destroy()
   }
 
-  gameStore.connection?.off(SocketEvent.MAP_CHARACTER_TELEPORT)
+  socketManager.off(SocketEvent.MAP_CHARACTER_TELEPORT)
 })
 </script>

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue

@@ -36,6 +36,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -66,7 +67,7 @@ if (selectedCharacterHair.value) {
 function removeCharacterHair() {
   if (!selectedCharacterHair.value) return
 
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_REMOVE, { id: selectedCharacterHair.value.id }, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_REMOVE, { id: selectedCharacterHair.value.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to remove character hair')
       return
@@ -76,7 +77,7 @@ function removeCharacterHair() {
 }
 
 function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
     assetManagerStore.setCharacterHairList(response)
 
     if (unsetSelectedCharacterHair) {
@@ -94,7 +95,7 @@ function saveCharacterHair() {
     spriteId: characterSpriteId.value
   }
 
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_UPDATE, characterHairData, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_UPDATE, characterHairData, (response: boolean) => {
     if (!response) {
       console.error('Failed to save character type')
       return
@@ -114,7 +115,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
 onMounted(() => {
   if (!selectedCharacterHair.value) return
 
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
     assetManagerStore.setSpriteList(response)
   })
 })

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue

@@ -34,6 +34,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import type { CharacterHair } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -53,13 +54,13 @@ const handleSearch = () => {
 }
 
 const createNewCharacterHair = () => {
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_CREATE, {}, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_CREATE, {}, (response: boolean) => {
     if (!response) {
       console.error('Failed to create new character type')
       return
     }
 
-    gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
+    socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
       assetManagerStore.setCharacterHairList(response)
     })
   })
@@ -93,7 +94,7 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
     assetManagerStore.setCharacterHairList(response)
   })
 })

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import type { CharacterGender, CharacterRace, CharacterType, Sprite } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -75,7 +76,7 @@ if (selectedCharacterType.value) {
 function removeCharacterType() {
   if (!selectedCharacterType.value) return
 
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_REMOVE, { id: selectedCharacterType.value.id }, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_REMOVE, { id: selectedCharacterType.value.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to remove character type')
       return
@@ -85,7 +86,7 @@ function removeCharacterType() {
 }
 
 function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
     assetManagerStore.setCharacterTypeList(response)
 
     if (unsetSelectedCharacterType) {
@@ -104,7 +105,7 @@ function saveCharacterType() {
     spriteId: characterSpriteId.value
   }
 
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_UPDATE, characterTypeData, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_UPDATE, characterTypeData, (response: boolean) => {
     if (!response) {
       console.error('Failed to save character type')
       return
@@ -125,7 +126,7 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
 onMounted(() => {
   if (!selectedCharacterType.value) return
 
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
     assetManagerStore.setSpriteList(response)
   })
 })

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue

@@ -34,6 +34,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import type { CharacterType } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -53,13 +54,13 @@ const handleSearch = () => {
 }
 
 const createNewCharacterType = () => {
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_CREATE, {}, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_CREATE, {}, (response: boolean) => {
     if (!response) {
       console.error('Failed to create new character type')
       return
     }
 
-    gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
+    socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
       assetManagerStore.setCharacterTypeList(response)
     })
   })
@@ -93,7 +94,7 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
+  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
     assetManagerStore.setCharacterTypeList(response)
   })
 })

src/components/gameMaster/assetManager/partials/item/itemDetails.vue

@@ -46,6 +46,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import type { Item, ItemRarity, ItemType, Sprite } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -81,7 +82,7 @@ if (selectedItem.value) {
 function removeItem() {
   if (!selectedItem.value) return
 
-  gameStore.connection?.emit(SocketEvent.GM_ITEM_REMOVE, { id: selectedItem.value.id }, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_ITEM_REMOVE, { id: selectedItem.value.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to remove item')
       return
@@ -91,7 +92,7 @@ function removeItem() {
 }
 
 function refreshItemList(unsetSelectedItem = true) {
-  gameStore.connection?.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
+  socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
     assetManagerStore.setItemList(response)
 
     if (unsetSelectedItem) {
@@ -111,7 +112,7 @@ function saveItem() {
     spriteId: itemSpriteId.value
   }
 
-  gameStore.connection?.emit(SocketEvent.GM_ITEM_UPDATE, itemData, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_ITEM_UPDATE, itemData, (response: boolean) => {
     if (!response) {
       console.error('Failed to save item')
       return
@@ -133,7 +134,7 @@ watch(selectedItem, (item: Item | null) => {
 onMounted(() => {
   if (!selectedItem.value) return
 
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
     assetManagerStore.setSpriteList(response)
   })
 })

src/components/gameMaster/assetManager/partials/item/itemList.vue

@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import type { Item } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -49,13 +50,13 @@ const handleSearch = () => {
 }
 
 const createNewItem = () => {
-  gameStore.connection?.emit(SocketEvent.GM_ITEM_CREATE, {}, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_ITEM_CREATE, {}, (response: boolean) => {
     if (!response) {
       console.error('Failed to create new item')
       return
     }
 
-    gameStore.connection?.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
+    socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
       assetManagerStore.setItemList(response)
     })
   })
@@ -89,7 +90,7 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
+  socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
     assetManagerStore.setItemList(response)
   })
 })

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -60,6 +60,7 @@ import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { MapObject } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -97,7 +98,7 @@ if (selectedMapObject.value) {
 }
 
 function removeObject() {
-  gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObject: selectedMapObject.value?.id }, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObject: selectedMapObject.value?.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to remove mapObject')
       return
@@ -107,7 +108,7 @@ function removeObject() {
 }
 
 function refreshObjectList(unsetSelectedMapObject = true) {
-  gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
+  socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
     assetManagerStore.setMapObjectList(response)
 
     if (unsetSelectedMapObject) {
@@ -122,7 +123,7 @@ function saveObject() {
     return
   }
 
-  gameStore.connection?.emit(
+  socketManager.emit(
     SocketEvent.GM_MAPOBJECT_UPDATE,
     {
       id: selectedMapObject.value.id,

src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue

@@ -31,6 +31,7 @@
 import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { MapObject } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -48,13 +49,13 @@ const elementToScroll = ref()
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_UPLOAD, files, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_MAPOBJECT_UPLOAD, files, (response: boolean) => {
     if (!response) {
       if (config.environment === 'development') console.error('Failed to upload map object')
       return
     }
 
-    gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
+    socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
       assetManagerStore.setMapObjectList(response)
     })
   })
@@ -93,7 +94,7 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
+  socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
     assetManagerStore.setMapObjectList(response)
   })
 })

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -74,6 +74,7 @@ import { uuidv4 } from '@/application/utilities'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
 import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
 import Accordion from '@/components/utilities/Accordion.vue'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -98,7 +99,7 @@ if (selectedSprite.value) {
 }
 
 function deleteSprite() {
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_DELETE, { id: selectedSprite.value?.id }, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_DELETE, { id: selectedSprite.value?.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to delete sprite')
       return
@@ -108,7 +109,7 @@ function deleteSprite() {
 }
 
 function copySprite() {
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_COPY, { id: selectedSprite.value?.id }, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_COPY, { id: selectedSprite.value?.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to copy sprite')
       return
@@ -118,7 +119,7 @@ function copySprite() {
 }
 
 function refreshSpriteList(unsetSelectedSprite = true) {
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
     assetManagerStore.setSpriteList(response)
 
     if (unsetSelectedSprite) {
@@ -150,7 +151,7 @@ function saveSprite() {
       }) ?? []
   }
 
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_UPDATE, updatedSprite, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_UPDATE, updatedSprite, (response: boolean) => {
     if (!response) {
       console.error('Failed to save sprite')
       return

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -27,6 +27,7 @@
 import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { Sprite } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -41,13 +42,13 @@ const hasScrolled = ref(false)
 const elementToScroll = ref()
 
 function newButtonClickHandler() {
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_CREATE, {}, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_CREATE, {}, (response: boolean) => {
     if (!response) {
       if (config.environment === 'development') console.error('Failed to create new sprite')
       return
     }
 
-    gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+    socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
       assetManagerStore.setSpriteList(response)
     })
   })
@@ -86,7 +87,7 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
     assetManagerStore.setSpriteList(response)
   })
 })

src/components/gameMaster/assetManager/partials/tile/TileDetails.vue

@@ -27,6 +27,7 @@ import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { Tile } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { socketManager } from '@/managers/SocketManager'
 import { TileStorage } from '@/storage/storages'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
@@ -57,7 +58,7 @@ watch(selectedTile, (tile: Tile | null) => {
 })
 
 async function deleteTile() {
-  gameStore.connection?.emit(SocketEvent.GM_TILE_DELETE, { id: selectedTile.value?.id }, async (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_TILE_DELETE, { id: selectedTile.value?.id }, async (response: boolean) => {
     if (!response) {
       console.error('Failed to delete tile')
       return
@@ -68,7 +69,7 @@ async function deleteTile() {
 }
 
 function refreshTileList(unsetSelectedTile = true) {
-  gameStore.connection?.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
+  socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
     assetManagerStore.setTileList(response)
 
     if (unsetSelectedTile) {
@@ -83,7 +84,7 @@ function saveTile() {
     return
   }
 
-  gameStore.connection?.emit(
+  socketManager.emit(
     'gm:tile:update',
     {
       id: selectedTile.value.id,

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -31,6 +31,7 @@
 import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { Tile } from '@/application/types'
+import { socketManager } from '@/managers/SocketManager'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -48,13 +49,13 @@ const elementToScroll = ref()
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  gameStore.connection?.emit(SocketEvent.GM_TILE_UPLOAD, files, (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_TILE_UPLOAD, files, (response: boolean) => {
     if (!response) {
       if (config.environment === 'development') console.error('Failed to upload tile')
       return
     }
 
-    gameStore.connection?.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
+    socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
       assetManagerStore.setTileList(response)
     })
   })
@@ -93,7 +94,7 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
+  socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
     assetManagerStore.setTileList(response)
   })
 })

src/components/gameMaster/mapEditor/partials/CreateMap.vue

@@ -39,6 +39,7 @@ import { SocketEvent } from '@/application/enums'
 import type { Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { socketManager } from '@/managers/SocketManager'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { ref, useTemplateRef } from 'vue'
@@ -57,7 +58,7 @@ const pvp = ref(false)
 defineExpose({ open: () => modalRef.value?.open() })
 
 async function submit() {
-  gameStore.connection?.emit(SocketEvent.GM_MAP_CREATE, { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
+  socketManager.emit(SocketEvent.GM_MAP_CREATE, { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
     if (!response) {
       return
     }

src/components/gameMaster/mapEditor/partials/MapList.vue

@@ -34,6 +34,7 @@ import type { Map } from '@/application/types'
 import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { socketManager } from '@/managers/SocketManager'
 import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref, useTemplateRef } from 'vue'
@@ -61,14 +62,14 @@ async function fetchMaps() {
 }
 
 function loadMap(id: string) {
-  gameStore.connection?.emit(SocketEvent.GM_MAP_REQUEST, { mapId: id }, (response: Map) => {
+  socketManager.emit(SocketEvent.GM_MAP_REQUEST, { mapId: id }, (response: Map) => {
     mapEditor.loadMap(response)
   })
   modalRef.value?.close()
 }
 
 async function deleteMap(id: string) {
-  gameStore.connection?.emit(SocketEvent.GM_MAP_DELETE, { mapId: id }, async (response: boolean) => {
+  socketManager.emit(SocketEvent.GM_MAP_DELETE, { mapId: id }, async (response: boolean) => {
     if (!response) {
       gameStore.addNotification({
         title: 'Error',

src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue

@@ -45,6 +45,7 @@ import { SocketEvent } from '@/application/enums'
 import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { socketManager } from '@/managers/SocketManager'
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref } from 'vue'
@@ -81,7 +82,7 @@ const handleDelete = () => {
 async function handleUpdate() {
   if (!mapObject.value) return
 
-  gameStore.connection?.emit(
+  socketManager.emit(
     SocketEvent.GM_MAPOBJECT_UPDATE,
     {
       id: props.placedMapObject.mapObject as string,

src/components/login/LoginForm.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import { socketManager } from '@/managers/SocketManager'
 import { login } from '@/services/authenticationService'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
@@ -53,7 +54,7 @@ async function submit() {
     formError.value = response.error
     return
   }
-  gameStore.setToken(response.token)
+  socketManager.setToken(response.token)
   gameStore.initConnection()
   return true // Indicate success
 }

src/components/login/RegisterForm.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import { socketManager } from '@/managers/SocketManager'
 import { login, register } from '@/services/authenticationService'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
@@ -67,7 +68,7 @@ async function submit() {
     return
   }
 
-  gameStore.setToken(loginResponse.token)
+  socketManager.setToken(loginResponse.token)
   gameStore.initConnection()
 }
 </script>

src/components/screens/Characters.vue

@@ -126,6 +126,7 @@ import { SocketEvent } from '@/application/enums'
 import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useSoundComposable } from '@/composables/useSoundComposable'
+import { socketManager } from '@/managers/SocketManager'
 import { CharacterHairStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -142,10 +143,10 @@ const selectedHairId = ref<string | null>(null)
 
 // Fetch characters
 setTimeout(() => {
-  gameStore.connection?.emit(SocketEvent.CHARACTER_LIST)
+  socketManager.emit(SocketEvent.CHARACTER_LIST)
 }, 750)
 
-gameStore.connection?.on(SocketEvent.CHARACTER_LIST, (data: any) => {
+socketManager.on(SocketEvent.CHARACTER_LIST, (data: any) => {
   characters.value = data
   isLoading.value = false
 })
@@ -154,7 +155,7 @@ gameStore.connection?.on(SocketEvent.CHARACTER_LIST, (data: any) => {
 function loginWithCharacter() {
   if (!selectedCharacterId.value) return
 
-  gameStore.connection?.emit(
+  socketManager.emit(
     SocketEvent.CHARACTER_CONNECT,
     {
       characterId: selectedCharacterId.value,
@@ -168,7 +169,7 @@ function loginWithCharacter() {
 
 // Create character logics
 function createCharacter() {
-  gameStore.connection?.emit(SocketEvent.CHARACTER_CREATE, { name: newCharacterName.value }, (success: boolean) => {
+  socketManager.emit(SocketEvent.CHARACTER_CREATE, { name: newCharacterName.value }, (success: boolean) => {
     if (success) return
     isCreateNewCharacterModalOpen.value = false
   })
@@ -187,8 +188,8 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
-  gameStore.connection?.off(SocketEvent.CHARACTER_LIST)
+  socketManager.off(SocketEvent.CHARACTER_LIST)
-  gameStore.connection?.off(SocketEvent.CHARACTER_CONNECT)
+  socketManager.off(SocketEvent.CHARACTER_CONNECT)
-  gameStore.connection?.off(SocketEvent.CHARACTER_CREATE)
+  socketManager.off(SocketEvent.CHARACTER_CREATE)
 })
 </script>

src/components/screens/MapEditor.vue

@@ -20,6 +20,7 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
+import { socketManager } from '@/managers/SocketManager'
 import 'phaser'
 import type { Map as MapT } from '@/application/types'
 import Map from '@/components/gameMaster/mapEditor/Map.vue'
@@ -92,7 +93,7 @@ function save() {
     mapId: currentMap.id
   }
 
-  gameStore.connection?.emit(SocketEvent.GM_MAP_UPDATE, data, (response: MapT) => {
+  socketManager.emit(SocketEvent.GM_MAP_UPDATE, data, (response: MapT) => {
     mapStorage.update(response.id, response)
   })
 }

src/components/utilities/Debug.vue

@@ -1,6 +1,7 @@
 <template></template>
 
 <script setup lang="ts">
+import { socketManager } from '@/managers/SocketManager'
 import { login } from '@/services/authenticationService'
 import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SoundStorage, SpriteStorage, TileStorage } from '@/storage/storages'
 import { TextureStorage } from '@/storage/textureStorage'
@@ -41,13 +42,13 @@ async function handleKeyPress(event: KeyboardEvent) {
   }
 
   if (currentString.includes('11')) {
-    if (gameStore.token) return
+    if (socketManager.token) return
     const response = await login('root', 'password')
 
     if (response.success === undefined) {
       return
     }
-    gameStore.setToken(response.token)
+    socketManager.setToken(response.token)
     gameStore.initConnection()
   }
 

src/components/utilities/Notifications.vue

@@ -12,6 +12,7 @@
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
 import Modal from '@/components/utilities/Modal.vue'
+import { socketManager } from '@/managers/SocketManager'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
 

src/composables/controls/useGameControlsComposable.ts

@@ -1,4 +1,5 @@
 import { SocketEvent } from '@/application/enums'
+import { socketManager } from '@/managers/SocketManager'
 import { getTile } from '@/services/mapService'
 import { useGameStore } from '@/stores/gameStore'
 import type { Ref } from 'vue'
@@ -42,8 +43,8 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
   function emitMovement(x: number, y: number) {
     if (x === currentPosition.x && y === currentPosition.y) return
 
-    gameStore.connection?.emit(SocketEvent.MAP_CHARACTER_MOVE, [x, y])
+    socketManager.emit(SocketEvent.MAP_CHARACTER_MOVE, [x, y])
-    gameStore.connection?.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [string, number, number, number, boolean]) => {
+    socketManager.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [string, number, number, number, boolean]) => {
       if (characterId !== gameStore.character?.id) return
       currentPosition = { x: posX, y: posY }
     })
@@ -109,7 +110,7 @@ export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Til
     }
 
     if (event.key === 'Control') {
-      gameStore.connection?.emit(SocketEvent.MAP_CHARACTER_ATTACK)
+      socketManager.emit(SocketEvent.MAP_CHARACTER_ATTACK)
     }
   }
 

src/managers/SocketManager.ts

@@ -0,0 +1,76 @@
+import config from '@/application/config'
+import { SocketEvent } from '@/application/enums'
+import { useCookies } from '@vueuse/integrations/useCookies'
+import { io, Socket } from 'socket.io-client'
+import { ref, shallowRef } from 'vue'
+
+class SocketManager {
+  private static instance: SocketManager
+  private _connection = shallowRef<Socket | null>(null)
+  private _token = ref('')
+
+  private constructor() {}
+
+  public static getInstance(): SocketManager {
+    if (!SocketManager.instance) {
+      SocketManager.instance = new SocketManager()
+    }
+    return SocketManager.instance
+  }
+
+  public get connection() {
+    return this._connection.value
+  }
+
+  public get token() {
+    return this._token.value
+  }
+
+  public setToken(token: string) {
+    this._token.value = token
+  }
+
+  public initConnection(): Socket {
+    if (this._connection.value) return this._connection.value
+
+    const socket = io(config.server_endpoint, {
+      secure: config.environment === 'production',
+      withCredentials: true,
+      transports: ['websocket'],
+      reconnectionAttempts: 5
+    })
+
+    this._connection.value = socket
+    return socket
+  }
+
+  public disconnect(): void {
+    if (!this._connection.value) return
+
+    this._connection.value.off(SocketEvent.CONNECT_ERROR)
+    this._connection.value.off(SocketEvent.RECONNECT_FAILED)
+    this._connection.value.off(SocketEvent.DATE)
+    this._connection.value.disconnect()
+
+    useCookies().remove('token', {
+      domain: config.domain
+    })
+
+    this._connection.value = null
+    this._token.value = ''
+  }
+
+  public emit(event: string, ...args: any[]): void {
+    this._connection.value?.emit(event, ...args)
+  }
+
+  public on(event: string, callback: (...args: any[]) => void): void {
+    this._connection.value?.on(event, callback)
+  }
+
+  public off(event: string, callback?: (...args: any[]) => void): void {
+    this._connection.value?.off(event, callback)
+  }
+}
+
+export const socketManager = SocketManager.getInstance()

src/stores/gameStore.ts

@@ -1,16 +1,12 @@
-import config from '@/application/config'
 import { SocketEvent } from '@/application/enums'
 import type { Character, Notification, User, WorldSettings } from '@/application/types'
-import { useCookies } from '@vueuse/integrations/useCookies'
+import { socketManager } from '@/managers/SocketManager'
 import { defineStore } from 'pinia'
-import { io, Socket } from 'socket.io-client'
 
 export const useGameStore = defineStore('game', {
   state: () => {
     return {
       notifications: [] as Notification[],
-      token: '',
-      connection: null as Socket | null,
       user: null as User | null,
       character: null as Character | null,
       world: {
@@ -51,9 +47,6 @@ export const useGameStore = defineStore('game', {
     removeNotification(id: string) {
       this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id)
     },
-    setToken(token: string) {
-      this.token = token
-    },
     setUser(user: User | null) {
       this.user = user
     },
@@ -73,49 +66,34 @@ export const useGameStore = defineStore('game', {
       this.uiSettings.isCharacterProfileOpen = !this.uiSettings.isCharacterProfileOpen
     },
     initConnection() {
-      this.connection = io(config.server_endpoint, {
+      const socket = socketManager.initConnection()
-        secure: config.environment === 'production',
-        withCredentials: true,
-        transports: ['websocket'],
-        reconnectionAttempts: 5
-      })
 
-      // #99 - If we can't connect, disconnect
+      // Handle connect error
-      this.connection.on('connect_error', () => {
+      socket.on(SocketEvent.CONNECT_ERROR, () => {
         this.disconnectSocket()
       })
 
-      // Let the server know the user is logged in
+      // Handle failed reconnection
-      this.connection.emit(SocketEvent.LOGIN)
+      socket.on(SocketEvent.RECONNECT_FAILED, () => {
+        this.disconnectSocket()
+      })
 
-      // set user
+      // Emit login event
-      this.connection.on(SocketEvent.LOGGED_IN, (user: User) => {
+      socketManager.emit(SocketEvent.LOGIN)
+
+      // Handle logged in event
+      socketManager.on(SocketEvent.LOGGED_IN, (user: User) => {
         this.setUser(user)
       })
 
-      // When we can't reconnect, disconnect
+      // Handle date updates
-      this.connection.on('reconnect_failed', () => {
+      socketManager.on(SocketEvent.DATE, (data: Date) => {
-        this.disconnectSocket()
-      })
-
-      // Listen for new date from socket
-      this.connection.on(SocketEvent.DATE, (data: Date) => {
         this.world.date = new Date(data)
       })
     },
     disconnectSocket() {
-      // Remove event listeners
+      socketManager.disconnect()
-      this.connection?.off('connect_error')
-      this.connection?.off('reconnect_failed')
-      this.connection?.off(SocketEvent.DATE)
-      this.connection?.disconnect()
 
-      useCookies().remove('token', {
-        domain: config.domain
-      })
-
-      this.connection = null
-      this.token = ''
       this.user = null
       this.character = null