67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
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'
|
|
import { useNotificationStore } from '@/stores/notifications'
|
|
|
|
export const useSocketStore: StoreDefinition = defineStore('socket', {
|
|
state: () => ({
|
|
connection: null as Socket | null,
|
|
user: null as User | null,
|
|
character: null as Character | null
|
|
}),
|
|
getters: {
|
|
getConnection: (state: any) => state.connection as Socket,
|
|
getUser: (state: any) => state.user as User,
|
|
getCharacter: (state: any) => state.character as Character
|
|
},
|
|
actions: {
|
|
setupSocketConnection() {
|
|
this.connection = io(config.server_endpoint, {
|
|
withCredentials: true,
|
|
transports: ['websocket'],
|
|
reconnectionAttempts: 5
|
|
})
|
|
|
|
// Let the server know the user is logged in
|
|
this.connection.emit('login')
|
|
|
|
// set user
|
|
this.connection.on('login', (user: User) => {
|
|
this.setUser(user)
|
|
})
|
|
|
|
// When we can't reconnect, disconnect
|
|
this.connection.on('reconnect_failed', () => {
|
|
console.log('Reconnect failed')
|
|
this.disconnectSocket()
|
|
})
|
|
},
|
|
disconnectSocket() {
|
|
if (!this.connection) return
|
|
|
|
this.connection.disconnect()
|
|
this.connection = null
|
|
|
|
this.user = null
|
|
this.character = null
|
|
|
|
useCookies().remove('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/
|
|
*/
|