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

Creating and deleting zones now works

Browse Source
This commit is contained in:
Dennis Postma
2024-07-07 04:06:59 +02:00
parent a2c39dada1
commit 317906eab5
11 changed files with 175 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/utilities/zoneEditor/CreateZone.vue Normal file
View 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>

10
src/components/utilities/zoneEditor/Toolbar.vue
View File

@ -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>

40
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -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
View 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>

3
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -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>