imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

idk

Browse Source
This commit is contained in:
Dennis Postma 2024-08-22 20:00:29 +02:00
parent 2211824832
commit 5a03080a0e
19 changed files with 442 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
package-lock.json generated
View File

@ -99,9 +99,9 @@
} }
}, },
"node_modules/@babel/compat-data": { "node_modules/@babel/compat-data": {
"version": "7.25.2", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
"integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==", "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -150,13 +150,13 @@
} }
}, },
"node_modules/@babel/generator": { "node_modules/@babel/generator": {
"version": "7.25.0", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.4.tgz",
"integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==", "integrity": "sha512-NFtZmZsyzDPJnk9Zg3BbTfKKc9UlHYzD0E//p2Z3B9nCwwtJW9T0gVbCz8+fBngnn4zf1Dr3IK8PHQQHq0lDQw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/types": "^7.25.0", "@babel/types": "^7.25.4",
"@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25", "@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^2.5.1" "jsesc": "^2.5.1"
@ -216,9 +216,9 @@
} }
}, },
"node_modules/@babel/helper-create-class-features-plugin": { "node_modules/@babel/helper-create-class-features-plugin": {
"version": "7.25.0", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
"integrity": "sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==", "integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -227,7 +227,7 @@
"@babel/helper-optimise-call-expression": "^7.24.7", "@babel/helper-optimise-call-expression": "^7.24.7",
"@babel/helper-replace-supers": "^7.25.0", "@babel/helper-replace-supers": "^7.25.0",
"@babel/helper-skip-transparent-expression-wrappers": "^7.24.7", "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
"@babel/traverse": "^7.25.0", "@babel/traverse": "^7.25.4",
"semver": "^6.3.1" "semver": "^6.3.1"
}, },
"engines": { "engines": {
@ -500,12 +500,12 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.25.3", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
"integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==", "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/types": "^7.25.2" "@babel/types": "^7.25.4"
}, },
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
@ -594,13 +594,13 @@
} }
}, },
"node_modules/@babel/plugin-syntax-typescript": { "node_modules/@babel/plugin-syntax-typescript": {
"version": "7.24.7", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.4.tgz",
"integrity": "sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==", "integrity": "sha512-uMOCoHVU52BsSWxPOMVv5qKRdeSlPuImUCB2dlPuBSU+W2/ROE7/Zg8F2Kepbk+8yBa68LlRKxO+xgEVWorsDg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/helper-plugin-utils": "^7.24.7" "@babel/helper-plugin-utils": "^7.24.8"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -630,9 +630,9 @@
} }
}, },
"node_modules/@babel/runtime": { "node_modules/@babel/runtime": {
"version": "7.25.0", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz",
"integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==", "integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -658,17 +658,17 @@
} }
}, },
"node_modules/@babel/traverse": { "node_modules/@babel/traverse": {
"version": "7.25.3", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
"integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==", "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/code-frame": "^7.24.7", "@babel/code-frame": "^7.24.7",
"@babel/generator": "^7.25.0", "@babel/generator": "^7.25.4",
"@babel/parser": "^7.25.3", "@babel/parser": "^7.25.4",
"@babel/template": "^7.25.0", "@babel/template": "^7.25.0",
"@babel/types": "^7.25.2", "@babel/types": "^7.25.4",
"debug": "^4.3.1", "debug": "^4.3.1",
"globals": "^11.1.0" "globals": "^11.1.0"
}, },
@ -687,9 +687,9 @@
} }
}, },
"node_modules/@babel/types": { "node_modules/@babel/types": {
"version": "7.25.2", "version": "7.25.4",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
"integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==", "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/helper-string-parser": "^7.24.8", "@babel/helper-string-parser": "^7.24.8",
@ -4416,9 +4416,9 @@
} }
}, },
"node_modules/is-core-module": { "node_modules/is-core-module": {
"version": "2.15.0", "version": "2.15.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
"integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==", "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -6979,9 +6979,9 @@
} }
}, },
"node_modules/vite-plugin-inspect": { "node_modules/vite-plugin-inspect": {
"version": "0.8.6", "version": "0.8.7",
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.6.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.7.tgz",
"integrity": "sha512-iM/smnFRSuDq9UMVAN06fqBbHAofGDtB5yBucsl0QnPCFqQ2TmPIbsSgSR3gUv13qJ8oPE/FFhXlm9g1xX9nzg==", "integrity": "sha512-/XXou3MVc13A5O9/2Nd6xczjrUwt7ZyI9h8pTnUMkr5SshLcb0PJUOVq2V+XVkdeU4njsqAtmK87THZuO2coGA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

14
src/components/World.vue
View File

@ -6,12 +6,12 @@
<template v-for="item in sortedItems" :key="item.id"> <template v-for="item in sortedItems" :key="item.id">
<Image <Image
v-if="item.type === 'object'" v-if="item.type === 'object'"
:x="tileToWorldX(zoneTilemap as any, item.position_x, item.position_y)" :x="tileToWorldX(zoneTilemap as any, item.positionX, item.positionY)"
:y="tileToWorldY(zoneTilemap as any, item.position_x, item.position_y)" :y="tileToWorldY(zoneTilemap as any, item.positionX, item.positionY)"
:texture="item.object.id" :texture="item.object.id"
:originY="Number(item.object.origin_x)" :originY="Number(item.object.originX)"
:originX="Number(item.object.origin_y)" :originX="Number(item.object.originY)"
:depth="(item.depth > 0 ? item.depth : undefined)" :depth="item.depth > 0 ? item.depth : undefined"
/> />
<Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" /> <Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
</template> </template>
@ -51,13 +51,13 @@ const sortedItems = computed(() => {
const objects = zoneObjects.value.map((obj) => ({ const objects = zoneObjects.value.map((obj) => ({
...obj, ...obj,
type: 'object' as const, 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) => ({ const characters = zoneStore.characters.map((char) => ({
...char, ...char,
type: 'character' as const, 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) return sortByDepth([...objects, ...characters], zoneTilemap.width)

4
src/components/gui/Chat.vue
View File

@ -2,8 +2,8 @@
<div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col"> <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 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"> <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> <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm">{{ message.character.name }}</span>
<p class="text-sm text-gray-50 m-0">{{ message.message }}</p> <p class="text-gray-50 m-0">{{ message.message }}</p>
</div> </div>
</div> </div>
<div class="w-full flex"> <div class="w-full flex">

36
src/components/gui/Hud.vue
View File

@ -23,24 +23,24 @@
</div> </div>
<!-- TODO: Replace gameStore.character with other (selected) player's --> <!-- TODO: Replace gameStore.character with other (selected) player's -->
<!-- <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">--> <!-- <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">-->
<!-- <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">--> <!-- <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">-->
<!-- <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />--> <!-- <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>--> <!-- <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>-->
<!-- <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">--> <!-- <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">-->
<!-- <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">--> <!-- <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">-->
<!-- <div class="w-full flex items-center justify-between mb-1.5">--> <!-- <div class="w-full flex items-center justify-between mb-1.5">-->
<!-- <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>--> <!-- <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>-->
<!-- <span class="text-sm">lvl. {{ gameStore.character.level }}</span>--> <!-- <span class="text-sm">lvl. {{ gameStore.character.level }}</span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="w-full flex items-center justify-between">--> <!-- <div class="w-full flex items-center justify-between">-->
<!-- <label class="text-sm" for="hp">HP</label>--> <!-- <label class="text-sm" for="hp">HP</label>-->
<!-- <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>--> <!-- <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

14
src/components/sprites/Character.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<Container v-if="props.character" :x="currentX" :y="currentY"> <Container v-if="props.character" :x="currentX" :y="currentY">
<!-- Start chat bubble --> <!-- Start chat bubble -->
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />--> <!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
<!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />--> <!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
<!-- End chat bubble --> <!-- End chat bubble -->
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" /> <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" /> <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" /> <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
@ -67,8 +67,8 @@ watch(
() => props.character, () => props.character,
(newChar, oldChar) => { (newChar, oldChar) => {
if (newChar) { if (newChar) {
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) { if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
updatePosition(newChar.position_x, newChar.position_y) updatePosition(newChar.positionX, newChar.positionY)
} }
} }
}, },
@ -100,7 +100,7 @@ const createText = (text: Phaser.GameObjects.Text) => {
onMounted(() => { onMounted(() => {
if (props.character) { if (props.character) {
updatePosition(props.character.position_x, props.character.position_y) updatePosition(props.character.positionX, props.character.positionY)
} }
}) })

12
src/components/utilities/assetManager/partials/object/ObjectDetails.vue
View File

@ -80,8 +80,8 @@ if (!selectedObject.value) {
if (selectedObject.value) { if (selectedObject.value) {
objectName.value = selectedObject.value.name objectName.value = selectedObject.value.name
objectTags.value = selectedObject.value.tags objectTags.value = selectedObject.value.tags
objectOriginX.value = selectedObject.value.origin_x objectOriginX.value = selectedObject.value.originX
objectOriginY.value = selectedObject.value.origin_y objectOriginY.value = selectedObject.value.originY
objectIsAnimated.value = selectedObject.value.isAnimated objectIsAnimated.value = selectedObject.value.isAnimated
objectFrameSpeed.value = selectedObject.value.frameSpeed objectFrameSpeed.value = selectedObject.value.frameSpeed
objectFrameWidth.value = selectedObject.value.frameWidth objectFrameWidth.value = selectedObject.value.frameWidth
@ -126,8 +126,8 @@ function saveObject() {
id: selectedObject.value.id, id: selectedObject.value.id,
name: objectName.value, name: objectName.value,
tags: objectTags.value, tags: objectTags.value,
origin_x: objectOriginX.value, originX: objectOriginX.value,
origin_y: objectOriginY.value, originY: objectOriginY.value,
isAnimated: objectIsAnimated.value, isAnimated: objectIsAnimated.value,
frameSpeed: objectFrameSpeed.value, frameSpeed: objectFrameSpeed.value,
frameWidth: objectFrameWidth.value, frameWidth: objectFrameWidth.value,
@ -147,8 +147,8 @@ watch(selectedObject, (object: Object | null) => {
if (!object) return if (!object) return
objectName.value = object.name objectName.value = object.name
objectTags.value = object.tags objectTags.value = object.tags
objectOriginX.value = object.origin_x objectOriginX.value = object.originX
objectOriginY.value = object.origin_y objectOriginY.value = object.originY
objectIsAnimated.value = object.isAnimated objectIsAnimated.value = object.isAnimated
objectFrameSpeed.value = object.frameSpeed objectFrameSpeed.value = object.frameSpeed
objectFrameWidth.value = object.frameWidth objectFrameWidth.value = object.frameWidth

12
src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -30,11 +30,11 @@
</div> </div>
<div class="form-field-half"> <div class="form-field-half">
<label for="origin-x">Origin X</label> <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>
<div class="form-field-half"> <div class="form-field-half">
<label for="origin-y">Origin Y</label> <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>
<div class="form-field-half"> <div class="form-field-half">
<label for="is-animated">Is animated</label> <label for="is-animated">Is animated</label>
@ -124,8 +124,8 @@ function saveSprite() {
return { return {
action: action.action, action: action.action,
sprites: action.sprites, sprites: action.sprites,
origin_x: action.origin_x, originX: action.originX,
origin_y: action.origin_y, originY: action.originY,
isAnimated: action.isAnimated, isAnimated: action.isAnimated,
isLooping: action.isLooping, isLooping: action.isLooping,
frameSpeed: action.frameSpeed, frameSpeed: action.frameSpeed,
@ -153,8 +153,8 @@ function addNewImage() {
sprite: selectedSprite.value, sprite: selectedSprite.value,
action: 'new_action', action: 'new_action',
sprites: [], sprites: [],
origin_x: 0, originX: 0,
origin_y: 0, originY: 0,
isAnimated: false, isAnimated: false,
isLooping: false, isLooping: false,
frameSpeed: 0, frameSpeed: 0,

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

@ -1,284 +1,230 @@
<template> <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" /> <Controls :layer="tiles" />
<Container :depth="2"> <Container :depth="2">
<Image <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)" />
: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)"
/>
</Container> </Container>
<Container :depth="3"> <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> </Container>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" /> <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" /> <Tiles v-if="zoneEditorStore.isTileListModalShown" />
<Objects v-if="zoneEditorStore.isObjectListModalShown" /> <Objects v-if="zoneEditorStore.isObjectListModalShown" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" /> <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" /> <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
<TeleportModal v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport'" /> <TeleportModal v-if="shouldShowTeleportModal" />
</template> </template>
<script setup lang="ts"> <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 { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
import { computed, onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue' import { storeToRefs } from 'pinia'
import Controls from '@/components/utilities/Controls.vue'
import { useGameStore } from '@/stores/game' 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 Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue' import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue'
import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.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 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 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 ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'
import { uuidv4 } from '@/utilities'
import TeleportModal from '@/components/utilities/zoneEditor/partials/TeleportModal.vue' import TeleportModal from '@/components/utilities/zoneEditor/partials/TeleportModal.vue'
import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const scene = useScene() const scene = useScene()
const gameStore = useGameStore() const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore() const assetStore = useAssetStore()
const zoneData = new Phaser.Tilemaps.MapData({ const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode, objectDepth } = storeToRefs(zoneEditorStore)
width: zoneEditorStore.zone?.width ?? 10,
height: zoneEditorStore.zone?.height ?? 10, 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: zone.value?.width ?? 10,
height: zone.value?.height ?? 10,
tileWidth: config.tile_size.x, tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y, tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC, orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const tilesetImages: Tileset[] = []
const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
let zoneTiles = [] as string[][]
const zoneObjects = ref<ZoneObject[]>([])
const zoneEventTiles = ref<ZoneEventTile[]>([])
// Sort zoneObjects by their calculated depth
const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.width))
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)
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 }
}) })
}) return new Phaser.Tilemaps.Tilemap(scene, zoneData)
}
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)
}
function createTileArray() {
return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
}
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)
}
}
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) { function eraser(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.eraserMode === 'tile') { if (eraserMode.value === 'tile') {
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile') placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, 'blank_tile')
zoneTiles[tile.y][tile.x] = '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)
if (zoneEditorStore.eraserMode === 'object') { } else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
zoneObjects.value = zoneObjects.value.filter((object) => { zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
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
})
} }
} }
function pencil(tile: Phaser.Tilemaps.Tile) { function pencil(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') { if (drawMode.value === 'tile' && selectedTile.value) {
if (zoneEditorStore.selectedTile === null) return placeTile(zoneTilemap.value, tiles.value, tile.x, tile.y, selectedTile.value.id)
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id) tileArray.value[tile.y][tile.x] = selectedTile.value.id
zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id } else if (drawMode.value === 'object' && selectedObject.value) {
} addZoneObject(tile)
} else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') {
if (zoneEditorStore.drawMode === 'object') { addZoneEventTile(tile)
if (zoneEditorStore.zone === null) return
if (zoneEditorStore.selectedObject === null) return
zoneObjects.value.push({
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))
}
if (zoneEditorStore.drawMode === 'blocking tile') {
if (zoneEditorStore.zone === null) return
zoneEventTiles.value.push({
id: uuidv4(),
zoneId: zoneEditorStore.zone.id,
zone: zoneEditorStore.zone,
type: ZoneEventTileType.BLOCK,
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))
}
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) { function addZoneObject(tile: Phaser.Tilemaps.Tile) {
if (!zoneEditorStore.selectedTile) return const newObject = {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id))) id: uuidv4(),
zoneTiles.forEach((row, y) => row.forEach((tile, x) => (zoneTiles[y][x] = zoneEditorStore.selectedTile.id))) 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])]
}
function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
const newEventTile = {
id: uuidv4(),
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
})
)
} }
function save() { function save() {
if (!zoneEditorStore.zone) return if (!zone.value) return
console.log('update')
const data = { const data = {
zoneId: zoneEditorStore.zone.id, zoneId: zone.value.id,
name: zoneEditorStore.zone.name, name: zone.value.name,
width: zoneEditorStore.zone.width, width: zone.value.width,
height: zoneEditorStore.zone.height, height: zone.value.height,
tiles: zoneTiles, tiles: tileArray.value,
pvp: zoneEditorStore.zone.pvp, pvp: zone.value.pvp,
zoneEventTiles: toRaw(zoneEventTiles.value).map((tile) => ({ zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
id: tile.id, zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
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
}))
} }
gameStore.connection?.emit('gm:zone_editor:zone:update', data) gameStore.connection?.emit('gm:zone_editor:zone:update', data)
if (zoneEditorStore.isSettingsModalShown) { if (zoneEditorStore.isSettingsModalShown) {
zoneEditorStore.toggleSettingsModal() zoneEditorStore.toggleSettingsModal()
} }
} }
function clear() { function clear() {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
zoneTiles = exampleTilesArray tileArray.value = createTileArray()
zoneEventTiles.value = [] zoneEventTiles.value = []
zoneObjects.value = [] zoneObjects.value = []
} }
function updateZoneObjectDepth(depth: number) { function updateZoneObjectDepth(depth: number) {
zoneObjects.value = zoneObjects.value.map((object) => { zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
if (object.id === zoneEditorStore.selectedZoneObject?.id) {
return { ...object, depth }
}
return object
})
} }
function deleteZoneObject(objectId: string) { function deleteZoneObject(objectId: string) {
zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId) zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
} }
function handleMove() {
console.log('move btn clicked')
}
onBeforeMount(() => { onBeforeMount(() => {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
zoneTiles = exampleTilesArray
if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) { if (zone.value?.tiles) {
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles) setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
zoneTiles = zoneEditorStore.zone.tiles tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
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'
}
} }
zoneTiles.forEach((row, y) => { zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
row.forEach((tileId, x) => { zoneObjects.value = zone.value?.zoneObjects ?? []
placeTile(zoneTilemap, tiles, x, y, tileId)
})
})
}
zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? [] // Center camera
zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? [] 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(() => { onBeforeUnmount(() => {
zoneEventTiles.value = [] zoneEventTiles.value = []
zoneObjects.value = [] zoneObjects.value = []
tiles.destroy() tiles.value.destroy()
zoneTilemap.removeAllLayers() zoneTilemap.value.removeAllLayers()
zoneTilemap.destroy() zoneTilemap.value.destroy()
zoneEditorStore.reset() 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> </script>

10
src/components/utilities/zoneEditor/partials/ObjectList.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Teleport to="body"> <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> <template #modalHeader>
<h3 class="text-lg">Objects</h3> <h3 class="text-lg">Objects</h3>
<div class="flex"> <div class="flex">
@ -9,10 +9,10 @@
<label class="mb-1.5 font-titles hidden" for="search">Search...</label> <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" /> <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
</div> </div>
<!-- <div>--> <!-- <div>-->
<!-- <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>--> <!-- <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
<!-- <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />--> <!-- <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
</template> </template>

42
src/components/utilities/zoneEditor/partials/TeleportModal.vue
View File

@ -9,16 +9,16 @@
<form method="post" @submit.prevent="" class="inline"> <form method="post" @submit.prevent="" class="inline">
<div class="gap-2.5 flex flex-wrap"> <div class="gap-2.5 flex flex-wrap">
<div class="form-field-half"> <div class="form-field-half">
<label for="name">X</label> <label for="positionX">Position X</label>
<input class="input-cyan" v-model="x" name="name" id="name" type="number" /> <input class="input-cyan" v-model="toPositionX" name="positionX" id="positionX" type="number" />
</div> </div>
<div class="form-field-half"> <div class="form-field-half">
<label for="name">Y</label> <label for="positionY">Position Y</label>
<input class="input-cyan" v-model="y" name="name" id="name" type="number" /> <input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
</div> </div>
<div class="form-field-full"> <div class="form-field-full">
<label for="zoneId">Zone to teleport to</label> <label for="toZoneId">Zone to teleport to</label>
<select v-model="zoneId" class="input-cyan" name="zoneId" id="zoneId"> <select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
<option :value="0">Select zone</option> <option :value="0">Select zone</option>
<option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option> <option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
</select> </select>
@ -50,31 +50,31 @@ function fetchZones() {
}) })
} }
const x = ref(zoneEditorStore.teleportSettings.x) const toPositionX = ref(zoneEditorStore.teleportSettings.toPositionX)
const y = ref(zoneEditorStore.teleportSettings.y) const toPositionY = ref(zoneEditorStore.teleportSettings.toPositionY)
const zoneId = ref(zoneEditorStore.teleportSettings.zoneId) const toZoneId = ref(zoneEditorStore.teleportSettings.toZoneId)
watch(zoneId, (value) => { watch(toZoneId, (value) => {
zoneEditorStore.setTeleportSettings({ zoneEditorStore.setTeleportSettings({
x: x.value, toPositionX: toPositionX.value,
y: y.value, toPositionY: toPositionY.value,
zoneId: value toZoneId: value
}) })
}) })
watch(x, (value) => { watch(toPositionX, (value) => {
zoneEditorStore.setTeleportSettings({ zoneEditorStore.setTeleportSettings({
x: value, toPositionX: value,
y: y.value, toPositionY: toPositionY.value,
zoneId: zoneId.value toZoneId: toZoneId.value
}) })
}) })
watch(y, (value) => { watch(toPositionY, (value) => {
zoneEditorStore.setTeleportSettings({ zoneEditorStore.setTeleportSettings({
x: x.value, toPositionX: toPositionX.value,
y: value, toPositionY: value,
zoneId: zoneId.value toZoneId: toZoneId.value
}) })
}) })
</script> </script>

