client/src/stores/gameStore.ts
2025-02-11 23:17:06 +01:00

137 lines
4.0 KiB
TypeScript

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 { 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: {
date: new Date(),
weatherState: {
rainPercentage: 0,
fogDensity: 0
}
} as WorldSettings,
game: {
isLoading: false,
isLoaded: false, // isLoaded is currently being used to determine if the player has interacted with the game
loadedTextures: [] as string[],
isPlayerDraggingCamera: false,
isCameraFollowingCharacter: false
},
uiSettings: {
isChatOpen: false,
isCharacterProfileOpen: false,
isGmPanelOpen: false
}
}
},
getters: {
isTextureLoaded: (state) => {
return (key: string) => {
return state.game.loadedTextures.includes(key)
}
}
},
actions: {
addNotification(notification: Notification) {
if (!notification.id) {
notification.id = Math.random().toString(16)
}
this.notifications.push(notification)
},
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
},
setCharacter(character: Character | null) {
this.character = character
},
toggleGmPanel() {
this.uiSettings.isGmPanelOpen = !this.uiSettings.isGmPanelOpen
},
setPlayerDraggingCamera(moving: boolean) {
this.game.isPlayerDraggingCamera = moving
},
toggleChat() {
this.uiSettings.isChatOpen = !this.uiSettings.isChatOpen
},
toggleCharacterProfile() {
this.uiSettings.isCharacterProfileOpen = !this.uiSettings.isCharacterProfileOpen
},
initConnection() {
this.connection = io(config.server_endpoint, {
secure: config.environment === 'production',
withCredentials: true,
transports: ['websocket'],
reconnectionAttempts: 5
})
// #99 - If we can't connect, disconnect
this.connection.on('connect_error', () => {
this.disconnectSocket()
})
// Let the server know the user is logged in
this.connection.emit(SocketEvent.LOGIN)
// set user
this.connection.on(SocketEvent.LOGGED_IN, (user: User) => {
this.setUser(user)
})
// When we can't reconnect, disconnect
this.connection.on('reconnect_failed', () => {
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
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
this.game.isLoaded = false
this.game.loadedTextures = []
this.game.isPlayerDraggingCamera = false
this.game.isCameraFollowingCharacter = false
this.uiSettings.isChatOpen = false
this.uiSettings.isCharacterProfileOpen = false
this.uiSettings.isGmPanelOpen = false
this.world.date = new Date()
this.world.weatherState.rainPercentage = 0
this.world.weatherState.fogDensity = 0
}
}
})