forked from noxious/client
idk
This commit is contained in:
parent
2211824832
commit
5a03080a0e
74
package-lock.json
generated
74
package-lock.json
generated
@ -99,9 +99,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/compat-data": {
|
||||
"version": "7.25.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz",
|
||||
"integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
|
||||
"integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@ -150,13 +150,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/generator": {
|
||||
"version": "7.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz",
|
||||
"integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.4.tgz",
|
||||
"integrity": "sha512-NFtZmZsyzDPJnk9Zg3BbTfKKc9UlHYzD0E//p2Z3B9nCwwtJW9T0gVbCz8+fBngnn4zf1Dr3IK8PHQQHq0lDQw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.25.0",
|
||||
"@babel/types": "^7.25.4",
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25",
|
||||
"jsesc": "^2.5.1"
|
||||
@ -216,9 +216,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-create-class-features-plugin": {
|
||||
"version": "7.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz",
|
||||
"integrity": "sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
|
||||
"integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -227,7 +227,7 @@
|
||||
"@babel/helper-optimise-call-expression": "^7.24.7",
|
||||
"@babel/helper-replace-supers": "^7.25.0",
|
||||
"@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
|
||||
"@babel/traverse": "^7.25.0",
|
||||
"@babel/traverse": "^7.25.4",
|
||||
"semver": "^6.3.1"
|
||||
},
|
||||
"engines": {
|
||||
@ -500,12 +500,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.25.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
|
||||
"integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
|
||||
"integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.25.2"
|
||||
"@babel/types": "^7.25.4"
|
||||
},
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
@ -594,13 +594,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/plugin-syntax-typescript": {
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz",
|
||||
"integrity": "sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.4.tgz",
|
||||
"integrity": "sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-plugin-utils": "^7.24.7"
|
||||
"@babel/helper-plugin-utils": "^7.24.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@ -630,9 +630,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
|
||||
"integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
|
||||
"integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -658,17 +658,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/traverse": {
|
||||
"version": "7.25.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
|
||||
"integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
|
||||
"integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.24.7",
|
||||
"@babel/generator": "^7.25.0",
|
||||
"@babel/parser": "^7.25.3",
|
||||
"@babel/generator": "^7.25.4",
|
||||
"@babel/parser": "^7.25.4",
|
||||
"@babel/template": "^7.25.0",
|
||||
"@babel/types": "^7.25.2",
|
||||
"@babel/types": "^7.25.4",
|
||||
"debug": "^4.3.1",
|
||||
"globals": "^11.1.0"
|
||||
},
|
||||
@ -687,9 +687,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.25.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
|
||||
"integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
|
||||
"version": "7.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
|
||||
"integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.24.8",
|
||||
@ -4416,9 +4416,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
|
||||
"integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
|
||||
"version": "2.15.1",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
|
||||
"integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -6979,9 +6979,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-inspect": {
|
||||
"version": "0.8.6",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.6.tgz",
|
||||
"integrity": "sha512-iM/smnFRSuDq9UMVAN06fqBbHAofGDtB5yBucsl0QnPCFqQ2TmPIbsSgSR3gUv13qJ8oPE/FFhXlm9g1xX9nzg==",
|
||||
"version": "0.8.7",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.7.tgz",
|
||||
"integrity": "sha512-/XXou3MVc13A5O9/2Nd6xczjrUwt7ZyI9h8pTnUMkr5SshLcb0PJUOVq2V+XVkdeU4njsqAtmK87THZuO2coGA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
<template v-for="item in sortedItems" :key="item.id">
|
||||
<Image
|
||||
v-if="item.type === 'object'"
|
||||
:x="tileToWorldX(zoneTilemap as any, item.position_x, item.position_y)"
|
||||
:y="tileToWorldY(zoneTilemap as any, item.position_x, item.position_y)"
|
||||
:x="tileToWorldX(zoneTilemap as any, item.positionX, item.positionY)"
|
||||
:y="tileToWorldY(zoneTilemap as any, item.positionX, item.positionY)"
|
||||
:texture="item.object.id"
|
||||
:originY="Number(item.object.origin_x)"
|
||||
:originX="Number(item.object.origin_y)"
|
||||
:depth="(item.depth > 0 ? item.depth : undefined)"
|
||||
:originY="Number(item.object.originX)"
|
||||
:originX="Number(item.object.originY)"
|
||||
:depth="item.depth > 0 ? item.depth : undefined"
|
||||
/>
|
||||
<Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
|
||||
</template>
|
||||
@ -51,13 +51,13 @@ const sortedItems = computed(() => {
|
||||
const objects = zoneObjects.value.map((obj) => ({
|
||||
...obj,
|
||||
type: 'object' as const,
|
||||
depth: calculateDepth(obj.position_x, obj.position_y, zoneTilemap.width)
|
||||
depth: calculateDepth(obj.positionX, obj.positionY, zoneTilemap.width)
|
||||
}))
|
||||
|
||||
const characters = zoneStore.characters.map((char) => ({
|
||||
...char,
|
||||
type: 'character' as const,
|
||||
depth: calculateDepth(char.position_x, char.position_y, zoneTilemap.width)
|
||||
depth: calculateDepth(char.positionX, char.positionY, zoneTilemap.width)
|
||||
}))
|
||||
|
||||
return sortByDepth([...objects, ...characters], zoneTilemap.width)
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col">
|
||||
<div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
|
||||
<div v-for="message in chats" class="flex-col py-2 items-center p-3">
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>
|
||||
<p class="text-sm text-gray-50 m-0">{{ message.message }}</p>
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm">{{ message.character.name }}</span>
|
||||
<p class="text-gray-50 m-0">{{ message.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex">
|
||||
|
||||
@ -67,8 +67,8 @@ watch(
|
||||
() => props.character,
|
||||
(newChar, oldChar) => {
|
||||
if (newChar) {
|
||||
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
|
||||
updatePosition(newChar.position_x, newChar.position_y)
|
||||
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
|
||||
updatePosition(newChar.positionX, newChar.positionY)
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -100,7 +100,7 @@ const createText = (text: Phaser.GameObjects.Text) => {
|
||||
|
||||
onMounted(() => {
|
||||
if (props.character) {
|
||||
updatePosition(props.character.position_x, props.character.position_y)
|
||||
updatePosition(props.character.positionX, props.character.positionY)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -80,8 +80,8 @@ if (!selectedObject.value) {
|
||||
if (selectedObject.value) {
|
||||
objectName.value = selectedObject.value.name
|
||||
objectTags.value = selectedObject.value.tags
|
||||
objectOriginX.value = selectedObject.value.origin_x
|
||||
objectOriginY.value = selectedObject.value.origin_y
|
||||
objectOriginX.value = selectedObject.value.originX
|
||||
objectOriginY.value = selectedObject.value.originY
|
||||
objectIsAnimated.value = selectedObject.value.isAnimated
|
||||
objectFrameSpeed.value = selectedObject.value.frameSpeed
|
||||
objectFrameWidth.value = selectedObject.value.frameWidth
|
||||
@ -126,8 +126,8 @@ function saveObject() {
|
||||
id: selectedObject.value.id,
|
||||
name: objectName.value,
|
||||
tags: objectTags.value,
|
||||
origin_x: objectOriginX.value,
|
||||
origin_y: objectOriginY.value,
|
||||
originX: objectOriginX.value,
|
||||
originY: objectOriginY.value,
|
||||
isAnimated: objectIsAnimated.value,
|
||||
frameSpeed: objectFrameSpeed.value,
|
||||
frameWidth: objectFrameWidth.value,
|
||||
@ -147,8 +147,8 @@ watch(selectedObject, (object: Object | null) => {
|
||||
if (!object) return
|
||||
objectName.value = object.name
|
||||
objectTags.value = object.tags
|
||||
objectOriginX.value = object.origin_x
|
||||
objectOriginY.value = object.origin_y
|
||||
objectOriginX.value = object.originX
|
||||
objectOriginY.value = object.originY
|
||||
objectIsAnimated.value = object.isAnimated
|
||||
objectFrameSpeed.value = object.frameSpeed
|
||||
objectFrameWidth.value = object.frameWidth
|
||||
|
||||
@ -30,11 +30,11 @@
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-x">Origin X</label>
|
||||
<input v-model.number="action.origin_x" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
|
||||
<input v-model.number="action.originX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="origin-y">Origin Y</label>
|
||||
<input v-model.number="action.origin_y" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
<input v-model.number="action.originY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="is-animated">Is animated</label>
|
||||
@ -124,8 +124,8 @@ function saveSprite() {
|
||||
return {
|
||||
action: action.action,
|
||||
sprites: action.sprites,
|
||||
origin_x: action.origin_x,
|
||||
origin_y: action.origin_y,
|
||||
originX: action.originX,
|
||||
originY: action.originY,
|
||||
isAnimated: action.isAnimated,
|
||||
isLooping: action.isLooping,
|
||||
frameSpeed: action.frameSpeed,
|
||||
@ -153,8 +153,8 @@ function addNewImage() {
|
||||
sprite: selectedSprite.value,
|
||||
action: 'new_action',
|
||||
sprites: [],
|
||||
origin_x: 0,
|
||||
origin_y: 0,
|
||||
originX: 0,
|
||||
originY: 0,
|
||||
isAnimated: false,
|
||||
isLooping: false,
|
||||
frameSpeed: 0,
|
||||
|
||||
@ -1,284 +1,230 @@
|
||||
<template>
|
||||
<TilemapLayerC :tilemap="zoneTilemap" :tileset="exampleTilesArray as any" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<TilemapLayerC :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
|
||||
<Controls :layer="tiles" />
|
||||
|
||||
<Container :depth="2">
|
||||
<Image
|
||||
:tint="zoneEditorStore.selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff"
|
||||
v-for="object in sortedZoneObjects"
|
||||
:key="object.object.id"
|
||||
:x="tileToWorldX(zoneTilemap as any, object.position_x, object.position_y)"
|
||||
:y="tileToWorldY(zoneTilemap as any, object.position_x, object.position_y)"
|
||||
:texture="object.object.id"
|
||||
:originY="Number(object.object.origin_x)"
|
||||
:originX="Number(object.object.origin_y)"
|
||||
:depth="object.depth > 0 ? object.depth : undefined"
|
||||
@pointerup="() => zoneEditorStore.setSelectedZoneObject(object)"
|
||||
/>
|
||||
<Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)" />
|
||||
</Container>
|
||||
|
||||
<Container :depth="3">
|
||||
<Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap as any, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
|
||||
<Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
|
||||
</Container>
|
||||
|
||||
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
|
||||
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('move btn clicked')" />
|
||||
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" />
|
||||
<Tiles v-if="zoneEditorStore.isTileListModalShown" />
|
||||
<Objects v-if="zoneEditorStore.isObjectListModalShown" />
|
||||
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
|
||||
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
|
||||
<TeleportModal v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport'" />
|
||||
<TeleportModal v-if="shouldShowTeleportModal" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
||||
import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
|
||||
import { computed, onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useGameStore } from '@/stores/game'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import { useAssetStore } from '@/stores/assets'
|
||||
import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
|
||||
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile } from '@/types'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import config from '@/config'
|
||||
|
||||
// Components
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
|
||||
import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue'
|
||||
import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
|
||||
import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
|
||||
import { useAssetStore } from '@/stores/assets'
|
||||
import Objects from '@/components/utilities/zoneEditor/partials/ObjectList.vue'
|
||||
import { type ZoneEventTile, ZoneEventTileType, type ZoneObject } from '@/types'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import TeleportModal from '@/components/utilities/zoneEditor/partials/TeleportModal.vue'
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const assetStore = useAssetStore()
|
||||
|
||||
const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode, objectDepth } = storeToRefs(zoneEditorStore)
|
||||
|
||||
const zoneTilemap = ref(createTilemap())
|
||||
const tiles = ref(createTileLayer())
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
const zoneEventTiles = ref<ZoneEventTile[]>([])
|
||||
const tileArray = ref(createTileArray())
|
||||
|
||||
const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.value.width))
|
||||
const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
|
||||
|
||||
function createTilemap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.zone?.width ?? 10,
|
||||
height: zoneEditorStore.zone?.height ?? 10,
|
||||
width: zone.value?.width ?? 10,
|
||||
height: zone.value?.height ?? 10,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
return new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
}
|
||||
|
||||
const tilesetImages: Tileset[] = []
|
||||
const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
let zoneTiles = [] as string[][]
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
const zoneEventTiles = ref<ZoneEventTile[]>([])
|
||||
function createTileLayer() {
|
||||
const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
|
||||
tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
|
||||
return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y)
|
||||
}
|
||||
|
||||
// Sort zoneObjects by their calculated depth
|
||||
const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.width))
|
||||
function createTileArray() {
|
||||
return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
|
||||
}
|
||||
|
||||
let tileCount = 1
|
||||
toRaw(assetStore.assets).forEach((asset) => {
|
||||
if (asset.group !== 'tiles') return
|
||||
tilesetImages.push(zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
|
||||
})
|
||||
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)
|
||||
function getObjectImageProps(object: ZoneObject) {
|
||||
return {
|
||||
tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
|
||||
x: tileToWorldX(zoneTilemap.value, object.positionX, object.positionY),
|
||||
y: tileToWorldY(zoneTilemap.value, object.positionX, object.positionY),
|
||||
texture: object.object.id,
|
||||
originY: Number(object.object.originX),
|
||||
originX: Number(object.object.originY)
|
||||
}
|
||||
}
|
||||
|
||||
const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
|
||||
const exampleTilesArray = Array.from({ length: zoneEditorStore.zone?.width ?? 0 }, () => Array.from({ length: zoneEditorStore.zone?.height ?? 0 }, () => 'blank_tile'))
|
||||
|
||||
const { objectList } = storeToRefs(zoneEditorStore)
|
||||
|
||||
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 }
|
||||
})
|
||||
})
|
||||
function getEventTileImageProps(tile: ZoneEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(zoneTilemap.value, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(zoneTilemap.value, tile.positionX, tile.positionY),
|
||||
texture: tile.type
|
||||
}
|
||||
}
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.eraserMode === 'tile') {
|
||||
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
|
||||
zoneTiles[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
if (zoneEditorStore.eraserMode === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => {
|
||||
return object.position_x !== tile.x || object.position_y !== tile.y
|
||||
})
|
||||
}
|
||||
|
||||
if (zoneEditorStore.eraserMode === 'blocking tile') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
|
||||
return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
|
||||
})
|
||||
}
|
||||
|
||||
if (zoneEditorStore.eraserMode === 'teleport') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
|
||||
return zoneTileEvent.type !== ZoneEventTileType.TELEPORT || zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
|
||||
})
|
||||
if (eraserMode.value === 'tile') {
|
||||
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, 'blank_tile')
|
||||
tileArray.value[tile.y][tile.x] = 'blank_tile'
|
||||
} else if (eraserMode.value === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
|
||||
} else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
if (zoneEditorStore.selectedTile === null) return
|
||||
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
|
||||
zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
|
||||
if (drawMode.value === 'tile' && selectedTile.value) {
|
||||
placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, selectedTile.value.id)
|
||||
tileArray.value[tile.y][tile.x] = selectedTile.value.id
|
||||
} else if (drawMode.value === 'object' && selectedObject.value) {
|
||||
addZoneObject(tile)
|
||||
} else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') {
|
||||
addZoneEventTile(tile)
|
||||
}
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
if (zoneEditorStore.zone === null) return
|
||||
if (zoneEditorStore.selectedObject === null) return
|
||||
|
||||
zoneObjects.value.push({
|
||||
function addZoneObject(tile: Phaser.Tilemaps.Tile) {
|
||||
const newObject = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
objectId: zoneEditorStore.selectedObject.id,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
depth: zoneEditorStore.objectDepth,
|
||||
position_x: tile.x,
|
||||
position_y: tile.y
|
||||
})
|
||||
|
||||
// remove duplicates based on object, pos x and y
|
||||
zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y))
|
||||
zoneId: zone.value!.id,
|
||||
zone: zone.value!,
|
||||
objectId: selectedObject.value!.id,
|
||||
object: selectedObject.value!,
|
||||
depth: objectDepth.value,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
zoneObjects.value = [...new Set([...zoneObjects.value, newObject])]
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'blocking tile') {
|
||||
if (zoneEditorStore.zone === null) return
|
||||
|
||||
zoneEventTiles.value.push({
|
||||
function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: ZoneEventTileType.BLOCK,
|
||||
position_x: tile.x,
|
||||
position_y: tile.y
|
||||
zoneId: zone.value!.id,
|
||||
zone: zone.value!,
|
||||
type: drawMode.value === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
drawMode.value === 'teleport'
|
||||
? {
|
||||
toZoneId: zoneEditorStore.teleportSettings.toZoneId,
|
||||
toPositionX: zoneEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: zoneEditorStore.teleportSettings.toPositionY
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
zoneEventTiles.value = [...new Set([...zoneEventTiles.value, newEventTile])]
|
||||
}
|
||||
|
||||
function paint() {
|
||||
if (!selectedTile.value) return
|
||||
tileArray.value.forEach((row, y) =>
|
||||
row.forEach((_, x) => {
|
||||
placeTile(zoneTilemap.value, tiles.value, x, y, selectedTile.value!.id)
|
||||
tileArray.value[y][x] = selectedTile.value!.id
|
||||
})
|
||||
|
||||
// remove duplicates based on type, pos x and y
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'teleport') {
|
||||
if (zoneEditorStore.zone === null) return
|
||||
|
||||
zoneEventTiles.value.push({
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: ZoneEventTileType.TELEPORT,
|
||||
position_x: tile.x,
|
||||
position_y: tile.y
|
||||
})
|
||||
|
||||
// remove duplicates based on type, pos x and y
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
|
||||
}
|
||||
}
|
||||
|
||||
function paint(tile: Phaser.Tilemaps.Tile) {
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id)))
|
||||
zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id)))
|
||||
)
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
if (!zone.value) return
|
||||
console.log('update')
|
||||
const data = {
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
name: zoneEditorStore.zone.name,
|
||||
width: zoneEditorStore.zone.width,
|
||||
height: zoneEditorStore.zone.height,
|
||||
tiles: zoneTiles,
|
||||
pvp: zoneEditorStore.zone.pvp,
|
||||
zoneEventTiles: toRaw(zoneEventTiles.value).map((tile) => ({
|
||||
id: tile.id,
|
||||
zoneId: tile.zoneId,
|
||||
type: tile.type,
|
||||
position_x: tile.position_x,
|
||||
position_y: tile.position_y
|
||||
})),
|
||||
zoneObjects: toRaw(zoneObjects.value).map((obj) => ({
|
||||
id: obj.id,
|
||||
zoneId: obj.zoneId,
|
||||
objectId: obj.objectId,
|
||||
depth: obj.depth,
|
||||
position_x: obj.position_x,
|
||||
position_y: obj.position_y
|
||||
}))
|
||||
zoneId: zone.value.id,
|
||||
name: zone.value.name,
|
||||
width: zone.value.width,
|
||||
height: zone.value.height,
|
||||
tiles: tileArray.value,
|
||||
pvp: zone.value.pvp,
|
||||
zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
|
||||
zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:update', data)
|
||||
|
||||
if (zoneEditorStore.isSettingsModalShown) {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
}
|
||||
}
|
||||
|
||||
function clear() {
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
||||
zoneTiles = exampleTilesArray
|
||||
tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
|
||||
tileArray.value = createTileArray()
|
||||
zoneEventTiles.value = []
|
||||
zoneObjects.value = []
|
||||
}
|
||||
|
||||
function updateZoneObjectDepth(depth: number) {
|
||||
zoneObjects.value = zoneObjects.value.map((object) => {
|
||||
if (object.id === zoneEditorStore.selectedZoneObject?.id) {
|
||||
return { ...object, depth }
|
||||
}
|
||||
return object
|
||||
})
|
||||
zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
|
||||
}
|
||||
|
||||
function deleteZoneObject(objectId: string) {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
|
||||
}
|
||||
|
||||
function handleMove() {
|
||||
console.log('move btn clicked')
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
||||
zoneTiles = exampleTilesArray
|
||||
tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
|
||||
|
||||
if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) {
|
||||
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
|
||||
zoneTiles = zoneEditorStore.zone.tiles
|
||||
|
||||
const currentZoneWidth = zoneEditorStore.zone.width ?? 0
|
||||
const currentZoneHeight = zoneEditorStore.zone.height ?? 0
|
||||
|
||||
for (let y = 0; y < currentZoneHeight; y++) {
|
||||
zoneTiles[y] = zoneTiles[y] || []
|
||||
for (let x = 0; x < currentZoneWidth; x++) {
|
||||
zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile'
|
||||
}
|
||||
if (zone.value?.tiles) {
|
||||
setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
|
||||
tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
|
||||
}
|
||||
|
||||
zoneTiles.forEach((row, y) => {
|
||||
row.forEach((tileId, x) => {
|
||||
placeTile(zoneTilemap, tiles, x, y, tileId)
|
||||
})
|
||||
})
|
||||
}
|
||||
zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
|
||||
zoneObjects.value = zone.value?.zoneObjects ?? []
|
||||
|
||||
zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? []
|
||||
zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
|
||||
// Center camera
|
||||
const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
|
||||
const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
zoneEventTiles.value = []
|
||||
zoneObjects.value = []
|
||||
tiles.destroy()
|
||||
zoneTilemap.removeAllLayers()
|
||||
zoneTilemap.destroy()
|
||||
tiles.value.destroy()
|
||||
zoneTilemap.value.removeAllLayers()
|
||||
zoneTilemap.value.destroy()
|
||||
zoneEditorStore.reset()
|
||||
})
|
||||
|
||||
// center camera
|
||||
const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
|
||||
const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isObjectListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="260">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="260">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg">Objects</h3>
|
||||
<div class="flex">
|
||||
|
||||
@ -9,16 +9,16 @@
|
||||
<form method="post" @submit.prevent="" class="inline">
|
||||
<div class="gap-2.5 flex flex-wrap">
|
||||
<div class="form-field-half">
|
||||
<label for="name">X</label>
|
||||
<input class="input-cyan" v-model="x" name="name" id="name" type="number" />
|
||||
<label for="positionX">Position X</label>
|
||||
<input class="input-cyan" v-model="toPositionX" name="positionX" id="positionX" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Y</label>
|
||||
<input class="input-cyan" v-model="y" name="name" id="name" type="number" />
|
||||
<label for="positionY">Position Y</label>
|
||||
<input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="zoneId">Zone to teleport to</label>
|
||||
<select v-model="zoneId" class="input-cyan" name="zoneId" id="zoneId">
|
||||
<label for="toZoneId">Zone to teleport to</label>
|
||||
<select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
|
||||
<option :value="0">Select zone</option>
|
||||
<option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
|
||||
</select>
|
||||
@ -50,31 +50,31 @@ function fetchZones() {
|
||||
})
|
||||
}
|
||||
|
||||
const x = ref(zoneEditorStore.teleportSettings.x)
|
||||
const y = ref(zoneEditorStore.teleportSettings.y)
|
||||
const zoneId = ref(zoneEditorStore.teleportSettings.zoneId)
|
||||
const toPositionX = ref(zoneEditorStore.teleportSettings.toPositionX)
|
||||
const toPositionY = ref(zoneEditorStore.teleportSettings.toPositionY)
|
||||
const toZoneId = ref(zoneEditorStore.teleportSettings.toZoneId)
|
||||
|
||||
watch(zoneId, (value) => {
|
||||
watch(toZoneId, (value) => {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
x: x.value,
|
||||
y: y.value,
|
||||
zoneId: value
|
||||
toPositionX: toPositionX.value,
|
||||
toPositionY: toPositionY.value,
|
||||
toZoneId: value
|
||||
})
|
||||
})
|
||||
|
||||
watch(x, (value) => {
|
||||
watch(toPositionX, (value) => {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
x: value,
|
||||
y: y.value,
|
||||
zoneId: zoneId.value
|
||||
toPositionX: value,
|
||||
toPositionY: toPositionY.value,
|
||||
toZoneId: toZoneId.value
|
||||
})
|
||||
})
|
||||
|
||||
watch(y, (value) => {
|
||||
watch(toPositionY, (value) => {
|
||||
zoneEditorStore.setTeleportSettings({
|
||||
x: x.value,
|
||||
y: value,
|
||||
zoneId: zoneId.value
|
||||
toPositionX: toPositionX.value,
|
||||
toPositionY: value,
|
||||
toZoneId: toZoneId.value
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isTileListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="600">
|
||||
<Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="600">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg">Tiles</h3>
|
||||
<div class="flex">
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handlePencilClick">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
|
||||
{{ zoneEditorStore.drawMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
|
||||
</div>
|
||||
@ -35,10 +35,10 @@
|
||||
|
||||
<div class="w-px bg-cyan"></div>
|
||||
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleEraserClick">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
|
||||
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
|
||||
{{ zoneEditorStore.eraserMode }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
|
||||
</div>
|
||||
@ -120,12 +120,12 @@ function setEraserMode(value: string) {
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function drawTile(pointer: Phaser.Input.Pointer) {
|
||||
function clickTile(pointer: Phaser.Input.Pointer) {
|
||||
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
|
||||
return
|
||||
}
|
||||
|
||||
if (pointer.event.altKey) {
|
||||
if (pointer.event.shiftKey) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -152,10 +152,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
|
||||
|
||||
function drawTiles(pointer: Phaser.Input.Pointer) {
|
||||
if (!pointer.isDown) return
|
||||
drawTile(pointer)
|
||||
clickTile(pointer)
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, drawTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
|
||||
onMounted(() => {
|
||||
@ -163,11 +163,21 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
removeEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
function handlePencilClick() {
|
||||
zoneEditorStore.setTool('pencil')
|
||||
selectPencilOpen.value = !selectPencilOpen.value
|
||||
}
|
||||
|
||||
function handleEraserClick() {
|
||||
zoneEditorStore.setTool('eraser')
|
||||
selectEraserOpen.value = !selectEraserOpen.value
|
||||
}
|
||||
|
||||
// Key bindings
|
||||
function initKeyShortcuts(event: KeyboardEvent) {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
57
src/composables/useGamePointerHandlers.ts
Normal file
57
src/composables/useGamePointerHandlers.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { type Ref } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/services/zone'
|
||||
import { useGameStore } from '@/stores/game'
|
||||
import config from '@/config'
|
||||
|
||||
export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>) {
|
||||
const gameStore = useGameStore()
|
||||
|
||||
function updateWaypoint(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
waypoint.value.visible = !!pointerTile
|
||||
if (pointerTile) {
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value.x = worldPoint.positionX
|
||||
waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
updateWaypoint(pointer)
|
||||
}
|
||||
|
||||
function clickTile(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
if (pointerTile) {
|
||||
gameStore.connection?.emit('character:move', {
|
||||
positionX: pointerTile.x,
|
||||
positionY: pointerTile.y
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
|
||||
if (event instanceof WheelEvent && event.shiftKey) {
|
||||
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
|
||||
camera.value = scene.cameras.main
|
||||
}
|
||||
}
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
const cleanupPointerHandlers = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
return { setupPointerHandlers, cleanupPointerHandlers }
|
||||
}
|
||||
@ -1,88 +1,30 @@
|
||||
import config from '@/config'
|
||||
import { computed, type Ref, watch } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/services/zone'
|
||||
import { useGameStore } from '@/stores/game'
|
||||
import { computed, type Ref } from 'vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import { useGamePointerHandlers } from '@/composables/useGamePointerHandlers'
|
||||
import { useZoneEditorPointerHandlers } from '@/composables/useZoneEditorPointerHandlers'
|
||||
|
||||
export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const isZoneEditorActive = computed(() => zoneEditorStore.active)
|
||||
|
||||
function updateWaypoint(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
|
||||
const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging)
|
||||
|
||||
if (!pointerTile) {
|
||||
waypoint.value.visible = false
|
||||
return
|
||||
}
|
||||
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value = {
|
||||
visible: true,
|
||||
x: worldPoint.position_x,
|
||||
y: worldPoint.position_y + config.tile_size.y + 15
|
||||
}
|
||||
}
|
||||
|
||||
const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
|
||||
|
||||
watch(isMoveTool, (newValue) => {
|
||||
if (newValue) {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
|
||||
const setupPointerHandlers = () => {
|
||||
if (isZoneEditorActive.value) {
|
||||
zoneEditorHandlers.setupPointerHandlers()
|
||||
} else {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
|
||||
}
|
||||
})
|
||||
|
||||
function dragZone(pointer: Phaser.Input.Pointer) {
|
||||
if (!isDragging.value) return
|
||||
const { x, y, prevPosition } = pointer
|
||||
camera.value.scrollX -= (x - prevPosition.x) / camera.value.zoom
|
||||
camera.value.scrollY -= (y - prevPosition.y) / camera.value.zoom
|
||||
}
|
||||
|
||||
function clickTile(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
if (!pointerTile) {
|
||||
return
|
||||
}
|
||||
gameStore.connection?.emit('character:move', { position_x: pointerTile.x, position_y: pointerTile.y })
|
||||
}
|
||||
|
||||
function handleZoom(pointer: Phaser.Input.Pointer, _: unknown, __: unknown, deltaY: number) {
|
||||
if (pointer.event instanceof WheelEvent && pointer.event.altKey) {
|
||||
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
|
||||
camera.value = scene.cameras.main
|
||||
gameHandlers.setupPointerHandlers()
|
||||
}
|
||||
}
|
||||
|
||||
function setupPointerHandlers() {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
|
||||
|
||||
// These are for in-game only, not for in the zone editor
|
||||
if (!zoneEditorStore.active) {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
const cleanupPointerHandlers = () => {
|
||||
if (isZoneEditorActive.value) {
|
||||
zoneEditorHandlers.cleanupPointerHandlers()
|
||||
} else {
|
||||
gameHandlers.cleanupPointerHandlers()
|
||||
}
|
||||
}
|
||||
|
||||
function cleanupPointerHandlers() {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
|
||||
|
||||
// These are for in-game only, not for in the zone editor
|
||||
if (!zoneEditorStore.active) {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
setupPointerHandlers,
|
||||
cleanupPointerHandlers
|
||||
}
|
||||
return { setupPointerHandlers, cleanupPointerHandlers }
|
||||
}
|
||||
|
||||
55
src/composables/useZoneEditorPointerHandlers.ts
Normal file
55
src/composables/useZoneEditorPointerHandlers.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { computed, type Ref, ref } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/services/zone'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import config from '@/config'
|
||||
|
||||
export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Ref<Phaser.Cameras.Scene2D.Camera>, isDragging: Ref<boolean>) {
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
|
||||
|
||||
function updateWaypoint(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
|
||||
waypoint.value.visible = !!pointerTile
|
||||
if (pointerTile) {
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value.x = worldPoint.positionX
|
||||
waypoint.value.y = worldPoint.positionY + config.tile_size.y + 15
|
||||
}
|
||||
}
|
||||
|
||||
function dragZone(pointer: Phaser.Input.Pointer) {
|
||||
if (isDragging.value) {
|
||||
const { x, y, prevPosition } = pointer
|
||||
const { scrollX, scrollY, zoom } = camera.value
|
||||
camera.value.setScroll(scrollX - (x - prevPosition.x) / zoom, scrollY - (y - prevPosition.y) / zoom)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (isMoveTool.value || pointer.event.shiftKey) {
|
||||
dragZone(pointer)
|
||||
}
|
||||
updateWaypoint(pointer)
|
||||
}
|
||||
|
||||
function handleZoom({ event, deltaY }: Phaser.Input.Pointer) {
|
||||
if (event instanceof WheelEvent && event.shiftKey) {
|
||||
scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
|
||||
camera.value = scene.cameras.main
|
||||
}
|
||||
}
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
const cleanupPointerHandlers = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
return { setupPointerHandlers, cleanupPointerHandlers }
|
||||
}
|
||||
@ -12,10 +12,10 @@ export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLaye
|
||||
|
||||
export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) {
|
||||
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
|
||||
const position_x = worldPoint.x + config.tile_size.y
|
||||
const position_y = worldPoint.y
|
||||
const positionX = worldPoint.x + config.tile_size.y
|
||||
const positionY = worldPoint.y
|
||||
|
||||
return { position_x, position_y }
|
||||
return { positionX, positionY }
|
||||
}
|
||||
|
||||
export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
|
||||
@ -86,7 +86,7 @@ export const updateZoneTiles = (zoneTilemap: Tilemap, tiles: Phaser.Tilemaps.Til
|
||||
}
|
||||
|
||||
// Update the tilemap with any new 'blank_tile' entries
|
||||
zoneTiles.forEach((row: string[], y: number) => {
|
||||
zoneTiles.forEach((row: any, y: number) => {
|
||||
row.forEach((tileId, x) => {
|
||||
placeTile(zoneTilemap, tiles, x, y, tileId)
|
||||
})
|
||||
@ -101,12 +101,12 @@ export const calculateDepth = (x: number, y: number, mapWidth: number) => {
|
||||
return y * mapWidth + x
|
||||
}
|
||||
|
||||
export const sortByDepth = <T extends { position_x: number; position_y: number } | { x: number; y: number }>(items: T[], mapWidth: number) => {
|
||||
export const sortByDepth = <T extends { positionX: number; positionY: number } | { x: number; y: number }>(items: T[], mapWidth: number) => {
|
||||
return [...items].sort((a, b) => {
|
||||
const aX = 'position_x' in a ? a.position_x : a.x
|
||||
const aY = 'position_y' in a ? a.position_y : a.y
|
||||
const bX = 'position_x' in b ? b.position_x : b.x
|
||||
const bY = 'position_y' in b ? b.position_y : b.y
|
||||
const aX = 'positionX' in a ? a.positionX : a.x
|
||||
const aY = 'positionY' in a ? a.positionY : a.y
|
||||
const bX = 'positionX' in b ? b.positionX : b.x
|
||||
const bY = 'positionY' in b ? b.positionY : b.y
|
||||
return calculateDepth(aX, aY, mapWidth) - calculateDepth(bX, bY, mapWidth)
|
||||
})
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@ import { useGameStore } from '@/stores/game'
|
||||
import type { Zone, Object, Tile, ZoneObject } from '@/types'
|
||||
|
||||
type TeleportSettings = {
|
||||
x: number
|
||||
y: number
|
||||
zoneId: number
|
||||
toZoneId: number
|
||||
toPositionX: number
|
||||
toPositionY: number
|
||||
}
|
||||
|
||||
export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
@ -28,9 +28,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
isCreateZoneModalShown: false,
|
||||
isSettingsModalShown: false,
|
||||
teleportSettings: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
zoneId: 0
|
||||
toZoneId: 0,
|
||||
toPositionX: 0,
|
||||
toPositionY: 0
|
||||
}
|
||||
}),
|
||||
actions: {
|
||||
|
||||
31
src/types.ts
31
src/types.ts
@ -23,8 +23,8 @@ export type Object = {
|
||||
id: string
|
||||
name: string
|
||||
tags: any | null
|
||||
origin_x: number
|
||||
origin_y: number
|
||||
originX: number
|
||||
originY: number
|
||||
isAnimated: boolean
|
||||
frameSpeed: number
|
||||
frameWidth: number
|
||||
@ -66,8 +66,8 @@ export type ZoneObject = {
|
||||
objectId: string
|
||||
object: Object
|
||||
depth: number
|
||||
position_x: number
|
||||
position_y: number
|
||||
positionX: number
|
||||
positionY: number
|
||||
}
|
||||
|
||||
export enum ZoneEventTileType {
|
||||
@ -82,8 +82,19 @@ export type ZoneEventTile = {
|
||||
zoneId: number
|
||||
zone: Zone
|
||||
type: ZoneEventTileType
|
||||
position_x: number
|
||||
position_y: number
|
||||
positionX: number
|
||||
positionY: number
|
||||
teleport?: ZoneEventTileTeleport
|
||||
}
|
||||
|
||||
export type ZoneEventTileTeleport = {
|
||||
id: string
|
||||
zoneEventTileId: string
|
||||
zoneEventTile: ZoneEventTile
|
||||
toZoneId: number
|
||||
toZone: Zone
|
||||
toPositionX: number
|
||||
toPositionY: number
|
||||
}
|
||||
|
||||
export type User = {
|
||||
@ -128,8 +139,8 @@ export type Character = {
|
||||
level: number
|
||||
experience: number
|
||||
role: string
|
||||
position_x: number
|
||||
position_y: number
|
||||
positionX: number
|
||||
positionY: number
|
||||
rotation: number
|
||||
zoneId: number
|
||||
zone: Zone
|
||||
@ -167,8 +178,8 @@ export type SpriteAction = {
|
||||
sprite: Sprite
|
||||
action: string
|
||||
sprites: string[]
|
||||
origin_x: number
|
||||
origin_y: number
|
||||
originX: number
|
||||
originY: number
|
||||
isAnimated: boolean
|
||||
isLooping: boolean
|
||||
frameWidth: number
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user