2
src/components/utilities/zoneEditor/partials/TileList.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Teleport to="body"> <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> <template #modalHeader>
<h3 class="text-lg">Tiles</h3> <h3 class="text-lg">Tiles</h3>
<div class="flex"> <div class="flex">

28
src/components/utilities/zoneEditor/partials/Toolbar.vue
View File

@ -8,10 +8,10 @@
<div class="w-px bg-cyan"></div> <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> <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" 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 }} {{ 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" /> <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> </div>
@ -35,10 +35,10 @@
<div class="w-px bg-cyan"></div> <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> <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" 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 }} {{ 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" /> <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> </div>
@ -120,12 +120,12 @@ function setEraserMode(value: string) {
selectEraserOpen.value = false 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') { if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
return return
} }
if (pointer.event.altKey) { if (pointer.event.shiftKey) {
return return
} }
@ -152,10 +152,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
function drawTiles(pointer: Phaser.Input.Pointer) { function drawTiles(pointer: Phaser.Input.Pointer) {
if (!pointer.isDown) return 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) scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
onMounted(() => { onMounted(() => {
@ -163,11 +163,21 @@ onMounted(() => {
}) })
onBeforeUnmount(() => { 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) scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
removeEventListener('keydown', initKeyShortcuts) removeEventListener('keydown', initKeyShortcuts)
}) })
function handlePencilClick() {
zoneEditorStore.setTool('pencil')
selectPencilOpen.value = !selectPencilOpen.value
}
function handleEraserClick() {
zoneEditorStore.setTool('eraser')
selectEraserOpen.value = !selectEraserOpen.value
}
// Key bindings // Key bindings
function initKeyShortcuts(event: KeyboardEvent) { function initKeyShortcuts(event: KeyboardEvent) {
if (!zoneEditorStore.zone) return if (!zoneEditorStore.zone) return

57
src/composables/useGamePointerHandlers.ts Normal file
View 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 }
}

