Creating and deleting zones now works
This commit is contained in:
parent
a2c39dada1
commit
317906eab5
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="isModalOpenRef"
|
||||
class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
|
||||
:style="modalStyle">
|
||||
<div v-if="isModalOpenRef" class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
|
||||
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
|
||||
<slot name="modalHeader" />
|
||||
<div class="flex gap-2.5">
|
||||
@ -13,9 +11,7 @@
|
||||
</div>
|
||||
<div class="overflow-auto flex-grow">
|
||||
<slot name="modalBody" />
|
||||
<img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize"
|
||||
class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
|
||||
@mousedown="startResize" />
|
||||
<img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]" @mousedown="startResize" />
|
||||
</div>
|
||||
<div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
|
||||
<slot name="modalFooter" />
|
||||
@ -143,20 +139,29 @@ function initializePosition() {
|
||||
y.value = (window.innerHeight - height.value) / 2
|
||||
}
|
||||
|
||||
watch(() => props.isModalOpen, (value) => {
|
||||
isModalOpenRef.value = value
|
||||
if (value) {
|
||||
initializePosition()
|
||||
watch(
|
||||
() => props.isModalOpen,
|
||||
(value) => {
|
||||
isModalOpenRef.value = value
|
||||
if (value) {
|
||||
initializePosition()
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
watch(() => props.modalWidth, (value) => {
|
||||
width.value = Math.min(value, window.innerWidth)
|
||||
})
|
||||
watch(
|
||||
() => props.modalWidth,
|
||||
(value) => {
|
||||
width.value = Math.min(value, window.innerWidth)
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => props.modalHeight, (value) => {
|
||||
height.value = Math.min(value, window.innerHeight)
|
||||
})
|
||||
watch(
|
||||
() => props.modalHeight,
|
||||
(value) => {
|
||||
height.value = Math.min(value, window.innerHeight)
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('mousemove', drag)
|
||||
|
||||
@ -59,9 +59,7 @@ const filteredObjects = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
return assetManagerStore.objectList
|
||||
}
|
||||
return assetManagerStore.objectList.filter(object =>
|
||||
object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -57,9 +57,7 @@ const filteredTiles = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
return assetManagerStore.tileList
|
||||
}
|
||||
return assetManagerStore.tileList.filter(tile =>
|
||||
tile.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
return assetManagerStore.tileList.filter((tile) => tile.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
55
src/components/utilities/zoneEditor/CreateZone.vue
Normal file
55
src/components/utilities/zoneEditor/CreateZone.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0">Create new zone</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-[15px]">
|
||||
<form method="post" @submit.prevent="submit" class="inline">
|
||||
<div class="gap-2.5 flex flex-wrap">
|
||||
<div class="w-full flex flex-col mb-5">
|
||||
<label class="mb-1.5 font-titles" for="name">Name</label>
|
||||
<input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
|
||||
</div>
|
||||
<div class="w-[48%] flex flex-col mb-5">
|
||||
<label class="mb-1.5 font-titles" for="name">Width</label>
|
||||
<input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
|
||||
</div>
|
||||
<div class="w-[48%] flex flex-col mb-5">
|
||||
<label class="mb-1.5 font-titles" for="name">Height</label>
|
||||
<input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
|
||||
</div>
|
||||
<div class="w-full flex flex-col mb-5">
|
||||
<label class="mb-1.5 font-titles" for="name">PVP enabled</label>
|
||||
<input class="input-cyan max-w-[250px]" name="name" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const name = ref('')
|
||||
const width = ref(0)
|
||||
const height = ref(0)
|
||||
|
||||
const submit = () => {
|
||||
socket.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, () => {})
|
||||
|
||||
zoneEditorStore.toggleCreateZoneModal()
|
||||
emit('submit')
|
||||
}
|
||||
</script>
|
||||
@ -74,9 +74,9 @@
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2.5 ml-auto">
|
||||
<button class="btn-cyan px-3.5">Load</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
|
||||
<button class="btn-cyan px-3.5" @click="clear">Clear</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => emit('clear')">Clear</button>
|
||||
<button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -96,7 +96,7 @@ const props = defineProps({
|
||||
layer: Phaser.Tilemaps.TilemapLayer
|
||||
})
|
||||
const scene = useScene()
|
||||
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save'])
|
||||
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
|
||||
|
||||
// track select state
|
||||
let selectPencilOpen = ref(false)
|
||||
@ -147,8 +147,4 @@ onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
})
|
||||
|
||||
function clear() {
|
||||
zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
<Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
|
||||
<Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
|
||||
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
|
||||
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -29,13 +30,13 @@ import { useAssetStore } from '@/stores/assets'
|
||||
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
|
||||
import type { Object } from '@/types'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
|
||||
|
||||
const scene = useScene()
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const assetStore = useAssetStore()
|
||||
|
||||
// Tile tilemap
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.width,
|
||||
height: zoneEditorStore.height,
|
||||
@ -45,16 +46,16 @@ const zoneData = new Phaser.Tilemaps.MapData({
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
const tilesetImages: Tileset[] = []
|
||||
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
|
||||
type ZoneObject = {
|
||||
id: string
|
||||
id: number
|
||||
object: Object
|
||||
position_x: number
|
||||
position_y: number
|
||||
}
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
|
||||
/**
|
||||
* Walk through object and add them to the zone as tilesetImages
|
||||
@ -69,13 +70,6 @@ tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_
|
||||
const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
|
||||
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))
|
||||
|
||||
// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
|
||||
// tileTilemap = generateTilemap(scene, data.width, data.height);
|
||||
// zoneEditorStore.setName(data.name)
|
||||
// zoneEditorStore.setWidth(data.width)
|
||||
// zoneEditorStore.setHeight(data.height)
|
||||
// })
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
|
||||
@ -91,14 +85,13 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
|
||||
// zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
if (zoneEditorStore.selectedObject === null) return
|
||||
zoneObjects.value.push({
|
||||
id: Math.random().toString(10),
|
||||
object: toRaw(zoneEditorStore.selectedObject),
|
||||
id: zoneObjects.value.length + 1,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
|
||||
position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
|
||||
})
|
||||
@ -111,7 +104,7 @@ function paint(tile: Phaser.Tilemaps.Tile) {
|
||||
}
|
||||
|
||||
function save() {
|
||||
socket.connection.emit('gm:zone_editor:zone:save', {
|
||||
socket.connection.emit('gm:zone_editor:zone:update', {
|
||||
zoneId: socket.character.zoneId,
|
||||
name: zoneEditorStore.name,
|
||||
width: zoneEditorStore.width,
|
||||
@ -121,6 +114,13 @@ function save() {
|
||||
})
|
||||
}
|
||||
|
||||
// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
|
||||
// tileTilemap = generateTilemap(scene, data.width, data.height);
|
||||
// zoneEditorStore.setName(data.name)
|
||||
// zoneEditorStore.setWidth(data.width)
|
||||
// zoneEditorStore.setHeight(data.height)
|
||||
// })
|
||||
|
||||
const { objectList } = storeToRefs(zoneEditorStore)
|
||||
|
||||
watch(objectList, (newObjects) => {
|
||||
@ -128,10 +128,7 @@ watch(objectList, (newObjects) => {
|
||||
zoneObjects.value = zoneObjects.value.map((object) => {
|
||||
const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
|
||||
if (!newObject) return object
|
||||
return {
|
||||
...object,
|
||||
object: newObject
|
||||
}
|
||||
return { ...object, object: newObject }
|
||||
})
|
||||
})
|
||||
|
||||
@ -148,9 +145,4 @@ onBeforeUnmount(() => {
|
||||
const centerY = (zone.height * zone.tileHeight) / 2
|
||||
const centerX = (zone.width * zone.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
|
||||
/**
|
||||
* Resources:
|
||||
* https://stackoverflow.com/questions/14488989/drawing-isometric-walls
|
||||
*/
|
||||
</script>
|
||||
|
||||
58
src/components/utilities/zoneEditor/ZoneList.vue
Normal file
58
src/components/utilities/zoneEditor/ZoneList.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<CreateZone @submit="fetchZones" v-if="zoneEditorStore.isCreateZoneModalShown" />
|
||||
|
||||
<Teleport to="body">
|
||||
<Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="200" :modal-height="360">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg">Zones</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="my-[15px] mx-auto">
|
||||
<div class="text-center mb-4 px-2">
|
||||
<button class="btn-cyan py-1.5 min-w-full" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
|
||||
</div>
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zones" :key="zone.id">
|
||||
<div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>
|
||||
<div class="flex items-center">
|
||||
<span>{{ zone.name }}</span>
|
||||
<!-- @TODO : BUG , ml-auto no work -->
|
||||
<span class="ml-auto">
|
||||
<button class="btn-bordeaux py-0.5 px-2.5" @click="() => deleteZone(zone.id)">X</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import type { Zone } from '@/types'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import CreateZone from '@/components/utilities/zoneEditor/CreateZone.vue'
|
||||
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const zones = ref([] as Zone[])
|
||||
|
||||
onMounted(async () => {
|
||||
fetchZones()
|
||||
})
|
||||
|
||||
function fetchZones() {
|
||||
socket.connection.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
|
||||
zones.value = response
|
||||
})
|
||||
}
|
||||
|
||||
function deleteZone(id: number) {
|
||||
socket.connection.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
|
||||
fetchZones()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="370" :is-resizable="false">
|
||||
<Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0">Zone settings</h3>
|
||||
</template>
|
||||
@ -25,6 +25,7 @@
|
||||
<input class="input-cyan max-w-[250px]" name="name" id="name" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,7 +32,11 @@
|
||||
</div>
|
||||
|
||||
<div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
|
||||
<button class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" :disabled="!selected_character" @click="select_character()">
|
||||
<button
|
||||
class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
|
||||
:disabled="!selected_character"
|
||||
@click="select_character()"
|
||||
>
|
||||
PLAY
|
||||
<img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
|
||||
</button>
|
||||
|
||||
@ -4,6 +4,8 @@ import type { Object, ZoneObject } from '@/types'
|
||||
export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
state: () => ({
|
||||
active: true,
|
||||
isZoneListModalShown: false,
|
||||
isCreateZoneModalShown: false,
|
||||
name: '',
|
||||
width: 10,
|
||||
height: 10,
|
||||
@ -21,6 +23,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
toggleActive() {
|
||||
this.active = !this.active
|
||||
},
|
||||
toggleZoneListModal() {
|
||||
this.isZoneListModalShown = !this.isZoneListModalShown
|
||||
this.isCreateZoneModalShown = false
|
||||
},
|
||||
toggleCreateZoneModal() {
|
||||
this.isCreateZoneModalShown = !this.isCreateZoneModalShown
|
||||
},
|
||||
setName(name: string) {
|
||||
this.name = name
|
||||
},
|
||||
|
||||
@ -76,7 +76,6 @@ export type Zone = {
|
||||
width: number
|
||||
height: number
|
||||
tiles: any // Using 'any' for Json type, consider using a more specific type if possible
|
||||
walls: any // Using 'any' for Json type, consider using a more specific type if possible
|
||||
zoneObjects: ZoneObject[]
|
||||
characters: Character[]
|
||||
chats: Chat[]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user