From 4e708dbd61365ab865f912a844106f1e66f91688 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 14 Jun 2024 21:17:45 +0200
Subject: [PATCH] zone editor stuff
---
.../utilities/zoneEditor/Toolbar.vue | 46 +++----
.../utilities/zoneEditor/ZoneEditor.vue | 26 ++--
.../utilities/zoneEditor/ZoneSettings.vue | 8 +-
src/types.ts | 112 ++++++++++++------
4 files changed, 107 insertions(+), 85 deletions(-)
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index 15565db..2f02fda 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -10,24 +10,17 @@
<button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
- <select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
- <option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
- <option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
- <option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
- <option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
- <option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
- </select>
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
{{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg"/>
</div>
<div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
- <span class="option" data-value="tile">Tile</span>
- <span class="option" data-value="wall">Wall</span>
- <span class="option" data-value="decoration">Decoration</span>
- <span class="option" data-value="teleport">Teleport</span>
- <span class="option" data-value="blocking_tile">Blocking tile</span>
+ <span class="option" @click="setDrawMode('tile')">Tile</span>
+ <span class="option" @click="setDrawMode('wall')">Wall</span>
+ <span class="option" @click="setDrawMode('decoration')">Decoration</span>
+ <span class="option" @click="setDrawMode('teleport')">Teleport</span>
+ <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
</div>
</button>
@@ -36,24 +29,17 @@
<button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
- <select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
- <option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
- <option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
- <option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
- <option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
- <option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
- </select>
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
{{ zoneEditorStore.drawMode }}
<img src="/assets/icons/zoneEditor/chevron.svg"/>
</div>
<div class="options" v-show="selectEraserOpen">
- <span class="option" data-value="tile">Tile</span>
- <span class="option" data-value="wall">Wall</span>
- <span class="option" data-value="decoration">Decoration</span>
- <span class="option" data-value="teleport">Teleport</span>
- <span class="option" data-value="blocking_tile">Blocking tile</span>
+ <span class="option" @click="setDrawMode('tile')">Tile</span>
+ <span class="option" @click="setDrawMode('wall')">Wall</span>
+ <span class="option" @click="setDrawMode('decoration')">Decoration</span>
+ <span class="option" @click="setDrawMode('teleport')">Teleport</span>
+ <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
</div>
</button>
@@ -94,14 +80,12 @@ const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
let selectPencilOpen = ref(false);
let selectEraserOpen = ref(false);
-
// drawMode
-const drawMode = ref('tile')
-
-// on change of select
-watch(drawMode, (value) => {
+function setDrawMode(value: string) {
zoneEditorStore.setDrawMode(value)
-})
+ selectPencilOpen.value = false
+ selectEraserOpen.value = false
+}
function drawTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil') {
@@ -139,7 +123,7 @@ onBeforeUnmount(() => {
})
function clear() {
- zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.zoneSettings?.width ?? 10 }, () => Array.from({ length: zoneEditorStore.zoneSettings?.height ?? 10 }, () => 0)))
+ zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 0)))
}
</script>
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 808c257..8f1e6b8 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -2,8 +2,8 @@
<TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="layer" />
<Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" />
- <Tiles v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
- <Walls v-if="zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser'" />
+ <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
+ <Walls v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'wall'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
</template>
@@ -28,7 +28,7 @@ let scene = useScene()
const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore()
-let tileMap = generateTilemap(scene, 10, 10);
+let tileMap = generateTilemap(scene, zoneEditorStore.width, zoneEditorStore.height);
let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
@@ -41,25 +41,25 @@ onBeforeMount(() => {
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
})
-const tiles = Array.from({ length: 10 }, () => Array.from({ length: 10 }, () => 0))
+const tiles = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
zoneEditorStore.setTiles(tiles)
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
// Watch for changes in the zoneStore and update the layer
-watch(
- () => zoneEditorStore.tiles,
- () => {
- // @TODO : change to zone for when loading other maps
- zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
- },
- { deep: true }
-)
+// watch(
+// () => zoneEditorStore.tiles,
+// () => {
+// // @TODO : change to zone for when loading other maps
+// zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
+// },
+// { deep: true }
+// )
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)
+ zoneEditorStore.setTiles(data.tilesForPublic)
})
function eraser(tile: Phaser.Tilemaps.Tile) {
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 2b5ca73..0066a8e 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@@ -13,11 +13,11 @@
</div>
<div>
<label for="name">Width</label>
- <input v-model="width" name="name" id="name" />
+ <input v-model="width" name="name" id="name" type="number" />
</div>
<div>
<label for="name">Height</label>
- <input v-model="height" name="name" id="name" />
+ <input v-model="height" name="name" id="name" type="number" />
</div>
<div>
<label for="name">PVP enabled</label>
@@ -45,10 +45,10 @@ watch(name, (value) => {
})
watch(width, (value) => {
- zoneEditorStore.setWidth(value)
+ zoneEditorStore.setWidth(parseInt(value))
})
watch(height, (value) => {
- zoneEditorStore.setHeight(value)
+ zoneEditorStore.setHeight(parseInt(value))
})
</script>
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 273e821..b198686 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,47 +3,85 @@ export type Notification = {
message: string
}
+// User model
export type User = {
- id: number
- username: string
- password: string
- characters: Character[]
-}
+ id: number;
+ username: string;
+ password: string;
+ characters: Character[];
+};
+// Character model
export type Character = {
- id: number
- userId: number
- user: User
- name: string
- hitpoints: number
- mana: number
- level: number
- experience: number
- role: string
- position_x: number
- position_y: number
- rotation: number
- zoneId: number
- zone: Zone
- chats: Chat[]
-}
+ id: number;
+ userId: number;
+ user: User;
+ name: string;
+ hitpoints: number;
+ mana: number;
+ level: number;
+ experience: number;
+ role: string;
+ position_x: number;
+ position_y: number;
+ rotation: number;
+ zoneId: number;
+ zone: Zone;
+ chats: Chat[];
+};
+// Zone model
export type Zone = {
- id: number
- name: string
- width: number
- height: number
- tiles: number[][]
- characters: Character[]
- chats: Chat[]
-}
+ id: number;
+ name: string;
+ width: number;
+ height: number;
+ tiles: ZoneTile[];
+ decorations: ZoneDecoration[];
+ walls: ZoneWall[];
+ characters: Character[];
+ chats: Chat[];
+ createdAt: Date;
+ updatedAt: Date;
+};
+// ZoneTile model
+export type ZoneTile = {
+ id: number;
+ zone: Zone;
+ zoneId: number;
+ x: number;
+ y: number;
+ type: number;
+};
+
+// ZoneDecoration model
+export type ZoneDecoration = {
+ id: number;
+ zone: Zone;
+ zoneId: number;
+ x: number;
+ y: number;
+ type: number;
+};
+
+// ZoneWall model
+export type ZoneWall = {
+ id: number;
+ zone: Zone;
+ zoneId: number;
+ x: number;
+ y: number;
+ type: number;
+};
+
+// Chat model
export type Chat = {
- id: number
- characterId: number
- character: Character
- zoneId: number
- zone: Zone
- message: string
- createdAt: Date
-}
+ id: number;
+ characterId: number;
+ character: Character;
+ zoneId: number;
+ zone: Zone;
+ message: string;
+ createdAt: Date;
+};