90
src/composables/usePointerHandlers.ts
View File

@ -1,88 +1,30 @@
import config from '@/config' import { computed, type Ref } from 'vue'
import { computed, type Ref, watch } from 'vue'
import { getTile, tileToWorldXY } from '@/services/zone'
import { useGameStore } from '@/stores/game'
import { useZoneEditorStore } from '@/stores/zoneEditor' 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>) { 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 zoneEditorStore = useZoneEditorStore()
const isZoneEditorActive = computed(() => zoneEditorStore.active)
function updateWaypoint(pointer: Phaser.Input.Pointer) { const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y) const zoneEditorHandlers = useZoneEditorPointerHandlers(scene, layer, waypoint, camera, isDragging)
const pointerTile = getTile(px, py, layer)
if (!pointerTile) { const setupPointerHandlers = () => {
waypoint.value.visible = false if (isZoneEditorActive.value) {
return zoneEditorHandlers.setupPointerHandlers()
}
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)
} else { } else {
scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone) gameHandlers.setupPointerHandlers()
}
})
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
} }
} }
function setupPointerHandlers() { const cleanupPointerHandlers = () => {
scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint) if (isZoneEditorActive.value) {
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom) zoneEditorHandlers.cleanupPointerHandlers()
scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone) } else {
gameHandlers.cleanupPointerHandlers()
// These are for in-game only, not for in the zone editor
if (!zoneEditorStore.active) {
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
} }
} }
function cleanupPointerHandlers() { return { setupPointerHandlers, 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
}
} }

