Added characterChest component for chest equipment, moved some files

This commit is contained in:
2024-12-27 00:27:54 +01:00
parent 9c105d6df6
commit 231f19a30f
49 changed files with 156 additions and 70 deletions

View File

@ -3,22 +3,24 @@
<Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
<CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
<!-- <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
</Container>
</template>
<script lang="ts" setup>
import config from '@/config'
import { type Sprite as SpriteT, type ZoneCharacter } from '@/types'
import config from '@/application/config'
import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import { Container, Image, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
import { Container, refObj, Sprite, useScene } from 'phavuer'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { loadSpriteTextures } from '@/composables/gameComposable'
import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
// import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
enum Direction {
POSITIVE,

View File

@ -0,0 +1,53 @@
<template>
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { Image, useScene } from 'phavuer'
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
const props = defineProps<{
zoneCharacter: ZoneCharacter
currentX: number
currentY: number
}>()
const gameStore = useGameStore()
const scene = useScene()
const texture = computed(() => {
const { rotation, characterHair } = props.zoneCharacter.character
const spriteId = characterHair?.sprite?.id
const direction = [0, 6].includes(rotation) ? 'back' : 'front'
return `${spriteId}-${direction}`
})
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
const imageProps = computed(() => {
// Get the current sprite action based on direction
const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find(
spriteAction => spriteAction.action === direction
)
return {
depth: 1,
originX: Number(spriteAction?.originX) ?? 0,
originY: Number(spriteAction?.originY) ?? 0,
flipX: isFlippedX.value,
texture: texture.value,
// y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
}
})
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
.then(() => {})
.catch((error) => {
console.error('Error loading texture:', error)
})
</script>

View File

@ -5,7 +5,7 @@
<script lang="ts" setup>
import { computed } from 'vue'
import { Image, useScene } from 'phavuer'
import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'

View File

@ -7,7 +7,7 @@
<script setup lang="ts">
import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
import type { ZoneCharacter } from '@/types'
import type { ZoneCharacter } from '@/application/types'
import { onMounted } from 'vue'
const props = defineProps<{

View File

@ -8,7 +8,7 @@
<script setup lang="ts">
import { Container, RoundRectangle, Text, useGame } from 'phavuer'
import type { ZoneCharacter } from '@/types'
import type { ZoneCharacter } from '@/application/types'
const props = defineProps<{
zoneCharacter: ZoneCharacter

View File

@ -10,7 +10,7 @@ import { useScene } from 'phavuer'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
import type { Zone as ZoneT, ZoneCharacter } from '@/types'
import type { Zone as ZoneT, ZoneCharacter } from '@/application/types'
import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
import Characters from '@/components/game/zone/Characters.vue'
@ -51,8 +51,8 @@ gameStore.connection!.on('zone:character:leave', (characterId: number) => {
zoneStore.removeCharacter(characterId)
})
gameStore.connection!.on('character:move', (data: ZoneCharacter) => {
zoneStore.updateCharacter(data)
gameStore.connection!.on('character:move', (data: { id: number, positionX: number, positionY: number, rotation: number, isMoving: boolean }) => {
zoneStore.updateCharacterPosition(data)
})
// Emit zone:character:join event to server and wait for response, then set zone and characters

View File

@ -3,13 +3,13 @@
</template>
<script setup lang="ts">
import config from '@/config'
import config from '@/application/config'
import { useScene } from 'phavuer'
import { useZoneStore } from '@/stores/zoneStore'
import { onBeforeUnmount } from 'vue'
import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
import Controls from '@/components/utilities/Controls.vue'
import { unduplicateArray } from '@/utilities'
import { unduplicateArray } from '@/application/utilities'
const emit = defineEmits(['tileMap:create'])

View File

@ -7,7 +7,7 @@ import { computed } from 'vue'
import { Image, useScene } from 'phavuer'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { loadTexture } from '@/composables/gameComposable'
import type { AssetDataT, ZoneObject } from '@/types'
import type { AssetDataT, ZoneObject } from '@/application/types'
import { useGameStore } from '@/stores/gameStore'
const props = defineProps<{