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

Merge remote-tracking branch 'origin/feature/refactor-zone-editor'

Browse Source 
# Conflicts:
#	src/components/gui/Keybindings.vue
#	src/components/gui/Minimap.vue
This commit is contained in:
Dennis Postma 2024-10-18 00:21:03 +02:00
commit d68ee120ab
28 changed files with 371 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <meta name="viewport" content="width=device-width">
<title>Sylvan Quest - Play</title> <title>Sylvan Quest - Play</title>
</head> </head>
<body> <body>

24
package-lock.json generated
View File

@ -1991,9 +1991,9 @@
} }
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.16.11", "version": "20.16.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.12.tgz",
"integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==", "integrity": "sha512-LfPFB0zOeCeCNQV3i+67rcoVvoN5n0NVuR2vLG0O5ySQMgchuZlC4lgz546ZOJyDtj5KIgOxy+lacOimfqZAIA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -3642,9 +3642,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.39", "version": "1.5.41",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.39.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.41.tgz",
"integrity": "sha512-4xkpSR6CjuiaNyvwiWDI85N9AxsvbPawB8xc7yzLPonYTuP19BVgYweKyUMFtHEZgIcHWMt1ks5Cqx2m+6/Grg==", "integrity": "sha512-dfdv/2xNjX0P8Vzme4cfzHqnPm5xsZXwsolTYr0eyW18IUmNyG08vL+fttvinTfhKfIKdRoqkDIC9e9iWQCNYQ==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -5798,9 +5798,9 @@
} }
}, },
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.1.0", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"license": "ISC" "license": "ISC"
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
@ -6409,9 +6409,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.79.5", "version": "1.80.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.1.tgz",
"integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==", "integrity": "sha512-9lBwDZ7j3y/1DKj5Ec249EVGo5CVpwnzIyIj+cqlCjKkApLnzsJ/l9SnV4YnORvW9dQwQN+gQvh/mFZ8CnDs7Q==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

2
src/App.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<div class="overflow-hidden">
<Notifications /> <Notifications />
<component :is="currentScreen" /> <component :is="currentScreen" />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

2
src/assets/scss/main.scss
View File