55
src/composables/useZoneEditorPointerHandlers.ts Normal file
View 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 }
}

2
src/screens/Game.vue
View File

@ -2,7 +2,7 @@
<div class="flex justify-center items-center h-dvh p-8 relative"> <div class="flex justify-center items-center h-dvh p-8 relative">
<GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" /> <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
<GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" /> <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
<!-- <Inventory />--> <!-- <Inventory />-->
<div v-if="!zoneEditorStore.active"> <div v-if="!zoneEditorStore.active">
<Game :config="gameConfig" @create="createGame"> <Game :config="gameConfig" @create="createGame">

18
src/services/zone.ts
View File

@ -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) { export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
const position_x = worldPoint.x + config.tile_size.y const positionX = worldPoint.x + config.tile_size.y
const position_y = worldPoint.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 { 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 // 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) => { row.forEach((tileId, x) => {
placeTile(zoneTilemap, tiles, x, y, tileId) placeTile(zoneTilemap, tiles, x, y, tileId)
}) })
@ -101,12 +101,12 @@ export const calculateDepth = (x: number, y: number, mapWidth: number) => {
return y * mapWidth + x 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) => { return [...items].sort((a, b) => {
const aX = 'position_x' in a ? a.position_x : a.x const aX = 'positionX' in a ? a.positionX : a.x
const aY = 'position_y' in a ? a.position_y : a.y const aY = 'positionY' in a ? a.positionY : a.y
const bX = 'position_x' in b ? b.position_x : b.x const bX = 'positionX' in b ? b.positionX : b.x
const bY = 'position_y' in b ? b.position_y : b.y const bY = 'positionY' in b ? b.positionY : b.y
return calculateDepth(aX, aY, mapWidth) - calculateDepth(bX, bY, mapWidth) return calculateDepth(aX, aY, mapWidth) - calculateDepth(bX, bY, mapWidth)
}) })
} }

