Refractor socket store into game store

src/screens/Characters.vue

@@ -65,24 +65,24 @@
 </template>
 
 <script setup lang="ts">
-import { useSocketStore } from '@/stores/socket'
+import { useGameStore } from '@/stores/game'
 import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { type Character as CharacterT } from '@/types'
 
 const isLoading = ref(true)
 const characters = ref([])
-const socket = useSocketStore()
+const gameStore = useGameStore()
 
 // Fetch characters
-socket.connection.on('character:list', (data: any) => {
+gameStore.connection?.on('character:list', (data: any) => {
   characters.value = data
 })
 
 onMounted(() => {
   // wait 1.5 sec
   setTimeout(() => {
-    socket.connection.emit('character:list')
+    gameStore.connection?.emit('character:list')
     isLoading.value = false
   }, 1000)
 })
@@ -91,30 +91,31 @@ onMounted(() => {
 const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
-  socket.connection.emit('character:connect', { character_id: selected_character.value })
-  socket.connection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
+  console.log('selected_character', selected_character.value)
+  gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
+  gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
 }
 
 // Delete character logics
 function delete_character(character_id: number) {
   if (!character_id) return
-  socket.connection.emit('character:delete', { character_id: character_id })
+  gameStore.connection?.emit('character:delete', { character_id: character_id })
 }
 
 // Create character logics
 const isModalOpen = ref(false)
 const name = ref('')
 function create() {
-  socket.connection.on('character:create:success', (data: CharacterT) => {
-    socket.setCharacter(data)
+  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
+    gameStore.setCharacter(data)
     isModalOpen.value = false
   })
-  socket.connection.emit('character:create', { name: name.value })
+  gameStore.connection?.emit('character:create', { name: name.value })
 }
 
 onBeforeUnmount(() => {
-  socket.connection.off('character:list')
-  socket.connection.off('character:connect')
-  socket.connection.off('character:create:success')
+  gameStore.connection?.off('character:list')
+  gameStore.connection?.off('character:connect')
+  gameStore.connection?.off('character:create:success')
 })
 </script>

src/screens/Game.vue

@@ -31,7 +31,7 @@ import 'phaser'
 import { onUnmounted, toRaw, watch, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
-import { useSocketStore } from '@/stores/socket'
+import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useAssetStore } from '@/stores/assets'
 import World from '@/components/World.vue'
@@ -42,19 +42,19 @@ import GmTools from '@/components/utilities/GmTools.vue'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/utilities/GmPanel.vue'
 
-const socket = useSocketStore()
+const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 const isLoaded = ref(false)
 const { assets } = storeToRefs(assetStore)
 
 onUnmounted(() => {
-  socket.disconnectSocket()
+  gameStore.disconnectSocket()
 })
 
 // On page close
 addEventListener('beforeunload', () => {
-  socket.disconnectSocket()
+  gameStore.disconnectSocket()
 })
 
 const gameConfig = {

src/screens/Login.vue

@@ -32,7 +32,7 @@
 import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
 import { useNotificationStore } from '@/stores/notifications'
-import { useSocketStore } from '@/stores/socket'
+import { useGameStore } from '@/stores/game'
 import { useAssetStore } from '@/stores/assets'
 
 const bgm = ref('bgm')
@@ -41,7 +41,7 @@ if (bgm.value.paused) {
   addEventListener('keydown', () => bgm.value.play())
 }
 
-const socket = useSocketStore()
+const gameStore = useGameStore()
 const notifications = useNotificationStore()
 const assetStore = useAssetStore()
 const username = ref('')
@@ -72,8 +72,8 @@ async function loginFunc() {
     return
   }
 
-  socket.setToken(response.token)
-  await socket.initConnection()
+  gameStore.setToken(response.token)
+  await gameStore.initConnection()
 }
 
 async function registerFunc() {
@@ -91,7 +91,7 @@ async function registerFunc() {
     return
   }
 
-  socket.setToken(response.token)
-  await socket.initConnection()
+  gameStore.setToken(response.token)
+  await gameStore.initConnection()
 }
 </script>