@ -12,7 +12,7 @@
//Globals //Globals
body { body {
@apply bg-black m-0 select-none overscroll-none overflow-hidden; @apply bg-black m-0 select-none;
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;

9
src/components/Effects.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
</Scene>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -12,6 +11,8 @@ import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
const gameStore = useGameStore() const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
// See if there's a dat
const sceneRef = ref<Phaser.Scene | null>(null) const sceneRef = ref<Phaser.Scene | null>(null)
// Effect-related refs // Effect-related refs
@ -48,7 +49,7 @@ const createDayNightCycle = (scene: Phaser.Scene) => {
const updateDayNightCycle = (time: number) => { const updateDayNightCycle = (time: number) => {
if (!dayNightCycle.value) return if (!dayNightCycle.value) return
const darkness = Math.sin((time % dayNightDuration) / dayNightDuration * Math.PI) * maxDarkness const darkness = Math.sin(((time % dayNightDuration) / dayNightDuration) * Math.PI) * maxDarkness
dayNightCycle.value.clear() dayNightCycle.value.clear()
dayNightCycle.value.fillStyle(0x000000, darkness) dayNightCycle.value.fillStyle(0x000000, darkness)
dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight) dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
@ -85,7 +86,7 @@ const createFogEffect = (scene: Phaser.Scene) => {
const updateFogEffect = () => { const updateFogEffect = () => {
if (fogSprite.value) { if (fogSprite.value) {
// Example: Oscillate fog opacity // Example: Oscillate fog opacity
const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3 const fogOpacity = ((Math.sin(Date.now() / 5000) + 1) / 2) * 0.3
fogSprite.value.setAlpha(fogOpacity) fogSprite.value.setAlpha(fogOpacity)
} }
} }

2
src/components/gameMaster/GmTools.vue
View File

@ -20,7 +20,7 @@ import { onMounted, ref } from 'vue'
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const gameStore = useGameStore() const gameStore = useGameStore()
const modalWidth = ref(200) const modalWidth = ref(200)
const modalHeight = ref(180) const modalHeight = ref(170)
let posXY = ref({ x: 0, y: 0 }) let posXY = ref({ x: 0, y: 0 })

14
src/components/gameMaster/zoneEditor/EventTiles.vue Normal file
View File

@ -0,0 +1,14 @@
<template></template>
<script setup lang="ts">
import type { ZoneEventTile } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
// function getEventTileImageProps(tile: ZoneEventTile) {
// return {
// x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY),
// y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
// texture: tile.type
// }
// }
</script>

126
src/components/gameMaster/zoneEditor/Objects.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" />
<Image
v-for="object in zoneEditorStore.zone?.zoneObjects"
v-bind="getObjectImageProps(object)"
@pointerup="() => selectedZoneObject = object"
/>
</template>
<script setup lang="ts">
import { uuidv4 } from '@/utilities'
import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { Image, useScene } from 'phavuer'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import type { ZoneObject } from '@/types'
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
const scene = useScene()
const zoneEditorStore = useZoneEditorStore()
const selectedZoneObject = ref<ZoneObject | null>(null)
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
}>()
function getObjectImageProps(object: ZoneObject) {
return {
// alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
flipX: object.isRotated,
texture: object.object.id,
originY: Number(object.object.originX),
originX: Number(object.object.originY)
}
}
function addZoneObject(pointer: Phaser.Input.Pointer) {
if (!zoneEditorStore.zone) return
// Check if tool is pencil
if (zoneEditorStore.tool !== 'pencil') return
// Check if draw mode is object
if (zoneEditorStore.drawMode !== 'object') return
// Check if left mouse button is pressed
if (!pointer.isDown) return
// Check if there is a tile @TODO chekc if props.tilemap words
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if there is a selected object
if (!zoneEditorStore.selectedObject) return
// Check if object already exists on position
const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
if (existingObject) return
const newObject = {
id: uuidv4(),
zoneId: zoneEditorStore.zone.id,
zone: zoneEditorStore.zone,
object: zoneEditorStore.selectedObject,
depth: 0,
isRotated: false,
positionX: tile.x,
positionY: tile.y
}
// Add new object to zoneObjects
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
}
onBeforeMount(() => {
scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
})
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
})
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
watch(
zoneEditorStore.objectList,
(newObjects) => {
// Check if zoneEditorStore.zone is set
if (!zoneEditorStore.zone) return
// Update zoneObjects
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
if (updatedObject) {
return {
...zoneObject,
object: {
...zoneObject.object,
originX: updatedObject.originX,
originY: updatedObject.originY
}
}
}
return zoneObject
})
// Update selectedObject if it's set
if (zoneEditorStore.selectedObject) {
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
if (updatedObject) {
zoneEditorStore.setSelectedObject({
...zoneEditorStore.selectedObject,
originX: updatedObject.originX,
originY: updatedObject.originY
})
}
}
},
{ deep: true }
)
</script>

