Load map data inside a composable instead of Pinia store
This commit is contained in:
parent
807bc2066e
commit
7a51323682
6
package-lock.json
generated
6
package-lock.json
generated
@ -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"
|
||||||
},
|
},
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>()
|
||||||
|
@ -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]
|
||||||
}
|
}
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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'])
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
@ -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)
|
||||||
|
@ -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 = ''
|
||||||
|
Loading…
x
Reference in New Issue
Block a user