Refractor socket store into game store

src/stores/game.ts

@@ -1,12 +1,62 @@
 import { defineStore } from 'pinia'
+import { io, Socket } from 'socket.io-client'
+import type { Character, User } from '@/types'
+import config from '@/config'
+import { useCookies } from '@vueuse/integrations/useCookies'
 
 export const useGameStore = defineStore('game', {
   state: () => ({
     screen: 'login',
+    token: '' as string | null,
+    connection: null as Socket | null,
+    user: null as User | null,
+    character: null as Character | null
   }),
   actions: {
     setScreen(screen: string) {
       this.screen = screen
     },
+    initConnection() {
+      this.connection = io(config.server_endpoint, {
+        secure: !config.development,
+        withCredentials: true,
+        transports: ['websocket'],
+        reconnectionAttempts: 5
+      })
+
+      // Let the server know the user is logged in
+      this.connection.emit('login')
+
+      // set user
+      this.connection.on('logged_in', (user: User) => {
+        this.setUser(user)
+      })
+
+      // When we can't reconnect, disconnect
+      this.connection.on('reconnect_failed', () => {
+        this.disconnectSocket()
+      })
+    },
+    disconnectSocket() {
+      if (!this.connection) return
+
+      this.connection.disconnect()
+      this.connection = null
+
+      this.token = null
+      this.user = null
+      this.character = null
+
+      useCookies().remove('token')
+    },
+    setToken(token: string) {
+      this.token = token
+    },
+    setUser(user: User | null) {
+      this.user = user
+    },
+    setCharacter(character: Character | null) {
+      this.character = character
+    }
   }
 })

src/stores/socket.ts

@@ -1,65 +0,0 @@
-import { defineStore, type StoreDefinition } from 'pinia'
-import { io, Socket } from 'socket.io-client'
-import { useCookies } from '@vueuse/integrations/useCookies'
-import config from '@/config'
-import type { Character, User } from '@/types'
-
-export const useSocketStore: StoreDefinition = defineStore('socket', {
-  state: () => ({
-    token: '' as string | null,
-    connection: null as Socket | null,
-    user: null as User | null,
-    character: null as Character | null
-  }),
-  actions: {
-    initConnection() {
-      this.connection = io(config.server_endpoint, {
-        secure: !config.development,
-        withCredentials: true,
-        transports: ['websocket'],
-        reconnectionAttempts: 5
-      })
-
-      // Let the server know the user is logged in
-      this.connection.emit('login')
-
-      // set user
-      this.connection.on('logged_in', (user: User) => {
-        this.setUser(user)
-      })
-
-      // When we can't reconnect, disconnect
-      this.connection.on('reconnect_failed', () => {
-        this.disconnectSocket()
-      })
-    },
-    disconnectSocket() {
-      if (!this.connection) return
-
-      this.connection.disconnect()
-      this.connection = null
-
-      this.token = null
-      this.user = null
-      this.character = null
-
-      useCookies().remove('token')
-    },
-    setToken(token: string) {
-      this.token = token
-    },
-    setUser(user: User | null) {
-      this.user = user
-    },
-    setCharacter(character: Character | null) {
-      this.character = character
-    }
-  }
-})
-
-/**
- * Resources:
- * https://www.dynetisgames.com/2017/03/06/how-to-make-a-multiplayer-online-game-with-phaser-socket-io-and-node-js/
- * https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
- * https://pinia.vuejs.org/
- */