91
src/components/gameMaster/zoneEditor/Tiles.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<Controls :layer="tiles" :depth="0" />
</template>
<script setup lang="ts">
import config from '@/config'
import { useScene } from 'phavuer'
import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { onBeforeMount, onBeforeUnmount } from 'vue'
import { getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
import Controls from '@/components/utilities/Controls.vue'
const emit = defineEmits(['tilemap:create'])
const scene = useScene()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
let tileArray = createTileArray()
function createTilemap() {
const zoneData = new Phaser.Tilemaps.MapData({
width: zoneEditorStore.zone?.width,
height: zoneEditorStore.zone?.height,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
emit('tilemap:create', tilemap)
return tilemap
}
function createTileLayer() {
const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
layer.setCullPadding(2, 2)
return layer
}
function createTileArray() {
return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
}
function handleTileClick(pointer: Phaser.Input.Pointer) {
// Check if tool is pencil
if (zoneEditorStore.tool !== 'pencil') return
// Check if draw mode is tile
if (zoneEditorStore.drawMode !== 'tile') return
// Check if left mouse button is pressed
if (!pointer.isDown) return
// Check if there is a tile
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
if (!tile) return
// Check if there is a selected tile
if (!zoneEditorStore.selectedTile) return
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
}
onBeforeMount(() => {
if (!zoneEditorStore.zone?.tiles) {
return
}
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
tileArray = zoneEditorStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
})
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
zoneTilemap.destroyLayer('tiles')
zoneTilemap.removeAllLayers()
zoneTilemap.destroy()
})
</script>

333
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -1,229 +1,56 @@
<template> <template>
<Toolbar :layer="tiles" @eraser="eraser" @move="move" @pencil="pencil" @paint="paint" @clear="clear" @save="save" /> <Tiles @tilemap:create="tileMap = $event" />
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" /> <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<EventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
<template v-if="zoneEditorStore.zone"> <Toolbar @save="save" />
<Controls :layer="tiles as TilemapLayer" />
<Tiles /> <ZoneList />
<Objects /> <TileList />
<ObjectList />
<ZoneSettings /> <ZoneSettings />
<TeleportModal v-if="shouldShowTeleportModal" /> <TeleportModal />
<Container :depth="2">
<Image v-for="object in zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" :flipX="object.isRotated" />
</Container>
<Container :depth="3">
<Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
</Container>
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" @rotate="handleRotate" />
</template>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue' import { onBeforeMount, onUnmounted, ref } from 'vue'
import { Container, Image, useScene } from 'phavuer' import { useScene } from 'phavuer'
import { storeToRefs } from 'pinia'
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore' import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { import { loadAssets } from '@/composables/zoneComposable'
calculateIsometricDepth, import { type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
getTile,
loadAssets,
placeTile,
setAllTiles,
sortByIsometricDepth,
tileToWorldX,
tileToWorldY
} from '@/composables/zoneComposable'
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
import { uuidv4 } from '@/utilities'
import config from '@/config'
// Components // Components
import Controls from '@/components/utilities/Controls.vue'
import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue' import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
import Tiles from '@/components/gameMaster/zoneEditor/partials/TileList.vue' import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue' import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue' import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
import Objects from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue' import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue' import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
import Tilemap = Phaser.Tilemaps.Tilemap import Tiles from '@/components/gameMaster/zoneEditor/Tiles.vue'
import TilemapLayer = Phaser.Tilemaps.TilemapLayer import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
import InputManager = Phaser.Input.InputManager import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.vue'
import MouseManager = Phaser.Input.Mouse.MouseManager
/**
* @TODO:
* Clean all the code in this file
*/
const scene = useScene() const scene = useScene()
const gameStore = useGameStore() const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore) const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
const tileArray = ref<string[][]>([])
const movingZoneObject = ref<ZoneObject|null>(null);
const zoneTilemap = createTilemap()
const tiles = createTileLayer()
const zoneObjects = ref<ZoneObject[]>([]) const zoneObjects = ref<ZoneObject[]>([])
const zoneEventTiles = ref<ZoneEventTile[]>([]) const zoneEventTiles = ref<ZoneEventTile[]>([])
let tileArray = createTileArray()
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,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
return tilemap
}
function createTileLayer() {
const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
layer.setDepth(0)
return layer
}
function createTileArray() {
return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
}
function getObjectImageProps(object: ZoneObject) {
return {
alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
x: tileToWorldX(zoneTilemap as any, object.positionX, object.positionY),
y: tileToWorldY(zoneTilemap as any, 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 as any, tile.positionX, tile.positionY),
y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
texture: tile.type
}
}
function eraser(tile: Phaser.Tilemaps.Tile) {
if (eraserMode.value === 'tile') {
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, 'blank_tile')
tileArray[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 move(_tile: Phaser.Tilemaps.Tile) {
movingZoneObject.value = null;
}
function pencil(tile: Phaser.Tilemaps.Tile) {
if (drawMode.value === 'tile' && selectedTile.value) {
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, selectedTile.value.id)
tileArray[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)
}
}
function addZoneObject(tile: Phaser.Tilemaps.Tile) {
// Check if object already exists on position
const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
if (existingObject) return
const newObject = {
id: uuidv4(),
zoneId: zone.value!.id,
zone: zone.value!,
objectId: selectedObject.value!.id,
object: selectedObject.value!,
depth: 0,
isRotated: false,
positionX: tile.x,
positionY: tile.y
}
// Add new object to zoneObjects
zoneObjects.value = zoneObjects.value.concat(newObject)
}
function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
// Check if event tile already exists on position
const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
if (existingEventTile) return
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,
toRotation: zoneEditorStore.teleportSettings.toRotation
}
: undefined
}
zoneEventTiles.value = zoneEventTiles.value.concat(newEventTile as any)
}
function paint() {
if (!selectedTile.value) return
// Ensure tileArray is initialized with correct dimensions
if (!tileArray || tileArray.length !== zoneTilemap.height) {
tileArray = Array.from({ length: zoneTilemap.height }, () => Array.from({ length: zoneTilemap.width }, () => 'blank_tile'))
}
// Set all tiles in the tilemap to the selected tile's id
for (let y = 0; y < zoneTilemap.height; y++) {
if (!tileArray[y]) {
tileArray[y] = Array(zoneTilemap.width).fill('blank_tile')
}
for (let x = 0; x < zoneTilemap.width; x++) {
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, selectedTile.value.id)
tileArray[y][x] = selectedTile.value.id
}
}
}
function save() { function save() {
if (!zone.value) return if (!zoneEditorStore.zone) return
const data = { const data = {
zoneId: zone.value.id, zoneId: zoneEditorStore.zone.id,
name: zoneEditorStore.zoneSettings.name, name: zoneEditorStore.zoneSettings.name,
width: zoneEditorStore.zoneSettings.width, width: zoneEditorStore.zoneSettings.width,
height: zoneEditorStore.zoneSettings.height, height: zoneEditorStore.zoneSettings.height,
tiles: tileArray, tiles: tileArray,
pvp: zone.value.pvp, pvp: zoneEditorStore.zone.pvp,
zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })), zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY })) zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
} }
@ -233,130 +60,16 @@ function save() {
} }
gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => { gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
console.log('zone updated')
zoneEditorStore.setZone(response) zoneEditorStore.setZone(response)
}) })
} }
function clear() {
for (let y = 0; y < zoneTilemap.height; y++) {
if (!tileArray[y]) {
tileArray[y] = Array(zoneTilemap.width).fill('blank_tile')
}
for (let x = 0; x < zoneTilemap.width; x++) {
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, 'blank_tile')
tileArray[y][x] = 'blank_tile'
}
}
zoneEventTiles.value = []
zoneObjects.value = []
}
function updateZoneObjectDepth(depth: number) {
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(objectId: string) {
const object = zoneObjects.value.find((obj) => obj.id === objectId)
if (object) {
movingZoneObject.value = object;
}
}
function handleRotate(objectId: string) {
const object = zoneObjects.value.find((obj) => obj.id === objectId)
if (object) {
object.isRotated = !object.isRotated
}
}
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
watch(
objectList,
(newObjects) => {
zoneObjects.value = zoneObjects.value.map((zoneObject) => {
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
if (updatedObject) {
return {
...zoneObject,
object: {
...zoneObject.object,
originX: updatedObject.originX,
originY: updatedObject.originY
}
}
}
return zoneObject
})
// Update selectedObject if it exists
if (zoneEditorStore.selectedObject) {
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
if (updatedObject) {
zoneEditorStore.setSelectedObject({
...zoneEditorStore.selectedObject,
originX: updatedObject.originX,
originY: updatedObject.originY
})
}
}
},
{ deep: true }
)
const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
if (!zoneObject) return
if (zoneEditorStore.tool !== 'move') return
zoneEditorStore.setSelectedZoneObject(zoneObject)
}
onBeforeMount(async () => { onBeforeMount(async () => {
await gameStore.fetchAllZoneAssets() await gameStore.fetchAllZoneAssets()
await loadAssets(scene) await loadAssets(scene)
console.log('loaded assets')
tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
if (zone.value?.tiles) {
setAllTiles(zoneTilemap, tiles, zone.value.tiles)
tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
function handlePointerMove(pointer: Phaser.Input.Pointer) {
const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, zoneTilemap as any)
if (pointerTile) {
console.log(pointerTile.x, pointerTile.y)
if(movingZoneObject.value) {
movingZoneObject.value.positionX = pointerTile.x
movingZoneObject.value.positionY = pointerTile.y
}
}
}
setTimeout(() => {
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
})
}
zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
// Center camera
const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)
}) })
onUnmounted(() => { onUnmounted(() => {
zoneEventTiles.value = []
zoneObjects.value = []
tiles?.destroy()
zoneTilemap?.removeAllLayers()
zoneTilemap?.destroy()
zoneEditorStore.reset() zoneEditorStore.reset()
}) })
</script> </script>

