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
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/World.vue
View File

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

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 ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray-300/80 rounded-lg border-2 border-solid border-cyan-200" v-show="gameStore.isChatOpen">
<div v-for="message in chats" class="flex-col py-2 items-center p-3">
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sdm">{{ message.character.name }}</span>
<p class="text-sm text-gray-50 m-0">{{ message.message }}</p>
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm">{{ message.character.name }}</span>
<p class="text-gray-50 m-0">{{ message.message }}</p>
</div>
</div>
<div class="w-full flex">

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

@ -23,24 +23,24 @@
</div>
<!-- TODO: Replace gameStore.character with other (selected) player's -->
<!-- <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">-->
<!-- <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 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="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">-->
<!-- <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>-->
<!-- </div>-->
<!-- <div class="w-full flex items-center justify-between">-->
<!-- <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>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <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">-->
<!-- <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 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="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">-->
<!-- <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>-->
<!-- </div>-->
<!-- <div class="w-full flex items-center justify-between">-->
<!-- <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>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</template>
<script setup lang="ts">

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

@ -1,9 +1,9 @@
<template>
<Container v-if="props.character" :x="currentX" :y="currentY">
<!-- Start chat bubble -->
<!-- <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' }" />-->
<!-- End chat bubble -->
<!-- Start chat bubble -->
<!-- <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' }" />-->
<!-- End chat bubble -->
<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="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
@ -67,8 +67,8 @@ watch(
() => props.character,
(newChar, oldChar) => {
if (newChar) {
if (!oldChar || newChar.position_x !== oldChar.position_x || newChar.position_y !== oldChar.position_y) {
updatePosition(newChar.position_x, newChar.position_y)
if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
updatePosition(newChar.positionX, newChar.positionY)
}
}
},
@ -100,7 +100,7 @@ const createText = (text: Phaser.GameObjects.Text) => {
onMounted(() => {
if (props.character) {
updatePosition(props.character.position_x, props.character.position_y)
updatePosition(props.character.positionX, props.character.positionY)
}
})

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

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

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

@ -30,11 +30,11 @@
</div>
<div class="form-field-half">
<label for="origin-x">Origin X</label>
<input v-model.number="action.origin_x" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
<input v-model.number="action.originX" class="input-cyan" type="number" step="any" name="origin-x" placeholder="Origin X" />
</div>
<div class="form-field-half">
<label for="origin-y">Origin Y</label>
<input v-model.number="action.origin_y" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
<input v-model.number="action.originY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
<div class="form-field-half">
<label for="is-animated">Is animated</label>
@ -124,8 +124,8 @@ function saveSprite() {
return {
action: action.action,
sprites: action.sprites,
origin_x: action.origin_x,
origin_y: action.origin_y,
originX: action.originX,
originY: action.originY,
isAnimated: action.isAnimated,
isLooping: action.isLooping,
frameSpeed: action.frameSpeed,
@ -153,8 +153,8 @@ function addNewImage() {
sprite: selectedSprite.value,
action: 'new_action',
sprites: [],
origin_x: 0,
origin_y: 0,
originX: 0,
originY: 0,
isAnimated: false,
isLooping: false,
frameSpeed: 0,

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

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

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

@ -1,6 +1,6 @@
<template>
<Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isObjectListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="260">
<Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="260">
<template #modalHeader>
<h3 class="text-lg">Objects</h3>
<div class="flex">
@ -9,10 +9,10 @@
<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" />
</div>
<!-- <div>-->
<!-- <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" />-->
<!-- </div>-->
<!-- <div>-->
<!-- <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" />-->
<!-- </div>-->
</div>
</div>
</template>

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

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

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

@ -1,6 +1,6 @@
<template>
<Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isTileListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="600">
<Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="600">
<template #modalHeader>
<h3 class="text-lg">Tiles</h3>
<div class="flex">

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

@ -8,10 +8,10 @@
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handlePencilClick">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
<div class="select" v-if="zoneEditorStore.tool === 'pencil'">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
{{ zoneEditorStore.drawMode }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
@ -35,10 +35,10 @@
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleEraserClick">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
<div class="select" v-if="zoneEditorStore.tool === 'eraser'">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
{{ zoneEditorStore.eraserMode }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
@ -120,12 +120,12 @@ function setEraserMode(value: string) {
selectEraserOpen.value = false
}
function drawTile(pointer: Phaser.Input.Pointer) {
function clickTile(pointer: Phaser.Input.Pointer) {
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
return
}
if (pointer.event.altKey) {
if (pointer.event.shiftKey) {
return
}
@ -152,10 +152,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
function drawTiles(pointer: Phaser.Input.Pointer) {
if (!pointer.isDown) return
drawTile(pointer)
clickTile(pointer)
}
scene.input.on(Phaser.Input.Events.POINTER_UP, drawTile)
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
onMounted(() => {
@ -163,11 +163,21 @@ onMounted(() => {
})
onBeforeUnmount(() => {
scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
removeEventListener('keydown', initKeyShortcuts)
})
function handlePencilClick() {
zoneEditorStore.setTool('pencil')
selectPencilOpen.value = !selectPencilOpen.value
}
function handleEraserClick() {
zoneEditorStore.setTool('eraser')
selectEraserOpen.value = !selectEraserOpen.value
}
// Key bindings
function initKeyShortcuts(event: KeyboardEvent) {
if (!zoneEditorStore.zone) return