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

Refactoring of modalShown booleans

Browse Source
This commit is contained in:
Andrei
2025-01-25 23:27:15 -06:00
parent 14aa696197
commit 791830fd6f
23 changed files with 377 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/gameMaster/mapEditor/partials/CreateMap.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="mapEditor.isCreateMapModalShown.value" @modal:close="() => mapEditor.toggleCreateMapModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
</template>
@ -47,6 +47,7 @@ const emit = defineEmits(['create'])
const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage()
const modalRef = useTemplateRef('modalRef')
const name = ref('')
const width = ref(0)
@ -79,6 +80,6 @@ async function submit() {
})
// Close modal
mapEditor.toggleCreateMapModal()
modalRef.value?.close()
}
</script>

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

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="mapEditor.isMapListModalShown.value" @modal:close="() => mapEditor.toggleMapListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
<Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
<template #modalHeader>
<h3 class="text-lg text-white">Maps</h3>
</template>
@ -7,7 +7,7 @@
<div class="my-4 mx-auto h-full">
<div class="text-center mb-4 px-2 flex gap-2.5">
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => mapEditor.toggleCreateMapModal()">New</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => $emit('open-create-map')">New</button>
</div>
<div class="overflow-y-auto h-[calc(100%-20px)]">
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
@ -25,7 +25,7 @@
</template>
</Modal>
<CreateMap @create="fetchMaps" v-if="mapEditor.isMapListModalShown.value" />
<CreateMap @create="fetchMaps" v-if="modalRef?.isModalOpen" />
</template>
<script setup lang="ts">
@ -35,13 +35,21 @@ import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onMounted, ref } from 'vue'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { onMounted, ref, useTemplateRef } from 'vue'
const gameStore = useGameStore()
const mapEditor = useMapEditorComposable()
const mapStorage = new MapStorage()
const mapList = ref<Map[]>([])
const modalRef = useTemplateRef('modalRef')
defineEmits(['open-create-map'])
defineExpose({
open: () => modalRef.value?.open()
})
onMounted(async () => {
await fetchMaps()
@ -55,7 +63,7 @@ function loadMap(id: UUID) {
gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
mapEditor.loadMap(response)
})
mapEditor.toggleMapListModal()
modalRef.value?.close()
}
async function deleteMap(id: UUID) {

9
src/components/gameMaster/mapEditor/partials/MapObjectList.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="mapEditor.isMapObjectListModalShown.value" :modal-width="645" :modal-height="260" @modal:close="() => (mapEditor.isMapObjectListModalShown.value = false)" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="645" :modal-height="260" :bg-style="'none'">
<template #modalHeader>
<h3 class="text-lg text-white">Map objects</h3>
</template>
@ -47,7 +47,7 @@ import Modal from '@/components/utilities/Modal.vue'
import { MapObjectStorage } from '@/storage/storages'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { liveQuery } from 'dexie'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
const mapObjectStorage = new MapObjectStorage()
const isModalOpen = ref(false)
@ -55,6 +55,11 @@ const mapEditor = useMapEditorComposable()
const searchQuery = ref('')
const selectedTags = ref<string[]>([])
const mapObjectList = ref<MapObject[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
})
const uniqueTags = computed(() => {
const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])

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

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="mapEditor.isSettingsModalShown.value" @modal:close="() => mapEditor.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="600" :modal-height="430" :bg-style="'none'">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
</template>
@ -61,6 +61,11 @@ 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 || [])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
})
watch(name, (value) => {
mapEditor.updateProperty('name', value!)

20
src/components/gameMaster/mapEditor/partials/TeleportModal.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :is-modal-open="showTeleportModal" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
<Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
</template>
@ -28,7 +28,7 @@
<label for="toMap">Map to teleport to</label>
<select v-model="toMap" class="input-field" name="toMap" id="toMap">
<option :value="null">Select map</option>
<option v-for="map in mapEditorStore.mapList" :key="map.id" :value="map">{{ map.name }}</option>
<option v-for="map in mapList" :key="map.id" :value="map">{{ map.name }}</option>
</select>
</div>
</div>
@ -43,18 +43,22 @@ import type { Map } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { useGameStore } from '@/stores/gameStore'
import { useMapEditorStore } from '@/stores/mapEditorStore'
import { computed, onMounted, ref, watch } from 'vue'
import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
const showTeleportModal = computed(() => mapEditorStore.tool === 'pencil' && mapEditorStore.drawMode === 'teleport')
const mapEditorStore = useMapEditorStore()
const gameStore = useGameStore()
const mapList = ref<Map[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open(),
})
onMounted(fetchMaps)
function fetchMaps() {
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
mapEditorStore.setMapList(response)
})
gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => { mapList.value = response })
}
const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()
@ -65,7 +69,7 @@ function useRefTeleportSettings() {
toPositionX: ref(settings.toPositionX),
toPositionY: ref(settings.toPositionY),
toRotation: ref(settings.toRotation),
toMap: ref(settings.toMap)
toMap: ref(settings.toMapId)
}
}
@ -76,7 +80,7 @@ function updateTeleportSettings() {
toPositionX: toPositionX.value,
toPositionY: toPositionY.value,
toRotation: toRotation.value,
toMap: toMap.value
toMapId: toMap.value
})
}
</script>

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

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="mapEditor.isTileListModalShown.value" :modal-width="645" :modal-height="600" @modal:close="() => (mapEditor.isTileListModalShown.value = false)" :bg-style="'none'">
<Modal ref="modalRef" :modal-width="645" :modal-height="600" :bg-style="'none'">
<template #modalHeader>
<h3 class="text-lg text-white">Tiles</h3>
</template>
@ -87,7 +87,7 @@ import Modal from '@/components/utilities/Modal.vue'
import { TileStorage } from '@/storage/storages'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { liveQuery } from 'dexie'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
const tileStorage = new TileStorage()
const mapEditor = useMapEditorComposable()
@ -96,6 +96,11 @@ const selectedTags = ref<string[]>([])
const tileCategories = ref<Map<string, string>>(new Map())
const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
const tiles = ref<Tile[]>([])
const modalRef = useTemplateRef('modalRef')
defineExpose({
open: () => modalRef.value?.open()
})
const uniqueTags = computed(() => {
const allTags = tiles.value.flatMap((tile) => tile.tags || [])

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

@ -72,10 +72,10 @@
</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="() => mapEditor.toggleMapListModal()">Load</button>
<button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</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="() => mapEditor.toggleActive()">Exit</button>
<button class="btn-cyan px-3.5" @click="() => emit('close-editor')">Exit</button>
</div>
</div>
</div>
@ -84,11 +84,11 @@
<script setup lang="ts">
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { onClickOutside } from '@vueuse/core'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
const mapEditor = useMapEditorComposable()
const emit = defineEmits(['save', 'clear'])
const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list'])
// track when clicked outside of toolbar items
const toolbar = ref(null)
@ -97,10 +97,15 @@ const toolbar = ref(null)
let selectPencilOpen = ref(false)
let selectEraserOpen = ref(false)
let tileListShown = ref(false)
let mapObjectListShown = ref(false)
defineExpose({tileListShown, mapObjectListShown})
// drawMode
function setDrawMode(value: string) {
mapEditor.isTileListModalShown.value = value === 'tile'
mapEditor.isMapObjectListModalShown.value = value === 'map_object'
if (value === 'tile') emit('open-tile-list')
if (value === 'map_object') emit('open-map-object-list')
mapEditor.setDrawMode(value)
selectPencilOpen.value = false
@ -108,13 +113,13 @@ function setDrawMode(value: string) {
// drawMode
function setEraserMode(value: string) {
mapEditor.setEraserMode(value)
mapEditorStore.setTool('eraser')
selectEraserOpen.value = false
}
function handleClick(tool: string) {
if (tool === 'settings') {
mapEditor.toggleSettingsModal()
emit('open-settings')
} else {
mapEditor.setTool(tool)
}
@ -125,8 +130,7 @@ function handleClick(tool: string) {
function cycleToolMode(tool: 'pencil' | 'eraser') {
const modes = ['tile', 'object', 'teleport', 'blocking tile']
const currentMode = tool === 'pencil' ? mapEditor.drawMode : mapEditor.eraserMode
const currentIndex = modes.indexOf(currentMode.value)
const currentIndex = modes.indexOf(mapEditorStore.drawMode)
const nextIndex = (currentIndex + 1) % modes.length
const nextMode = modes[nextIndex]