4
src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject"> <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
<div class="self-end mt-2 flex gap-2"> <div class="self-end mt-2 flex gap-2">
<div> <div>
<label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label> <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
@ -42,7 +42,7 @@ const handleRotate = () => {
} }
const handleMove = () => { const handleMove = () => {
emit('move', zoneEditorStore.selectedZoneObject?.id); emit('move', zoneEditorStore.selectedZoneObject?.id)
} }
const handleDelete = () => { const handleDelete = () => {

6
src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false"> <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
<template #modalHeader> <template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3> <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="m-4"> <div class="m-4">
<form method="post" @submit.prevent="" class="inline"> <form method="post" @submit.prevent="" class="inline">
@ -40,12 +39,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import Modal from '@/components/utilities/Modal.vue' import Modal from '@/components/utilities/Modal.vue'
import { useZoneEditorStore } from '@/stores/zoneEditorStore' import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
import type { Zone } from '@/types' import type { Zone } from '@/types'
const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const gameStore = useGameStore() const gameStore = useGameStore()

89
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex justify-center p-5"> <div class="flex justify-center p-5">
<div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10"> <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
<div ref="clickOutsideElement" class="tools flex gap-2.5" v-if="zoneEditorStore.zone"> <div ref="toolbar" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')"> <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span> <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
</button> </button>
@ -83,22 +83,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue' import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useScene } from 'phavuer'
import { getTile } from '@/composables/zoneComposable'
import { useZoneEditorStore } from '@/stores/zoneEditorStore' import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { onClickOutside } from '@vueuse/core' import { onClickOutside } from '@vueuse/core'
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const props = defineProps({ const emit = defineEmits(['save', 'clear'])
layer: Phaser.Tilemaps.TilemapLayer
})
const scene = useScene()
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
// track when clicked outside of toolbar items // track when clicked outside of toolbar items
const clickOutsideElement = ref(null) const toolbar = ref(null)
// track select state // track select state
let selectPencilOpen = ref(false) let selectPencilOpen = ref(false)
@ -119,51 +112,6 @@ function setEraserMode(value: string) {
selectEraserOpen.value = false selectEraserOpen.value = false
} }
function clickTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'move' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
if (pointer.event.shiftKey) return
const px = scene.cameras.main.worldView.x + pointer.x
const py = scene.cameras.main.worldView.y + pointer.y
const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
if (!pointer_tile) return
if (zoneEditorStore.tool === 'move') {
emit('move', pointer_tile)
}
if (zoneEditorStore.tool === 'eraser') {
emit('eraser', pointer_tile)
}
if (zoneEditorStore.tool === 'pencil') {
emit('pencil', pointer_tile)
}
if (zoneEditorStore.tool === 'paint') {
emit('paint', pointer_tile)
}
}
function drawTiles(pointer: Phaser.Input.Pointer) {
if (!pointer.isDown) return
clickTile(pointer)
}
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
onMounted(() => {
addEventListener('keydown', initKeyShortcuts)
})
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
removeEventListener('keydown', initKeyShortcuts)
})
function handleClick(tool: string) { function handleClick(tool: string) {
if (tool === 'settings') { if (tool === 'settings') {
zoneEditorStore.toggleSettingsModal() zoneEditorStore.toggleSettingsModal()
@ -176,16 +124,16 @@ function handleClick(tool: string) {
} }
function cycleToolMode(tool: 'pencil' | 'eraser') { function cycleToolMode(tool: 'pencil' | 'eraser') {
const modes = ['tile', 'object', 'teleport', 'blocking tile']; const modes = ['tile', 'object', 'teleport', 'blocking tile']
const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode; const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
const currentIndex = modes.indexOf(currentMode); const currentIndex = modes.indexOf(currentMode)
const nextIndex = (currentIndex + 1) % modes.length; const nextIndex = (currentIndex + 1) % modes.length
const nextMode = modes[nextIndex]; const nextMode = modes[nextIndex]
if (tool === 'pencil') { if (tool === 'pencil') {
setDrawMode(nextMode); setDrawMode(nextMode)
} else { } else {
setEraserMode(nextMode); setEraserMode(nextMode)
} }
} }
@ -203,19 +151,26 @@ function initKeyShortcuts(event: KeyboardEvent) {
} }
if (keyActions.hasOwnProperty(event.key)) { if (keyActions.hasOwnProperty(event.key)) {
const tool = keyActions[event.key]; const tool = keyActions[event.key]
if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) { if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
cycleToolMode(tool); cycleToolMode(tool)
} else { } else {
handleClick(tool); handleClick(tool)
} }
} }
} }
onClickOutside(clickOutsideElement, handleClickOutside)
function handleClickOutside() { function handleClickOutside() {
selectPencilOpen.value = false selectPencilOpen.value = false
selectEraserOpen.value = false selectEraserOpen.value = false
} }
onClickOutside(toolbar, handleClickOutside)
onMounted(() => {
addEventListener('keydown', initKeyShortcuts)
})
onBeforeUnmount(() => {
removeEventListener('keydown', initKeyShortcuts)
})
</script> </script>

