Load map data inside a composable instead of Pinia store

This commit is contained in:
Dennis Postma 2025-01-25 02:38:40 +01:00
parent 807bc2066e
commit 7a51323682
14 changed files with 120 additions and 125 deletions

6
package-lock.json generated
View File

@ -2535,9 +2535,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.87", "version": "1.5.88",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.87.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz",
"integrity": "sha512-mPFwmEWmRivw2F8x3w3l2m6htAUN97Gy0kwpO++2m9iT1Gt8RCFVUfv9U/sIbHJ6rY4P6/ooqFL/eL7ock+pPg==", "integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },

View File

@ -1,6 +1,6 @@
import type { BaseStorage } from '@/storage/baseStorage'
import config from '@/application/config' import config from '@/application/config'
import type { HttpResponse } from '@/application/types' import type { HttpResponse } from '@/application/types'
import type { BaseStorage } from '@/storage/baseStorage'
export function uuidv4() { export function uuidv4() {
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16)) return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
@ -49,4 +49,4 @@ export async function downloadCache<T extends { id: string; updatedAt: Date }>(e
await storage.add(item, overwrite) await storage.add(item, overwrite)
} }
} }

View File

@ -33,7 +33,6 @@ import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
const gameStore = useGameStore() const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore() const assetManagerStore = useAssetManagerStore()
const mapEditorStore = useMapEditorStore()
const selectedTile = computed(() => assetManagerStore.selectedTile) const selectedTile = computed(() => assetManagerStore.selectedTile)
@ -72,10 +71,6 @@ function refreshTileList(unsetSelectedTile = true) {
if (unsetSelectedTile) { if (unsetSelectedTile) {
assetManagerStore.setSelectedTile(null) assetManagerStore.setSelectedTile(null)
} }
if (mapEditorStore.active) {
mapEditorStore.setTileList(response)
}
}) })
} }

View File

@ -9,7 +9,7 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue' import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue' import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
import { useMapEditorStore } from '@/stores/mapEditorStore' import { useMapEditorStore } from '@/stores/mapEditorStore'
import { onUnmounted, shallowRef } from 'vue' import { onMounted, onUnmounted, shallowRef } from 'vue'
const mapEditorStore = useMapEditorStore() const mapEditorStore = useMapEditorStore()
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>() const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()

View File

