From b36c8117e78703106d1f53cb43ede48add365aea Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 13 Jun 2024 22:55:29 +0200
Subject: [PATCH] tile editor wip
---
.../utilities/zoneEditor/Toolbar.vue | 4 +--
.../utilities/zoneEditor/ZoneEditor.vue | 12 ++++----
.../utilities/zoneEditor/ZoneSettings.vue | 27 +++++++++++++----
src/stores/zoneEditor.ts | 30 ++++++++++++-------
src/types.ts | 2 +-
5 files changed, 51 insertions(+), 24 deletions(-)
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index da74a9b..87bcb95 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -28,13 +28,13 @@
</select>
</button>
<div class="divider"></div>
- <button @click="() => zoneEditorStore.toggleZoneSettings()">
+ <button @click="() => zoneEditorStore.toggleSettingsModal()">
<img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
</button>
</div>
<div class="buttons">
- <button class="btn-cyan">Save</button>
<button class="btn-cyan">Load</button>
+ <button class="btn-cyan">Save</button>
<button class="btn-cyan" @click="clear">Clear</button>
<button class="btn-cyan" @click="() => zoneEditorStore.toggleActive()">Exit</button>
</div>
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index c01f92b..c142531 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -4,7 +4,7 @@
<Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" />
<Tiles v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
<Walls v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
- <ZoneSettings v-if="zoneEditorStore.zoneSettingsOpen" />
+ <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
</template>
<script setup lang="ts">
@@ -21,6 +21,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import Walls from '@/components/utilities/zoneEditor/Walls.vue'
import { generateTilemap } from '@/services/zone'
+import type { Zone } from '@/types'
// Phavuer logic
let scene = useScene()
@@ -54,10 +55,11 @@ watch(
{ deep: true }
)
-socket.connection.on('gm:zone_editor:zone:load', (data) => {
- tileMap = generateTilemap(scene, data.zone.width, data.zone.height);
- zoneEditorStore.setZoneSettings(data.zone)
- zoneEditorStore.setTiles(data.zone.tiles)
+socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
+ tileMap = generateTilemap(scene, data.width, data.height);
+ zoneEditorStore.setName(data.name)
+ zoneEditorStore.setWidth(data.width)
+ zoneEditorStore.setTiles(data.tiles)
})
function eraser(tile: Phaser.Tilemaps.Tile) {
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 2c21168..c539f8b 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -1,5 +1,5 @@
<template>
- <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleZoneSettings()">
+ <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()">
<template #modalHeader>
<h3 class="modal-title">Zone settings</h3>
</template>
@@ -9,15 +9,15 @@
<div class="form-fields">
<div>
<label for="name">Name</label>
- <input name="name" id="name" />
+ <input v-model="name" name="name" id="name" />
</div>
<div>
<label for="name">Width</label>
- <input name="name" id="name" />
+ <input v-model="width" name="name" id="name" />
</div>
<div>
<label for="name">Height</label>
- <input name="name" id="name" />
+ <input v-model="height" name="name" id="name" />
</div>
<div>
<label for="name">PVP enabled</label>
@@ -30,9 +30,26 @@
</template>
<script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
const zoneEditorStore = useZoneEditorStore()
+
+const name = ref(zoneEditorStore.name)
+const width = ref(zoneEditorStore.width)
+const height = ref(zoneEditorStore.height)
+
+
+watch(name, (value) => {
+ zoneEditorStore.setName(value)
+})
+
+watch(width, (value) => {
+ zoneEditorStore.setWidth(value)
+})
+
+watch(height, (value) => {
+ zoneEditorStore.setHeight(value)
+})
</script>
\ No newline at end of file
diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts
index a638baf..11126d1 100644
--- a/src/stores/zoneEditor.ts
+++ b/src/stores/zoneEditor.ts
@@ -1,23 +1,32 @@
import { defineStore } from 'pinia'
-import config from '@/config'
-import {type Zone} from '@/types'
export const useZoneEditorStore = defineStore('zoneEditor', {
state: () => ({
active: false,
+ name: '',
+ width: 10,
+ height: 10,
tiles: [] as number[][],
tool: 'move',
drawMode: 'tile',
selectedTile: null,
selectedWall: null,
selectedDecoration: null,
- zoneSettings: null as Zone | null,
- zoneSettingsOpen: false
+ isSettingsModalShown: false
}),
actions: {
toggleActive() {
this.active = !this.active
},
+ setName(name: string) {
+ this.name = name
+ },
+ setWidth(width: number) {
+ this.width = width
+ },
+ setHeight(height: number) {
+ this.height = height
+ },
setTiles(tiles: number[][]) {
this.tiles = tiles
},
@@ -36,21 +45,20 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
setSelectedDecoration(decoration: any) {
this.selectedDecoration = decoration
},
- setZoneSettings(zone: Zone) {
- this.zoneSettings = zone
- },
- toggleZoneSettings() {
- this.zoneSettingsOpen = !this.zoneSettingsOpen
+ toggleSettingsModal() {
+ this.isSettingsModalShown = !this.isSettingsModalShown
},
reset() {
+ this.name = ''
+ this.width = 10
+ this.height = 10
this.tiles = []
this.tool = 'move'
this.drawMode = 'tile'
this.selectedTile = null
this.selectedWall = null
this.selectedDecoration = null
- this.zoneSettings = null
- this.zoneSettingsOpen = false
+ this.isSettingsModalShown = false
}
}
})
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 3c6069a..273e821 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -33,7 +33,7 @@ export type Zone = {
name: string
width: number
height: number
- tiles: Record<string, any>
+ tiles: number[][]
characters: Character[]
chats: Chat[]
}