5
src/components/gameMaster/zoneEditor/partials/ZoneList.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" /> <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
<Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360">
<Teleport to="body">
<Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg text-white">Zones</h3> <h3 class="text-lg text-white">Zones</h3>
</template> </template>
@ -25,7 +23,6 @@
</div> </div>
</template> </template>
</Modal> </Modal>
</Teleport>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

16
src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
View File

@ -41,15 +41,15 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
zoneEditorStore.setZoneName(zoneEditorStore.zone.name) zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
zoneEditorStore.setZoneWidth(zoneEditorStore.zone.width) zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
zoneEditorStore.setZoneHeight(zoneEditorStore.zone.height) zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
zoneEditorStore.setZonePvp(zoneEditorStore.zone.pvp) zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
const name = ref(zoneEditorStore.zoneSettings.name) const name = ref(zoneEditorStore.zoneSettings?.name)
const width = ref(zoneEditorStore.zoneSettings.width) const width = ref(zoneEditorStore.zoneSettings?.width)
const height = ref(zoneEditorStore.zoneSettings.height) const height = ref(zoneEditorStore.zoneSettings?.height)
const pvp = ref(zoneEditorStore.zoneSettings.pvp) const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
watch(name, (value) => { watch(name, (value) => {
zoneEditorStore.setZoneName(value) zoneEditorStore.setZoneName(value)

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

@ -1,6 +1,4 @@
<template> <template></template>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'

2
src/components/gui/Menu.vue
View File

@ -53,5 +53,5 @@
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
const gameStore = useGameStore() const gameStore = useGameStore()
let characterLevel = gameStore.character?.level.toString().padStart(2, '0'); let characterLevel = gameStore.character?.level.toString().padStart(2, '0')
</script> </script>

3
src/components/zone/Objects.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<Image v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" /> <Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getObjectImageProps(object)" />
<!-- <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

9
src/components/zone/Tiles.vue
View File

@ -52,16 +52,15 @@ function createTileLayer() {
} }
function createTileArray() { function createTileArray() {
return Array.from({ length: zoneStore.zone?.width ?? 0 }, () => Array.from({ length: zoneStore.zone?.height ?? 0 }, () => 'blank_tile')) return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
} }
onBeforeMount(() => { onBeforeMount(() => {
if (zoneStore.zone?.tiles) { if (!zoneStore.zone?.tiles) {
return
}
setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles) setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
tileArray = zoneStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile')) tileArray = zoneStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
} else {
tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
}
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {

4
src/composables/pointerHandlers/useGamePointerHandlers.ts
View File

@ -9,7 +9,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
const dragThreshold = 5 // pixels const dragThreshold = 5 // pixels
function updateWaypoint(worldX: number, worldY: number) { function updateWaypoint(worldX: number, worldY: number) {
const pointerTile = getTile(worldX, worldY, layer) const pointerTile = getTile(layer, worldX, worldY)
if (pointerTile) { if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y) const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
waypoint.value = { waypoint.value = {
@ -46,7 +46,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y) const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
if (distance <= dragThreshold) { if (distance <= dragThreshold) {
const pointerTile = getTile(pointer.worldX, pointer.worldY, layer) const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
if (pointerTile) { if (pointerTile) {
gameStore.connection?.emit('character:initMove', { gameStore.connection?.emit('character:initMove', {
positionX: pointerTile.x, positionX: pointerTile.x,

2
src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
View File

@ -11,7 +11,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
function updateWaypoint(pointer: Phaser.Input.Pointer) { function updateWaypoint(pointer: Phaser.Input.Pointer) {
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y) const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
const pointerTile = getTile(px, py, layer) const pointerTile = getTile(layer, px, py)
if (pointerTile) { if (pointerTile) {
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y) const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)

15
src/composables/zoneComposable.ts
View File

@ -2,15 +2,16 @@ import config from '@/config'
import Tilemap = Phaser.Tilemaps.Tilemap import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import Tileset = Phaser.Tilemaps.Tileset import Tileset = Phaser.Tilemaps.Tileset
import Tile = Phaser.Tilemaps.Tile
import { useGameStore } from '@/stores/gameStore' import { useGameStore } from '@/stores/gameStore'
export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined { export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y) const tile = layer.getTileAtWorldXY(x, y)
if (!tile) return undefined if (!tile) return undefined
return tile return tile
} }
export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) { export function tileToWorldXY(layer: TilemapLayer, pos_x: number, pos_y: number) {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
const positionX = worldPoint.x + config.tile_size.y const positionX = worldPoint.x + config.tile_size.y
const positionY = worldPoint.y const positionY = worldPoint.y
@ -18,7 +19,7 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
return { positionX, positionY } return { positionX, positionY }
} }
export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number { export function tileToWorldX(layer: TilemapLayer, pos_x: number, pos_y: number): number {
const worldPoint = layer.tileToWorldXY(pos_x, pos_y) const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
return worldPoint.x + config.tile_size.x / 2 return worldPoint.x + config.tile_size.x / 2
} }
@ -35,8 +36,8 @@ export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: numb
} }
export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) { export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
tiles.forEach((row, y) => { tiles.forEach((row: string[], y: number) => {
row.forEach((tile, x) => { row.forEach((tile: string, x: number) => {
placeTile(zone, layer, x, y, tile) placeTile(zone, layer, x, y, tile)
}) })
}) })
@ -58,6 +59,8 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
}) })
} }
export const clearAssets = (scene: Phaser.Scene) => {}
export const loadAssets = (scene: Phaser.Scene): Promise<void> => { export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
return new Promise((resolve) => { return new Promise((resolve) => {
const gameStore = useGameStore() const gameStore = useGameStore()

12
src/screens/Characters.vue
View File

@ -5,12 +5,7 @@
<div class="filler"></div> <div class="filler"></div>
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading"> <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
<!-- CHARACTER LIST --> <!-- CHARACTER LIST -->
<div <div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character" :class="{ active: selected_character == character.id }">
v-for="character in characters"
:key="character.id"
class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
:class="{ active: selected_character == character.id }"
>
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" /> <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
<img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" /> <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" /> <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
@ -93,8 +88,9 @@
<h3 class="m-0 font-medium text-white">Delete character?</h3> <h3 class="m-0 font-medium text-white">Delete character?</h3>
</template> </template>
<template #modalBody> <template #modalBody>
<p class="mt-0 mb-5 text-white text-lg">Do you want to permanently delete <p class="mt-0 mb-5 text-white text-lg">
<span class="font-extrabold text-white">{{ deletingCharacter.name }}</span>? Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
>?
</p> </p>
</template> </template>
</ConfirmationModal> </ConfirmationModal>

11
src/stores/zoneEditorStore.ts
View File

@ -12,7 +12,7 @@ export type TeleportSettings = {
export const useZoneEditorStore = defineStore('zoneEditor', { export const useZoneEditorStore = defineStore('zoneEditor', {
state: () => { state: () => {
return { return {
active: false, active: true,
zone: null as Zone | null, zone: null as Zone | null,
tool: 'move', tool: 'move',
drawMode: 'tile', drawMode: 'tile',
@ -22,7 +22,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
objectList: [] as Object[], objectList: [] as Object[],
selectedTile: null as Tile | null, selectedTile: null as Tile | null,
selectedObject: null as Object | null, selectedObject: null as Object | null,
selectedZoneObject: null as ZoneObject | null,
objectDepth: 0, objectDepth: 0,
isTileListModalShown: false, isTileListModalShown: false,
isObjectListModalShown: false, isObjectListModalShown: false,
@ -95,9 +94,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
setSelectedObject(object: any) { setSelectedObject(object: any) {
this.selectedObject = object this.selectedObject = object
}, },
setSelectedZoneObject(zoneObject: ZoneObject | null) {
this.selectedZoneObject = zoneObject
},
setObjectDepth(depth: number) { setObjectDepth(depth: number) {
this.objectDepth = depth this.objectDepth = depth
}, },
@ -114,8 +110,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
setTeleportSettings(teleportSettings: TeleportSettings) { setTeleportSettings(teleportSettings: TeleportSettings) {
this.teleportSettings = teleportSettings this.teleportSettings = teleportSettings
}, },
reset() { reset(resetZone = false) {
// this.zone = null if (resetZone) this.zone = null
this.zoneList = [] this.zoneList = []
this.tileList = [] this.tileList = []
this.objectList = [] this.objectList = []
@ -123,7 +119,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
this.drawMode = 'tile' this.drawMode = 'tile'
this.selectedTile = null this.selectedTile = null
this.selectedObject = null this.selectedObject = null
this.selectedZoneObject = null
this.objectDepth = 0 this.objectDepth = 0
this.isSettingsModalShown = false this.isSettingsModalShown = false
this.isZoneListModalShown = false this.isZoneListModalShown = false