@ -5,17 +5,19 @@
<script setup lang="ts"> <script setup lang="ts">
import config from '@/application/config' import config from '@/application/config'
import Controls from '@/components/utilities/Controls.vue' import Controls from '@/components/utilities/Controls.vue'
import { createTileArray, getTile, loadAllTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable' import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { TileStorage } from '@/storage/storages' import { TileStorage } from '@/storage/storages'
import { useMapEditorStore } from '@/stores/mapEditorStore' import { useMapEditorStore } from '@/stores/mapEditorStore'
import { useScene } from 'phavuer' import { useScene } from 'phavuer'
import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue' import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset import Tileset = Phaser.Tilemaps.Tileset
const emit = defineEmits(['tileMap:create']) const emit = defineEmits(['tileMap:create'])
const scene = useScene() const scene = useScene()
const mapEditor = useMapEditorComposable()
const mapEditorStore = useMapEditorStore() const mapEditorStore = useMapEditorStore()
const tileStorage = new TileStorage() const tileStorage = new TileStorage()
@ -24,8 +26,8 @@ const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
function createTileMap() { function createTileMap() {
const mapData = new Phaser.Tilemaps.MapData({ const mapData = new Phaser.Tilemaps.MapData({
width: mapEditorStore.map?.width, width: mapEditor.currentMap.value?.width,
height: mapEditorStore.map?.height, height: mapEditor.currentMap.value?.height,
tileWidth: config.tile_size.width, tileWidth: config.tile_size.width,
tileHeight: config.tile_size.height, tileHeight: config.tile_size.height,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
@ -59,7 +61,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return if (!tileMap.value || !tileLayer.value) return
// Check if map is set // Check if map is set
if (!mapEditorStore.map) return if (!mapEditor.currentMap.value) return
// Check if tool is pencil // Check if tool is pencil
if (mapEditorStore.tool !== 'pencil') return if (mapEditorStore.tool !== 'pencil') return
@ -84,14 +86,14 @@ function pencil(pointer: Phaser.Input.Pointer) {
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile) placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
// Adjust mapEditorStore.map.tiles // Adjust mapEditorStore.map.tiles
mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.currentMap.value.tiles[tile.y][tile.x]
} }
function eraser(pointer: Phaser.Input.Pointer) { function eraser(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return if (!tileMap.value || !tileLayer.value) return
// Check if map is set // Check if map is set
if (!mapEditorStore.map) return if (!mapEditor.currentMap.value) return
// Check if tool is pencil // Check if tool is pencil
if (mapEditorStore.tool !== 'eraser') return if (mapEditorStore.tool !== 'eraser') return
@ -116,14 +118,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile') placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
// Adjust mapEditorStore.map.tiles // Adjust mapEditorStore.map.tiles
mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile' mapEditor.currentMap.value.tiles[tile.y][tile.x] = 'blank_tile'
} }
function paint(pointer: Phaser.Input.Pointer) { function paint(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return if (!tileMap.value || !tileLayer.value) return
// Check if map is set // Check if map is set
if (!mapEditorStore.map) return if (!mapEditor.currentMap.value) return
// Check if tool is pencil // Check if tool is pencil
if (mapEditorStore.tool !== 'paint') return if (mapEditorStore.tool !== 'paint') return
@ -144,7 +146,7 @@ function paint(pointer: Phaser.Input.Pointer) {
setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)) setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
// Adjust mapEditorStore.map.tiles // Adjust mapEditorStore.map.tiles
mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile) mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.currentMap.value.tiles)
} }
// When alt is pressed, and the pointer is down, select the tile that the pointer is over // When alt is pressed, and the pointer is down, select the tile that the pointer is over
@ -152,7 +154,7 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
if (!tileMap.value || !tileLayer.value) return if (!tileMap.value || !tileLayer.value) return
// Check if map is set // Check if map is set
if (!mapEditorStore.map) return if (!mapEditor.currentMap.value) return
// Check if tool is pencil // Check if tool is pencil
if (mapEditorStore.tool !== 'pencil') return if (mapEditorStore.tool !== 'pencil') return
@ -174,34 +176,35 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
if (!tile) return if (!tile) return
// Select the tile // Select the tile
mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x]) mapEditorStore.setSelectedMapObject(mapEditor.currentMap.value.tiles[tile.y][tile.x])
} }
watch( watch(
() => mapEditorStore.shouldClearTiles, () => mapEditorStore.shouldClearTiles,
(shouldClear) => { (shouldClear) => {
if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) { if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile') const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
setLayerTiles(tileMap.value, tileLayer.value, blankTiles) setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
mapEditorStore.map.tiles = blankTiles mapEditor.currentMap.value.tiles = blankTiles
mapEditorStore.resetClearTilesFlag() mapEditorStore.resetClearTilesFlag()
} }
} }
) )
onMounted(async () => { onMounted(async () => {
if (!mapEditorStore.map?.tiles) return if (!mapEditor.currentMap.value?.tiles) return
console.log(mapEditor.currentMap.value)
tileMap.value = createTileMap() tileMap.value = createTileMap()
tileLayer.value = await createTileLayer(tileMap.value) tileLayer.value = await createTileLayer(tileMap.value)
// First fill the entire map with blank tiles using current map dimensions // First fill the entire map with blank tiles using current map dimensions
const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile') const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
// Then overlay the map tiles, but only within the current map dimensions // Then overlay the map tiles, but only within the current map dimensions
const mapTiles = mapEditorStore.map.tiles const mapTiles = mapEditor.currentMap.value.tiles
for (let y = 0; y < mapEditorStore.map.height; y++) { for (let y = 0; y < mapEditor.currentMap.value.height; y++) {
for (let x = 0; x < mapEditorStore.map.width; x++) { for (let x = 0; x < mapEditor.currentMap.value.width; x++) {
if (mapTiles[y] && mapTiles[y][x] !== undefined) { if (mapTiles[y] && mapTiles[y][x] !== undefined) {
blankTiles[y][x] = mapTiles[y][x] blankTiles[y][x] = mapTiles[y][x]
} }

View File

@ -32,6 +32,7 @@
import type { Map, UUID } from '@/application/types' import type { Map, UUID } from '@/application/types'
import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue' import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
import Modal from '@/components/utilities/Modal.vue' import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { MapStorage } from '@/storage/storages' import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
import { useMapEditorStore } from '@/stores/mapEditorStore' import { useMapEditorStore } from '@/stores/mapEditorStore'
@ -40,6 +41,7 @@ import { onMounted, ref } from 'vue'
const gameStore = useGameStore() const gameStore = useGameStore()
const mapEditorStore = useMapEditorStore() const mapEditorStore = useMapEditorStore()
const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage() const mapStorage = new MapStorage()
const mapList = ref<Map[]>([]) const mapList = ref<Map[]>([])
@ -52,8 +54,8 @@ async function fetchMaps() {
} }
function loadMap(id: UUID) { function loadMap(id: UUID) {
gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: UUID) => { gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
mapEditorStore.setMapId(response) mapEditor.loadMap(response)
}) })
mapEditorStore.toggleMapListModal() mapEditorStore.toggleMapListModal()
} }

View File

@ -47,60 +47,53 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { UUID } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import Modal from '@/components/utilities/Modal.vue' import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { useMapEditorStore } from '@/stores/mapEditorStore' import { useMapEditorStore } from '@/stores/mapEditorStore'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
const mapEditor = useMapEditorComposable()
const mapEditorStore = useMapEditorStore() const mapEditorStore = useMapEditorStore()
const screen = ref('settings') const screen = ref('settings')
mapEditorStore.setMapName(mapEditorStore.map?.name) const name = ref(mapEditor.currentMap.value?.name)
mapEditorStore.setMapWidth(mapEditorStore.map?.width) const width = ref(mapEditor.currentMap.value?.width)
mapEditorStore.setMapHeight(mapEditorStore.map?.height) const height = ref(mapEditor.currentMap.value?.height)
mapEditorStore.setMapPvp(mapEditorStore.map?.pvp) const pvp = ref(mapEditor.currentMap.value?.pvp)
mapEditorStore.setMapEffects(mapEditorStore.map?.mapEffects) const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
const name = ref(mapEditorStore.mapSettings?.name)
const width = ref(mapEditorStore.mapSettings?.width)
const height = ref(mapEditorStore.mapSettings?.height)
const pvp = ref(mapEditorStore.mapSettings?.pvp)
const mapEffects = ref(mapEditorStore.mapSettings?.mapEffects || [])
watch(name, (value) => { watch(name, (value) => {
mapEditorStore.setMapName(value) mapEditor.updateProperty('name', value!)
}) })
watch(width, (value) => { watch(width, (value) => {
mapEditorStore.setMapWidth(value) mapEditor.updateProperty('width', value!)
}) })
watch(height, (value) => { watch(height, (value) => {
mapEditorStore.setMapHeight(value) mapEditor.updateProperty('height', value!)
}) })
watch(pvp, (value) => { watch(pvp, (value) => {
mapEditorStore.setMapPvp(value) mapEditor.updateProperty('pvp', value!)
}) })
watch( watch(mapEffects, (value) => {
mapEffects, mapEditor.updateProperty('mapEffects', value!)
(value) => { })
mapEditorStore.setMapEffects(value)
},
{ deep: true }
)
const addEffect = () => { const addEffect = () => {
mapEffects.value.push({ mapEffects.value.push({
id: Date.now().toString(), // Simple unique id generation id: uuidv4() as UUID, // Simple unique id generation
mapId: mapEditorStore.map?.id, map: mapEditor.currentMap.value!,
map: mapEditorStore.map,
effect: '', effect: '',
strength: 1 strength: 1
}) })
} }
const removeEffect = (index) => { const removeEffect = (index: number) => {
mapEffects.value.splice(index, 1) mapEffects.value.splice(index, 1)
} }
</script> </script>

View File

@ -228,9 +228,5 @@ function isActiveTile(tile: Tile): boolean {
onMounted(async () => { onMounted(async () => {
isModalOpen.value = true isModalOpen.value = true
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
mapEditorStore.setTileList(response)
response.forEach((tile) => processTile(tile))
})
}) })
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex justify-center p-5"> <div class="flex justify-center p-5">
<div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10"> <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
<div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditorStore.map"> <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'move' }" @click="handleClick('move')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditorStore.tool === 'move' }" @click="handleClick('move')">
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'move' }">(M)</span> <img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditorStore.tool !== 'move' }">(M)</span>
</button> </button>
@ -68,13 +68,13 @@
<div class="w-px bg-cyan"></div> <div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="mapEditorStore.map"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button> <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
</div> </div>
<div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2"> <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">Load</button> <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">Load</button>
<button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditorStore.map">Save</button> <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
<button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditorStore.map">Clear</button> <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
<button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button> <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
</div> </div>
</div> </div>
@ -82,10 +82,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { useMapEditorStore } from '@/stores/mapEditorStore' import { useMapEditorStore } from '@/stores/mapEditorStore'
import { onClickOutside } from '@vueuse/core' import { onClickOutside } from '@vueuse/core'
import { onBeforeUnmount, onMounted, ref } from 'vue' import { onBeforeUnmount, onMounted, ref } from 'vue'
const mapEditor = useMapEditorComposable()
const mapEditorStore = useMapEditorStore() const mapEditorStore = useMapEditorStore()
const emit = defineEmits(['save', 'clear']) const emit = defineEmits(['save', 'clear'])

View File

@ -15,10 +15,10 @@
</template> </template>
<script setup lang="ts" async> <script setup lang="ts" async>
import { downloadCache } from '@/application/utilities'
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages' import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
import { ref } from 'vue' import { ref } from 'vue'
import { downloadCache } from '@/application/utilities'
const gameStore = useGameStore() const gameStore = useGameStore()

View File

@ -4,7 +4,7 @@
<Scene name="main" @preload="preloadScene"> <Scene name="main" @preload="preloadScene">
<div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div> <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
<div v-else> <div v-else>
<Map :key="mapEditorStore.mapId" /> <Map :key="mapEditor.currentMap.value?.id" />
<Toolbar @save="save" @clear="clear" /> <Toolbar @save="save" @clear="clear" />
<MapList /> <MapList />
<TileList /> <TileList />
@ -29,16 +29,19 @@ import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportMo
import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue' import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue' import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
import { loadAllTilesIntoScene } from '@/composables/mapComposable' import { loadAllTilesIntoScene } from '@/composables/mapComposable'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
import { useMapEditorStore } from '@/stores/mapEditorStore' import { useMapEditorStore } from '@/stores/mapEditorStore'
import { Game, Scene } from 'phavuer' import { Game, Scene } from 'phavuer'
import { ref } from 'vue' import { ref, watch } from 'vue'
const mapStorage = new MapStorage()
const mapEditor = useMapEditorComposable()
const gameStore = useGameStore() const gameStore = useGameStore()
const mapEditorStore = useMapEditorStore() const mapEditorStore = useMapEditorStore()
const isLoaded = ref(false) const isLoaded = ref(false)
const currentMap = ref<MapT | null>(null)
const gameConfig = { const gameConfig = {
name: config.name, name: config.name,
@ -75,18 +78,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
} }
function save() { function save() {
if (!mapEditorStore.map) return if (!mapEditor.currentMap.value) return
const data = { const data = {
mapId: mapEditorStore.map.id, mapId: mapEditor.currentMap.value.id,
name: mapEditorStore.mapSettings.name, name: mapEditor.currentMap.value.name,
width: mapEditorStore.mapSettings.width, width: mapEditor.currentMap.value.width,
height: mapEditorStore.mapSettings.height, height: mapEditor.currentMap.value.height,
tiles: mapEditorStore.map.tiles, tiles: mapEditor.currentMap.value.tiles,
pvp: mapEditorStore.map.pvp, pvp: mapEditor.currentMap.value.pvp,
mapEffects: mapEditorStore.map.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [], mapEffects: mapEditor.currentMap.value.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
mapEventTiles: mapEditorStore.map.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [], mapEventTiles: mapEditor.currentMap.value.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? [] placedMapObjects: mapEditor.currentMap.value.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
} }
if (mapEditorStore.isSettingsModalShown) { if (mapEditorStore.isSettingsModalShown) {
@ -94,16 +97,15 @@ function save() {
} }
gameStore.connection?.emit('gm:map:update', data, (response: MapT) => { gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
mapEditorStore.setMap(response) mapStorage.update(response.id, response)
}) })
} }
function clear() { function clear() {
if (!mapEditorStore.map) return if (!mapEditor.currentMap.value) return
// Clear objects, event tiles and tiles // Clear placed objects, event tiles and tiles
mapEditorStore.map.placedMapObjects = [] mapEditor.clearMap()
mapEditorStore.map.mapEventTiles = []
mapEditorStore.triggerClearTiles() mapEditorStore.triggerClearTiles()
} }
</script> </script>

