diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
index a67ea67..279c1e9 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@@ -32,14 +32,12 @@ import config from '@/config'
import { useGameStore } from '@/stores/game'
import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
import type { Object } from '@/types'
import { useVirtualList } from '@vueuse/core'
const gameStore = useGameStore()
const objectUploadField = ref(null)
const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
const searchQuery = ref('')
@@ -55,8 +53,6 @@ const handleFileUpload = (e: Event) => {
return
}
- assetStore.fetchAssets()
-
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
})
diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
index e592487..c27d2cd 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@@ -28,13 +28,11 @@ import config from '@/config'
import { useGameStore } from '@/stores/game'
import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
import { useVirtualList } from '@vueuse/core'
import type { Sprite } from '@/types'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
const searchQuery = ref('')
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileList.vue b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
index 6c03e6b..e6f842e 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@@ -32,14 +32,12 @@ import config from '@/config'
import { useGameStore } from '@/stores/game'
import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
import type { Tile } from '@/types'
import { useVirtualList } from '@vueuse/core'
const gameStore = useGameStore()
const tileUploadField = ref(null)
const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
const searchQuery = ref('')
@@ -55,8 +53,6 @@ const handleFileUpload = (e: Event) => {
return
}
- assetStore.fetchAssets()
-
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
})
diff --git a/src/components/gameMaster/zoneEditor/ZoneEditor.vue b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
index 736b5b7..5bdd769 100644
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@@ -29,8 +29,7 @@ import { Container, Image, useScene } from 'phavuer'
import { storeToRefs } from 'pinia'
import { useGameStore } from '@/stores/game'
import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useAssetStore } from '@/stores/assets'
-import { calculateIsometricDepth, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateIsometricDepth, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
import { uuidv4 } from '@/utilities'
import config from '@/config'
@@ -55,7 +54,6 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const scene = useScene()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
-const assetStore = useAssetStore()
const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore)
@@ -81,7 +79,7 @@ function createTilemap() {
}
function createTileLayer() {
- const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }))
+ const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }))
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0, { x: 0, y: -config.tile_size.y }))
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
diff --git a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
index 180d86d..806abb1 100644
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@@ -86,7 +86,7 @@
diff --git a/src/composables/pointerHandlers/useGamePointerHandlers.ts b/src/composables/pointerHandlers/useGamePointerHandlers.ts
index 0328799..20916b6 100644
--- a/src/composables/pointerHandlers/useGamePointerHandlers.ts
+++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts
@@ -1,5 +1,5 @@
import { type Ref } from 'vue'
-import { getTile, tileToWorldXY } from '@/services/zone'
+import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
import { useGameStore } from '@/stores/game'
import config from '@/config'
diff --git a/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts b/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
index ec0bfff..77d4ae6 100644
--- a/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
+++ b/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
@@ -1,5 +1,5 @@
import { computed, type Ref, ref } from 'vue'
-import { getTile, tileToWorldXY } from '@/services/zone'
+import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import config from '@/config'
diff --git a/src/services/zone.ts b/src/composables/zoneComposable.ts
similarity index 77%
rename from src/services/zone.ts
rename to src/composables/zoneComposable.ts
index 9500c76..9ece015 100644
--- a/src/services/zone.ts
+++ b/src/composables/zoneComposable.ts
@@ -2,7 +2,7 @@ import config from '@/config'
import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import Tileset = Phaser.Tilemaps.Tileset
-import { useAssetStore } from '@/stores/assets'
+import { useGameStore } from '@/stores/game'
export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@@ -58,15 +58,21 @@ export const sortByIsometricDepth = {
- const assetStore = useAssetStore()
- assetStore.assets.forEach((asset) => {
- if (asset.group === 'sprite_animations') {
- scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
- } else {
- scene.load.image(asset.key, config.server_endpoint + asset.url)
- }
- })
+export const loadAssets = (scene: Phaser.Scene): Promise => {
+ return new Promise((resolve) => {
+ const gameStore = useGameStore()
- scene.load.start()
+ gameStore.assets.forEach((asset) => {
+ if (asset.group === 'sprite_animations') {
+ scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
+ } else {
+ scene.load.image(asset.key, config.server_endpoint + asset.url)
+ }
+ })
+
+ scene.load.start()
+ scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
+ resolve()
+ })
+ })
}
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 16c6e21..73fd198 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -42,7 +42,6 @@ import { Game, Scene } from 'phavuer'
import { useGameStore } from '@/stores/game'
import { useZoneStore } from '@/stores/zone'
import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useAssetStore } from '@/stores/assets'
import Hud from '@/components/gui/Hud.vue'
import Zone from '@/components/zone/Zone.vue'
import Chat from '@/components/gui/Chat.vue'
@@ -51,12 +50,10 @@ import GmTools from '@/components/gameMaster/GmTools.vue'
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
import GmPanel from '@/components/gameMaster/GmPanel.vue'
import Inventory from '@/components/gui/UserPanel.vue'
-import { loadAssets } from '@/services/zone'
+import { loadAssets } from '@/composables/zoneComposable'
const gameStore = useGameStore()
-const zoneStore = useZoneStore()
const zoneEditorStore = useZoneEditorStore()
-const assetStore = useAssetStore()
const isLoaded = ref(false)
const gameConfig = {
@@ -138,7 +135,7 @@ const createScene = (scene: Phaser.Scene) => {
/**
* Create sprite animations
*/
- assetStore.assets.forEach((asset) => {
+ gameStore.assets.forEach((asset) => {
if (asset.group !== 'sprite_animations') return
scene.anims.create({
key: asset.key,
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index c47b360..17b4e91 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -30,21 +30,19 @@
diff --git a/src/stores/assets.ts b/src/stores/assets.ts
deleted file mode 100644
index 60a3980..0000000
--- a/src/stores/assets.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-import { type Asset } from '@/types'
-import config from '@/config'
-
-export const useAssetStore = defineStore('assets', {
- state: () => ({
- assets: [] as Asset[]
- }),
- actions: {
- setAssets(assets: Asset[]) {
- this.assets = assets
- },
- async fetchAssets() {
- return fetch(config.server_endpoint + '/assets')
- .then((response) => response.json())
- .then((assets) => {
- this.setAssets(assets)
- return true
- })
- .catch((error) => {
- console.error('Error fetching assets:', error)
- return false
- })
- },
- async fetchAssetsByZoneId(zoneId: number) {
- return fetch(config.server_endpoint + '/assets/' + zoneId)
- .then((response) => response.json())
- .then((assets) => {
- this.setAssets(assets)
- return true
- })
- .catch((error) => {
- console.error('Error fetching assets:', error)
- return false
- })
- }
- }
-})
diff --git a/src/stores/game.ts b/src/stores/game.ts
index 98a3750..4ed735c 100644
--- a/src/stores/game.ts
+++ b/src/stores/game.ts
@@ -1,11 +1,13 @@
import { defineStore } from 'pinia'
import { io, Socket } from 'socket.io-client'
-import type { Character, User } from '@/types'
+import type { Asset, Character, Notification, User } from '@/types'
import config from '@/config'
import { useCookies } from '@vueuse/integrations/useCookies'
export const useGameStore = defineStore('game', {
state: () => ({
+ notifications: [] as Notification[],
+ assets: [] as Asset[],
token: '' as string | null,
connection: null as Socket | null,
user: null as User | null,
@@ -15,7 +17,70 @@ export const useGameStore = defineStore('game', {
isChatOpen: false,
isUserPanelOpen: false
}),
+ getters: {
+ getNotifications: (state: any) => state.notifications,
+ getAssetByKey: (state) => {
+ return (key: string) => state.assets.find((asset) => asset.key === 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)
+ },
+ setAssets(assets: Asset[]) {
+ this.assets = assets
+ },
+ addAsset(asset: Asset) {
+ this.assets.push(asset)
+ },
+ addAssets(assets: Asset[]) {
+ this.assets = this.assets.concat(assets)
+ },
+ async fetchSpriteAssets() {
+ return fetch(config.server_endpoint + '/assets/sprites')
+ .then((response) => response.json())
+ .then((assets) => {
+ // Only add the sprites that are not already in the store
+ this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
+ return true
+ })
+ .catch((error) => {
+ console.error('Error fetching assets:', error)
+ return false
+ })
+ },
+ async fetchZoneAssets(zoneId: number) {
+ return fetch(config.server_endpoint + '/assets/zone/' + zoneId)
+ .then((response) => response.json())
+ .then((assets) => {
+ // Only add the zones that are not already in the store
+ this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
+ return true
+ })
+ .catch((error) => {
+ console.error('Error fetching assets:', error)
+ return false
+ })
+ },
+ async fetchAllAssets() {
+ return fetch(config.server_endpoint + '/assets')
+ .then((response) => response.json())
+ .then((assets) => {
+ // Only add the zones that are not already in the store
+ this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
+ return true
+ })
+ .catch((error) => {
+ console.error('Error fetching assets:', error)
+ return false
+ })
+ },
setToken(token: string) {
this.token = token
},
@@ -74,6 +139,7 @@ export const useGameStore = defineStore('game', {
domain: window.location.hostname.split('.').slice(-2).join('.')
})
+ this.assets = []
this.connection = null
this.token = null
this.user = null
diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
deleted file mode 100644
index 4f75e00..0000000
--- a/src/stores/notifications.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { defineStore, type StoreDefinition } from 'pinia'
-import type { Notification } from '@/types'
-
-export const useNotificationStore: StoreDefinition = defineStore('notifications', {
- state: () => ({
- notifications: [] as Notification[]
- }),
- getters: {
- getNotifications: (state: any) => state.notifications
- },
- 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)
- }
- }
-})
diff --git a/src/types.ts b/src/types.ts
index 998a441..55fafe7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,6 @@
export type Notification = {
- id: string
- message: string
+ id?: string
+ message?: string
}
export type Asset = {