noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Load map data inside a composable instead of Pinia store

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/gameMaster/mapEditor/partials/MapList.vue
View File

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

45
src/components/gameMaster/mapEditor/partials/MapSettings.vue
View File

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

4
src/components/gameMaster/mapEditor/partials/TileList.vue
View File

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

10
src/components/gameMaster/mapEditor/partials/Toolbar.vue
View File

@ -1,7 +1,7 @@
<template>
<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 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')">
<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>
@ -68,13 +68,13 @@
<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 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="() => emit('save')" v-if="mapEditorStore.map">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('save')" v-if="mapEditor.currentMap.value">Save</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>
</div>
</div>
@ -82,10 +82,12 @@
</template>
<script setup lang="ts">
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { onClickOutside } from '@vueuse/core'
import { onBeforeUnmount, onMounted, ref } from 'vue'
const mapEditor = useMapEditorComposable()
const mapEditorStore = useMapEditorStore()
const emit = defineEmits(['save', 'clear'])