View File

@ -0,0 +1,31 @@
import type { Map } from '@/application/types'
import { ref } from 'vue'
const currentMap = ref<Map | null>(null)
export function useMapEditorComposable() {
const loadMap = (map: Map) => {
currentMap.value = map
}
const updateProperty = <K extends keyof Map>(property: K, value: Map[K]) => {
if (currentMap.value) {
currentMap.value[property] = value
}
}
const clearMap = () => {
if (!currentMap.value) return
currentMap.value.placedMapObjects = []
currentMap.value.mapEventTiles = []
currentMap.value.tiles = []
}
return {
currentMap,
loadMap,
updateProperty,
clearMap
}
}

View File

@ -23,6 +23,14 @@ export class BaseStorage<T extends { id: string }> {
} }
} }
async update(id: string, item: Partial<T>) {
try {
await this.dexie.table(this.tableName).update(id, item)
} catch (error) {
console.error(`Failed to update ${this.tableName} ${id}:`, error)
}
}
async delete(id: string) { async delete(id: string) {
try { try {
await this.dexie.table(this.tableName).delete(id) await this.dexie.table(this.tableName).delete(id)

View File

@ -1,8 +1,8 @@
import type { Map, MapEffect, MapObject, Tile, UUID } from '@/application/types' import type { MapObject } from '@/application/types'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
export type TeleportSettings = { export type TeleportSettings = {
toMap: Map | null toMapId: string
toPositionX: number toPositionX: number
toPositionY: number toPositionY: number
toRotation: number toRotation: number
@ -12,12 +12,9 @@ export const useMapEditorStore = defineStore('mapEditor', {
state: () => { state: () => {
return { return {
active: false, active: false,
mapId: '',
tool: 'move', tool: 'move',
drawMode: 'tile', drawMode: 'tile',
eraserMode: 'tile', eraserMode: 'tile',
tileList: [] as Tile[],
mapObjectList: [] as MapObject[],
selectedTile: '', selectedTile: '',
selectedMapObject: null as MapObject | null, selectedMapObject: null as MapObject | null,
isTileListModalShown: false, isTileListModalShown: false,
@ -26,15 +23,8 @@ export const useMapEditorStore = defineStore('mapEditor', {
isCreateMapModalShown: false, isCreateMapModalShown: false,
isSettingsModalShown: false, isSettingsModalShown: false,
shouldClearTiles: false, shouldClearTiles: false,
mapSettings: {
name: '',
width: 0,
height: 0,
pvp: false,
mapEffects: [] as MapEffect[]
},
teleportSettings: { teleportSettings: {
toMap: null, toMapId: '',
toPositionX: 0, toPositionX: 0,
toPositionY: 0, toPositionY: 0,
toRotation: 0 toRotation: 0
@ -46,24 +36,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
if (this.active) this.reset() if (this.active) this.reset()
this.active = !this.active this.active = !this.active
}, },
setMapId(mapId: UUID) {
this.mapId = mapId
},
setMapName(name: string) {
this.mapSettings.name = name
},
setMapWidth(width: number) {
this.mapSettings.width = width
},
setMapHeight(height: number) {
this.mapSettings.height = height
},
setMapPvp(pvp: boolean) {
this.mapSettings.pvp = pvp
},
setMapEffects(mapEffects: MapEffect[]) {
this.mapSettings.mapEffects = mapEffects
},
setTool(tool: string) { setTool(tool: string) {
this.tool = tool this.tool = tool
}, },
@ -73,12 +45,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
setEraserMode(mode: string) { setEraserMode(mode: string) {
this.eraserMode = mode this.eraserMode = mode
}, },
setTileList(tiles: Tile[]) {
this.tileList = tiles
},
setMapObjectList(objects: MapObject[]) {
this.mapObjectList = objects
},
setSelectedTile(tile: string) { setSelectedTile(tile: string) {
this.selectedTile = tile this.selectedTile = tile
}, },
@ -105,9 +71,6 @@ export const useMapEditorStore = defineStore('mapEditor', {
this.shouldClearTiles = false this.shouldClearTiles = false
}, },
reset() { reset() {
this.mapId = ''
this.tileList = []
this.mapObjectList = []
this.tool = 'move' this.tool = 'move'
this.drawMode = 'tile' this.drawMode = 'tile'
this.selectedTile = '' this.selectedTile = ''