Merge remote-tracking branch 'origin/feature/cache'
This commit is contained in:
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
|
||||
<CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
|
||||
<!-- <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<!-- <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
|
||||
</Container>
|
||||
@ -16,6 +16,7 @@ import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
|
||||
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { CharacterTypeStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { Container, refObj, Sprite, useScene } from 'phavuer'
|
||||
@ -36,28 +37,29 @@ const props = defineProps<{
|
||||
|
||||
const charContainer = refObj<Phaser.GameObjects.Container>()
|
||||
const charSprite = refObj<Phaser.GameObjects.Sprite>()
|
||||
const charSpriteId = ref('')
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapStore = useMapStore()
|
||||
const scene = useScene()
|
||||
|
||||
const currentX = ref(0)
|
||||
const currentY = ref(0)
|
||||
const currentPositionX = ref(0)
|
||||
const currentPositionY = ref(0)
|
||||
const isometricDepth = ref(1)
|
||||
const isInitialPosition = ref(true)
|
||||
const tween = ref<Phaser.Tweens.Tween | null>(null)
|
||||
|
||||
const updateIsometricDepth = (x: number, y: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
|
||||
const updateIsometricDepth = (positionX: number, positionY: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
|
||||
}
|
||||
|
||||
const updatePosition = (x: number, y: number, direction: Direction) => {
|
||||
const targetX = tileToWorldX(props.tilemap, x, y)
|
||||
const targetY = tileToWorldY(props.tilemap, x, y)
|
||||
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
|
||||
const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
|
||||
const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
|
||||
|
||||
if (isInitialPosition.value) {
|
||||
currentX.value = targetX
|
||||
currentY.value = targetY
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
isInitialPosition.value = false
|
||||
return
|
||||
}
|
||||
@ -66,52 +68,53 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
|
||||
tween.value.stop()
|
||||
}
|
||||
|
||||
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
|
||||
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
|
||||
|
||||
if (distance >= config.tile_size.x / 1.1) {
|
||||
currentX.value = targetX
|
||||
currentY.value = targetY
|
||||
if (distance >= config.tile_size.width / 1.1) {
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
return
|
||||
}
|
||||
|
||||
const duration = distance * 5.7
|
||||
|
||||
tween.value = props.tilemap.scene.tweens.add({
|
||||
targets: { x: currentX.value, y: currentY.value },
|
||||
x: targetX,
|
||||
y: targetY,
|
||||
targets: { x: currentPositionX.value, y: currentPositionY.value },
|
||||
x: newPositionX,
|
||||
y: newPositionY,
|
||||
duration,
|
||||
ease: 'Linear',
|
||||
onStart: () => {
|
||||
if (direction === Direction.POSITIVE) {
|
||||
updateIsometricDepth(x, y)
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
},
|
||||
onUpdate: (tween) => {
|
||||
currentX.value = tween.targets[0].x
|
||||
currentY.value = tween.targets[0].y
|
||||
// @ts-ignore
|
||||
currentPositionX.value = tween.targets[0].x
|
||||
// @ts-ignore
|
||||
currentPositionY.value = tween.targets[0].y
|
||||
},
|
||||
onComplete: () => {
|
||||
if (direction === Direction.NEGATIVE) {
|
||||
updateIsometricDepth(x, y)
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
|
||||
if (newY < oldY || newX < oldX) return Direction.NEGATIVE
|
||||
if (newX > oldX || newY > oldY) return Direction.POSITIVE
|
||||
const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
|
||||
if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
|
||||
if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
|
||||
return Direction.UNCHANGED
|
||||
}
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const { rotation, characterType } = props.mapCharacter.character
|
||||
const spriteId = characterType?.sprite ?? 'idle_right_down'
|
||||
const spriteId = charSpriteId.value ?? 'idle_right_down'
|
||||
const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
|
||||
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
|
||||
const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
|
||||
|
||||
return `${spriteId}-${action}_${direction}`
|
||||
})
|
||||
@ -119,47 +122,48 @@ const charTexture = computed(() => {
|
||||
const updateSprite = () => {
|
||||
if (props.mapCharacter.isMoving) {
|
||||
charSprite.value!.anims.play(charTexture.value, true)
|
||||
return
|
||||
} else {
|
||||
charSprite.value!.anims.stop()
|
||||
charSprite.value!.setFrame(0)
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
}
|
||||
|
||||
charSprite.value!.anims.stop()
|
||||
charSprite.value!.setFrame(0)
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ({
|
||||
x: props.mapCharacter.character.positionX,
|
||||
y: props.mapCharacter.character.positionY,
|
||||
positionX: props.mapCharacter.character.positionX,
|
||||
positionY: props.mapCharacter.character.positionY,
|
||||
isMoving: props.mapCharacter.isMoving,
|
||||
rotation: props.mapCharacter.character.rotation
|
||||
}),
|
||||
(newValues, oldValues) => {
|
||||
if (!newValues) return
|
||||
|
||||
if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
|
||||
updatePosition(newValues.x, newValues.y, direction)
|
||||
if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
|
||||
updatePosition(newValues.positionX, newValues.positionY, direction)
|
||||
}
|
||||
|
||||
// Handle animation updates
|
||||
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
|
||||
updateSprite()
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => props.mapCharacter, updateSprite)
|
||||
|
||||
loadSpriteTextures(scene, props.mapCharacter.character.characterType?.sprite as string)
|
||||
.then(() => {
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
charSprite.value!.setFlipX(isFlippedX.value)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
const characterTypeStorage = new CharacterTypeStorage()
|
||||
characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
|
||||
console.log(spriteId)
|
||||
charSpriteId.value = spriteId
|
||||
loadSpriteTextures(scene, spriteId)
|
||||
.then(() => {
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
charSprite.value!.setFlipX(isFlippedX.value)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
charContainer.value!.setName(props.mapCharacter.character!.name)
|
||||
@ -168,8 +172,7 @@ onMounted(() => {
|
||||
mapStore.setCharacterLoaded(true)
|
||||
|
||||
// #146 : Set camera position to character, need to be improved still
|
||||
// scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
|
||||
// scene.cameras.main.stopFollow()
|
||||
scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
|
||||
}
|
||||
|
||||
updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)
|
||||
|
||||
@ -1,21 +1,18 @@
|
||||
<template>
|
||||
<MapTiles :key="mapStore.map?.id ?? 0" @tileMap:create="tileMap = $event" />
|
||||
<MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
<MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
|
||||
<!-- <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />-->
|
||||
<Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
|
||||
import Characters from '@/components/game/map/Characters.vue'
|
||||
import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
|
||||
import MapTiles from '@/components/game/map/MapTiles.vue'
|
||||
import { loadMapTilesIntoScene } from '@/composables/mapComposable'
|
||||
import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onUnmounted, ref, shallowRef } from 'vue'
|
||||
import { onUnmounted, shallowRef } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const mapStore = useMapStore()
|
||||
|
||||
@ -31,8 +28,7 @@ onUnmounted(() => {
|
||||
|
||||
// Event listeners
|
||||
gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
|
||||
await loadMapTilesIntoScene(data.map.id, scene)
|
||||
mapStore.setMap(data.map)
|
||||
mapStore.setMapId(data.mapId)
|
||||
mapStore.setCharacters(data.characters)
|
||||
})
|
||||
|
||||
|
||||
@ -1,69 +1,75 @@
|
||||
<template>
|
||||
<Controls :layer="tileLayer" :depth="0" />
|
||||
<Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { UUID } from '@/application/types'
|
||||
import { unduplicateArray } from '@/application/utilities'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { FlattenMapArray, setLayerTiles } from '@/composables/mapComposable'
|
||||
import { FlattenMapArray, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
|
||||
import { MapStorage } from '@/storage/storages'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
|
||||
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
|
||||
const emit = defineEmits(['tileMap:create'])
|
||||
|
||||
const scene = useScene()
|
||||
const mapStore = useMapStore()
|
||||
const tileMap = createTileMap()
|
||||
const tileLayer = createTileLayer()
|
||||
const mapStorage = new MapStorage()
|
||||
|
||||
/**
|
||||
* A Tilemap is a container for Tilemap data.
|
||||
* This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
|
||||
* A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
|
||||
*/
|
||||
function createTileMap() {
|
||||
const mapData = new Phaser.Tilemaps.MapData({
|
||||
width: mapStore.map?.width,
|
||||
height: mapStore.map?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
||||
|
||||
function createTileMap(mapData: any) {
|
||||
const mapConfig = new Phaser.Tilemaps.MapData({
|
||||
width: mapData?.width,
|
||||
height: mapData?.height,
|
||||
tileWidth: config.tile_size.width,
|
||||
tileHeight: config.tile_size.height,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
|
||||
emit('tileMap:create', newTileMap)
|
||||
|
||||
return newTileMap
|
||||
}
|
||||
|
||||
/**
|
||||
* A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
|
||||
*/
|
||||
function createTileLayer() {
|
||||
const tilesArray = unduplicateArray(FlattenMapArray(mapStore.map?.tiles ?? []))
|
||||
function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
|
||||
const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
|
||||
|
||||
const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
|
||||
return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
|
||||
}) as any
|
||||
const tilesetImages = tilesArray.map((tile: any, index: number) => {
|
||||
return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
|
||||
})
|
||||
|
||||
// Add blank tile
|
||||
tilesetImages.push(tileMap.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 = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
|
||||
|
||||
const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
|
||||
return layer
|
||||
}
|
||||
|
||||
setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
|
||||
onMounted(() => {
|
||||
loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
|
||||
.then(() => mapStorage.get(mapStore.mapId))
|
||||
.then((mapData) => {
|
||||
tileMap.value = createTileMap(mapData)
|
||||
tileLayer.value = createTileLayer(tileMap.value, mapData)
|
||||
setLayerTiles(tileMap.value, tileLayer.value, mapData?.tiles)
|
||||
})
|
||||
.catch((error) => console.error('Failed to initialize map:', error))
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
tileMap.destroyLayer('tiles')
|
||||
tileMap.removeAllLayers()
|
||||
tileMap.destroy()
|
||||
if (!tileMap.value) return
|
||||
tileMap.value.destroyLayer('tiles')
|
||||
tileMap.value.removeAllLayers()
|
||||
tileMap.value.destroy()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Image v-if="gameStore.getLoadedAsset(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
|
||||
<Image v-if="gameStore.isAssetLoaded(props.placedMapObject.mapObject)" v-bind="imageProps" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AssetDataT, PlacedMapObject } from '@/application/types'
|
||||
import type { PlacedMapObject, TextureData } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -30,12 +30,12 @@ const imageProps = computed(() => ({
|
||||
|
||||
loadTexture(scene, {
|
||||
key: props.placedMapObject.mapObject.id,
|
||||
data: '/assets/map_objects/' + props.placedMapObject.mapObject.id + '.png',
|
||||
data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
|
||||
group: 'map_objects',
|
||||
updatedAt: props.placedMapObject.mapObject.updatedAt,
|
||||
frameWidth: props.placedMapObject.mapObject.frameWidth,
|
||||
frameHeight: props.placedMapObject.mapObject.frameHeight
|
||||
} as AssetDataT).catch((error) => {
|
||||
} as TextureData).catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/assets/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="h-7 w-16 max-w-16 flex justify-center">
|
||||
<img class="h-7" :src="`${config.server_endpoint}/assets/map_objects/${mapObject.id}.png`" alt="Object" />
|
||||
<img class="h-7" :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`" alt="Object" />
|
||||
</div>
|
||||
<span :class="{ 'text-white': assetManagerStore.selectedMapObject?.id === mapObject.id }">{{ mapObject.name }}</span>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
|
||||
<img class="max-h-72" :src="`${config.server_endpoint}/textures/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="h-7 w-16 max-w-16 flex justify-center">
|
||||
<img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
|
||||
<img class="h-7" :src="`${config.server_endpoint}/textures/tiles/${tile.id}.png`" alt="Tile" />
|
||||
</div>
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
|
||||
</div>
|
||||
|
||||
@ -16,11 +16,11 @@
|
||||
<script setup lang="ts">
|
||||
import { type Map } from '@/application/types'
|
||||
import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
|
||||
import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
|
||||
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
|
||||
import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
|
||||
import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
|
||||
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
|
||||
import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
|
||||
import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
|
||||
import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
|
||||
import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
|
||||
// Components
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
import type { TextureData } from '@/application/types'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -29,8 +29,8 @@ function createTileMap() {
|
||||
const mapData = new Phaser.Tilemaps.MapData({
|
||||
width: mapEditorStore.map?.width,
|
||||
height: mapEditorStore.map?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
tileWidth: config.tile_size.width,
|
||||
tileHeight: config.tile_size.height,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
@ -47,13 +47,13 @@ function createTileMap() {
|
||||
function createTileLayer() {
|
||||
const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
|
||||
|
||||
const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
|
||||
return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
|
||||
const tilesetImages = Array.from(tilesArray).map((tile: TextureData, index: number) => {
|
||||
return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
|
||||
}) as any
|
||||
|
||||
// Add blank tile
|
||||
tilesetImages.push(tileMap.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 = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
|
||||
const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AssetDataT, PlacedMapObject } from '@/application/types'
|
||||
import type { PlacedMapObject, TextureData } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -34,12 +34,12 @@ const imageProps = computed(() => ({
|
||||
|
||||
loadTexture(scene, {
|
||||
key: props.placedMapObject.mapObject.id,
|
||||
data: '/assets/map_objects/' + props.placedMapObject.mapObject.id + '.png',
|
||||
data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
|
||||
group: 'map_objects',
|
||||
updatedAt: props.placedMapObject.mapObject.updatedAt,
|
||||
frameWidth: props.placedMapObject.mapObject.frameWidth,
|
||||
frameHeight: props.placedMapObject.mapObject.frameHeight
|
||||
} as AssetDataT).catch((error) => {
|
||||
} as TextureData).catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
<script setup lang="ts">
|
||||
import type { MapObject, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
|
||||
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
|
||||
import { getTile } from '@/composables/mapComposable'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
|
||||
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
|
||||
|
||||
const scene = useScene()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
@ -240,7 +240,7 @@ watch(
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
// { deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div v-for="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
|
||||
<img
|
||||
class="border-2 border-solid max-w-full"
|
||||
:src="`${config.server_endpoint}/assets/map_objects/${mapObject.id}.png`"
|
||||
:src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
|
||||
alt="Object"
|
||||
@click="mapEditorStore.setSelectedMapObject(mapObject)"
|
||||
:class="{
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
|
||||
<img
|
||||
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
|
||||
:src="`${config.server_endpoint}/assets/tiles/${group.parent.id}.png`"
|
||||
:src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
|
||||
:alt="group.parent.name"
|
||||
@click="openGroup(group)"
|
||||
@load="() => processTile(group.parent)"
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img
|
||||
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
|
||||
:src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
|
||||
:src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
|
||||
:alt="selectedGroup.parent.name"
|
||||
@click="selectTile(selectedGroup.parent.id)"
|
||||
:class="{
|
||||
@ -63,7 +63,7 @@
|
||||
<div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
|
||||
<img
|
||||
class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
|
||||
:src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
|
||||
:src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
|
||||
:alt="childTile.name"
|
||||
@click="selectTile(childTile.id)"
|
||||
:class="{
|
||||
@ -169,7 +169,7 @@ function processTile(tile: Tile) {
|
||||
tileColorData.value.set(tile.id, getDominantColor(imageData))
|
||||
tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
|
||||
}
|
||||
img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
|
||||
img.src = `${config.server_endpoint}/textures/tiles/${tile.id}.png`
|
||||
}
|
||||
|
||||
function getDominantColor(imageData: ImageData) {
|
||||
|
||||
@ -34,27 +34,23 @@
|
||||
<button class="ml-6 w-4 h-8 p-0">
|
||||
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
|
||||
</button>
|
||||
<img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType?.id + '/' + (selectedHairId ?? 'default')" />
|
||||
<img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
|
||||
<button class="mr-6 w-4 h-8 p-0">
|
||||
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="flex justify-between w-[190px]">-->
|
||||
<!-- <!– TODO: replace with color swatches –>-->
|
||||
<!-- <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<!-- TODO: update gender on (selected) character -->
|
||||
<div class="flex justify-between w-[190px]">
|
||||
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">
|
||||
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
|
||||
<span class="text-white">Male</span>
|
||||
</button>
|
||||
<button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">
|
||||
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
|
||||
<span class="text-white">Female</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="flex justify-between w-[190px]">-->
|
||||
<!-- <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">-->
|
||||
<!-- <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
|
||||
<!-- <span class="text-white">Male</span>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">-->
|
||||
<!-- <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
|
||||
<!-- <span class="text-white">Female</span>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,7 +70,7 @@
|
||||
v-for="hair in characterHairs"
|
||||
class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
|
||||
<img class="h-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/front.png'" alt="Hair sprite" />
|
||||
<input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
</div>
|
||||
</div>
|
||||
@ -128,8 +124,9 @@
|
||||
import config from '@/application/config'
|
||||
import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { CharacterHairStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isLoading = ref<boolean>(true)
|
||||
@ -148,12 +145,6 @@ setTimeout(() => {
|
||||
gameStore.connection?.on('character:list', (data: any) => {
|
||||
characters.value = data
|
||||
isLoading.value = false
|
||||
|
||||
// Fetch hairs
|
||||
// @TODO: This is hacky, we should have a better way to do this
|
||||
gameStore.connection?.emit('character:hair:list', {}, (data: CharacterHair[]) => {
|
||||
characterHairs.value = data
|
||||
})
|
||||
})
|
||||
|
||||
// Select character logics
|
||||
@ -184,7 +175,12 @@ function createCharacter() {
|
||||
// Watch changes for selected character and update hairs
|
||||
watch(selectedCharacterId, (characterId) => {
|
||||
if (!characterId) return
|
||||
selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
|
||||
// selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const characterHairStorage = new CharacterHairStorage()
|
||||
characterHairs.value = await characterHairStorage.getAll()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
@ -33,6 +33,7 @@ import Menu from '@/components/gui/Menu.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
|
||||
import { Game, Scene } from 'phavuer'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -80,4 +81,6 @@ function preloadScene(scene: Phaser.Scene) {
|
||||
}
|
||||
|
||||
function createScene(scene: Phaser.Scene) {}
|
||||
|
||||
onBeforeUnmount(() => {})
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,60 @@
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-center h-dvh relative">
|
||||
<button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
|
||||
<span class="text-white text-lg flex-1 text-center">Play</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex flex-col justify-center items-center h-dvh relative col">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4" cy="12" r="3" fill="white">
|
||||
<animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
|
||||
</circle>
|
||||
<circle cx="12" cy="12" r="3" fill="white">
|
||||
<animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
|
||||
</circle>
|
||||
<circle cx="20" cy="12" r="3" fill="white">
|
||||
<animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" async>
|
||||
import config from '@/application/config'
|
||||
import type { HttpResponse, MapObject } from '@/application/types'
|
||||
import type { BaseStorage } from '@/storage/baseStorage'
|
||||
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
|
||||
// import type { Map } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
function continueBtnClick() {
|
||||
// Play music
|
||||
const audio = new Audio('/assets/music/login.mp3')
|
||||
audio.play()
|
||||
const totalItems = ref(0)
|
||||
const currentItem = ref(0)
|
||||
|
||||
// Set isLoaded to true
|
||||
gameStore.game.isLoaded = true
|
||||
async function downloadAndStore<T extends { id: string }>(endpoint: string, storage: BaseStorage<T>) {
|
||||
const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
|
||||
const response = (await request.json()) as HttpResponse<T[]>
|
||||
|
||||
if (!response.success) {
|
||||
console.error(`Failed to download ${endpoint}:`, response.message)
|
||||
return
|
||||
}
|
||||
|
||||
const items = response.data ?? []
|
||||
for (const item of items) {
|
||||
await storage.add(item)
|
||||
}
|
||||
}
|
||||
|
||||
const tileStorage = new TileStorage()
|
||||
const mapStorage = new MapStorage()
|
||||
const mapObjectStorage = new MapObjectStorage()
|
||||
|
||||
Promise.all([
|
||||
downloadAndStore('tiles', tileStorage),
|
||||
downloadAndStore('maps', mapStorage),
|
||||
downloadAndStore('map_objects', mapObjectStorage),
|
||||
downloadAndStore('sprites', new SpriteStorage()),
|
||||
downloadAndStore('character_types', new CharacterTypeStorage()),
|
||||
downloadAndStore('character_hair', new CharacterHairStorage())
|
||||
]).then(() => {
|
||||
gameStore.game.isLoaded = true
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<script setup lang="ts">
|
||||
import config from '@/application/config'
|
||||
import 'phaser'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
import type { TextureData } from '@/application/types'
|
||||
import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -72,7 +72,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
|
||||
* Then load them into the scene.
|
||||
*/
|
||||
scene.load.rexAwait(async function (successCallback: any) {
|
||||
const tiles: { data: AssetDataT[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
|
||||
const tiles: { data: TextureData[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
|
||||
|
||||
for await (const tile of tiles?.data ?? []) {
|
||||
await loadTexture(scene, tile)
|
||||
|
||||
46
src/components/utilities/Debug.vue
Normal file
46
src/components/utilities/Debug.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
|
||||
import { TextureStorage } from '@/storage/textureStorage'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const mapStorage = new MapStorage()
|
||||
const tileStorage = new TileStorage()
|
||||
const mapObjectStorage = new MapObjectStorage()
|
||||
const spriteStorage = new SpriteStorage()
|
||||
const characterTypeStorage = new CharacterTypeStorage()
|
||||
const characterHairStorage = new CharacterHairStorage()
|
||||
const textureStorage = new TextureStorage()
|
||||
|
||||
let currentString = ''
|
||||
|
||||
async function handleKeyPress(event: KeyboardEvent) {
|
||||
// Ignore if typing in input/textarea
|
||||
if (document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
|
||||
return
|
||||
}
|
||||
|
||||
currentString += event.key
|
||||
|
||||
// Do something when string matches
|
||||
if (currentString.includes('reset')) {
|
||||
await mapStorage.destroy()
|
||||
await tileStorage.destroy()
|
||||
await mapObjectStorage.destroy()
|
||||
await spriteStorage.destroy()
|
||||
await characterTypeStorage.destroy()
|
||||
await characterHairStorage.destroy()
|
||||
await textureStorage.destroy()
|
||||
currentString = '' // Reset
|
||||
}
|
||||
|
||||
// Reset string after a certain amount of time
|
||||
setTimeout(() => {
|
||||
currentString = ''
|
||||
}, 60000)
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', handleKeyPress))
|
||||
onUnmounted(() => window.removeEventListener('keydown', handleKeyPress))
|
||||
</script>
|
||||
Reference in New Issue
Block a user