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

Renamed zone > map

Browse Source
This commit is contained in:
Dennis Postma
2025-01-02 17:31:31 +01:00
parent 736ddddc54
commit 40c87f0ee3
65 changed files with 762 additions and 762 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/game/character/Character.vue
View File

@ -1,23 +1,23 @@
<template>
<ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
<Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
<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 :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
<!-- <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
<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>
</template>
<script lang="ts" setup>
import config from '@/application/config'
import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
import { type Sprite as SpriteT, type MapCharacter } from '@/application/types'
import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
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/zoneComposable'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
import { useMapStore } from '@/stores/mapStore'
import { Container, refObj, Sprite, useScene } from 'phavuer'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@ -31,14 +31,14 @@ enum Direction {
const props = defineProps<{
tilemap: Phaser.Tilemaps.Tilemap
zoneCharacter: ZoneCharacter
mapCharacter: MapCharacter
}>()
const charContainer = refObj<Phaser.GameObjects.Container>()
const charSprite = refObj<Phaser.GameObjects.Sprite>()
const gameStore = useGameStore()
const zoneStore = useZoneStore()
const mapStore = useMapStore()
const scene = useScene()
const currentX = ref(0)
@ -105,19 +105,19 @@ const calcDirection = (oldX: number, oldY: number, newX: number, newY: number):
return Direction.UNCHANGED
}
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
const charTexture = computed(() => {
const { rotation, characterType } = props.zoneCharacter.character
const { rotation, characterType } = props.mapCharacter.character
const spriteId = characterType?.sprite ?? 'idle_right_down'
const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
return `${spriteId}-${action}_${direction}`
})
const updateSprite = () => {
if (props.zoneCharacter.isMoving) {
if (props.mapCharacter.isMoving) {
charSprite.value!.anims.play(charTexture.value, true)
return
}
@ -129,10 +129,10 @@ const updateSprite = () => {
watch(
() => ({
x: props.zoneCharacter.character.positionX,
y: props.zoneCharacter.character.positionY,
isMoving: props.zoneCharacter.isMoving,
rotation: props.zoneCharacter.character.rotation
x: props.mapCharacter.character.positionX,
y: props.mapCharacter.character.positionY,
isMoving: props.mapCharacter.isMoving,
rotation: props.mapCharacter.character.rotation
}),
(newValues, oldValues) => {
if (!newValues) return
@ -150,9 +150,9 @@ watch(
{ deep: true }
)
watch(() => props.zoneCharacter, updateSprite)
watch(() => props.mapCharacter, updateSprite)
loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as string)
loadSpriteTextures(scene, props.mapCharacter.character.characterType?.sprite as string)
.then(() => {
charSprite.value!.setTexture(charTexture.value)
charSprite.value!.setFlipX(isFlippedX.value)
@ -162,17 +162,17 @@ loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as
})
onMounted(() => {
charContainer.value!.setName(props.zoneCharacter.character!.name)
charContainer.value!.setName(props.mapCharacter.character!.name)
if (props.zoneCharacter.character.id === gameStore.character!.id) {
zoneStore.setCharacterLoaded(true)
if (props.mapCharacter.character.id === gameStore.character!.id) {
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()
}
updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)
})
onUnmounted(() => {

16
src/components/game/character/partials/CharacterChest.vue
View File

@ -3,14 +3,14 @@
</template>
<script lang="ts" setup>
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
import type { Sprite as SpriteT, MapCharacter } from '@/application/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
import { Image, useScene } from 'phavuer'
import { computed } from 'vue'
const props = defineProps<{
zoneCharacter: ZoneCharacter
mapCharacter: MapCharacter
currentX: number
currentY: number
}>()
@ -19,19 +19,19 @@ const gameStore = useGameStore()
const scene = useScene()
const texture = computed(() => {
const { rotation, characterHair } = props.zoneCharacter.character
const { rotation, characterHair } = props.mapCharacter.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 isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.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)
const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
return {
depth: 1,
@ -39,11 +39,11 @@ const imageProps = computed(() => {
originY: Number(spriteAction?.originY) ?? 0,
flipX: isFlippedX.value,
texture: texture.value
// y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
// y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
}
})
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
.then(() => {})
.catch((error) => {
console.error('Error loading texture:', error)

16
src/components/game/character/partials/CharacterHair.vue
View File

@ -3,14 +3,14 @@
</template>
<script lang="ts" setup>
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
import type { Sprite as SpriteT, MapCharacter } from '@/application/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
import { Image, useScene } from 'phavuer'
import { computed } from 'vue'
const props = defineProps<{
zoneCharacter: ZoneCharacter
mapCharacter: MapCharacter
currentX: number
currentY: number
}>()
@ -19,19 +19,19 @@ const gameStore = useGameStore()
const scene = useScene()
const texture = computed(() => {
const { rotation, characterHair } = props.zoneCharacter.character
const { rotation, characterHair } = props.mapCharacter.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 isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.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)
const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
return {
depth: 1,
@ -39,11 +39,11 @@ const imageProps = computed(() => {
originY: Number(spriteAction?.originY) ?? 0,
flipX: isFlippedX.value,
texture: texture.value,
y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
}
})
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
.then(() => {})
.catch((error) => {
console.error('Error loading texture:', error)

10
src/components/game/character/partials/ChatBubble.vue
View File

@ -6,12 +6,12 @@
</template>
<script setup lang="ts">
import type { ZoneCharacter } from '@/application/types'
import type { MapCharacter } from '@/application/types'
import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
import { onMounted } from 'vue'
const props = defineProps<{
zoneCharacter: ZoneCharacter
mapCharacter: MapCharacter
currentX: number
currentY: number
}>()
@ -20,11 +20,11 @@ const game = useGame()
const charChatContainer = refObj<Phaser.GameObjects.Container>()
const createChatBubble = (container: Phaser.GameObjects.Container) => {
container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
container.setName(`${props.mapCharacter.character.name}_chatBubble`)
}
const createChatText = (text: Phaser.GameObjects.Text) => {
text.setName(`${props.zoneCharacter.character.name}_chatText`)
text.setName(`${props.mapCharacter.character.name}_chatText`)
text.setFontSize(13)
text.setFontFamily('Arial')
text.setOrigin(0.5, 10.9)
@ -40,7 +40,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
}
onMounted(() => {
charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
charChatContainer.value!.setVisible(false)
})
</script>

6
src/components/game/character/partials/Healthbar.vue
View File

@ -1,17 +1,17 @@
<template>
<Container :depth="999" :x="currentX" :y="currentY">
<Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
<Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
<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" />
</Container>
</template>
<script setup lang="ts">
import type { ZoneCharacter } from '@/application/types'
import type { MapCharacter } from '@/application/types'
import { Container, RoundRectangle, Text, useGame } from 'phavuer'
const props = defineProps<{
zoneCharacter: ZoneCharacter
mapCharacter: MapCharacter
currentX: number
currentY: number
}>()