12
src/stores/zoneEditor.ts
View File

@ -3,9 +3,9 @@ import { useGameStore } from '@/stores/game'
import type { Zone, Object, Tile, ZoneObject } from '@/types' import type { Zone, Object, Tile, ZoneObject } from '@/types'
type TeleportSettings = { type TeleportSettings = {
x: number toZoneId: number
y: number toPositionX: number
zoneId: number toPositionY: number
} }
export const useZoneEditorStore = defineStore('zoneEditor', { export const useZoneEditorStore = defineStore('zoneEditor', {
@ -28,9 +28,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
isCreateZoneModalShown: false, isCreateZoneModalShown: false,
isSettingsModalShown: false, isSettingsModalShown: false,
teleportSettings: { teleportSettings: {
x: 0, toZoneId: 0,
y: 0, toPositionX: 0,
zoneId: 0 toPositionY: 0
} }
}), }),
actions: { actions: {

31
src/types.ts
View File

@ -23,8 +23,8 @@ export type Object = {
id: string id: string
name: string name: string
tags: any | null tags: any | null
origin_x: number originX: number
origin_y: number originY: number
isAnimated: boolean isAnimated: boolean
frameSpeed: number frameSpeed: number
frameWidth: number frameWidth: number
@ -66,8 +66,8 @@ export type ZoneObject = {
objectId: string objectId: string
object: Object object: Object
depth: number depth: number
position_x: number positionX: number
position_y: number positionY: number
} }
export enum ZoneEventTileType { export enum ZoneEventTileType {
@ -82,8 +82,19 @@ export type ZoneEventTile = {
zoneId: number zoneId: number
zone: Zone zone: Zone
type: ZoneEventTileType type: ZoneEventTileType
position_x: number positionX: number
position_y: 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 = { export type User = {
@ -128,8 +139,8 @@ export type Character = {
level: number level: number
experience: number experience: number
role: string role: string
position_x: number positionX: number
position_y: number positionY: number
rotation: number rotation: number
zoneId: number zoneId: number
zone: Zone zone: Zone
@ -167,8 +178,8 @@ export type SpriteAction = {
sprite: Sprite sprite: Sprite
action: string action: string
sprites: string[] sprites: string[]
origin_x: number originX: number
origin_y: number originY: number
isAnimated: boolean isAnimated: boolean
isLooping: boolean isLooping: boolean
frameWidth: number frameWidth: number