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

Improved code logic, only console log when dev is enabled, added logout btn. to characters screen

Browse Source
This commit is contained in:
Dennis Postma 2024-09-08 03:13:01 +02:00
parent c4e7eb81ef
commit 7f6ce07ec7
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,15 +48,26 @@ const updatePosition = (x: number, y: number) => {
tween.value.stop() tween.value.stop()
} }
/**
* Calculate the distance between the current and target positions
*/
const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2)) const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
if (distance > config.tile_size.x / 1.5) { /**
* Teleport: No animation, only if the distance is greater than the tile size / 1.5
*/
if (distance >= config.tile_size.x / 1.5) {
// Teleport: No animation // Teleport: No animation
currentX.value = targetX currentX.value = targetX
currentY.value = targetY currentY.value = targetY
} else { }
/**
* Normal movement: Animate
*/
if (distance <= config.tile_size.x / 1.5) {
// Normal movement: Animate // Normal movement: Animate
const duration = distance * 5 // Adjust this multiplier to control overall speed const duration = distance * 6 // Adjust this multiplier to control overall speed
tween.value = props.layer.scene.tweens.add({ tween.value = props.layer.scene.tweens.add({
targets: { x: currentX.value, y: currentY.value }, targets: { x: currentX.value, y: currentY.value },
@ -93,12 +104,11 @@ const charTexture = computed(() => {
const spriteId = props.character.characterType.sprite.id const spriteId = props.character.characterType.sprite.id
const action = props.character.isMoving ? 'walk' : 'idle' const action = props.character.isMoving ? 'walk' : 'idle'
console.log('rotation', rotation)
if (rotation === 0 || rotation === 6) { if (rotation === 0 || rotation === 6) {
console.log(`${spriteId}-${action}_left_down`) if (config.development) console.log(`${spriteId}-${action}_left_down`)
return `${spriteId}-${action}_left_up` return `${spriteId}-${action}_left_up`
} else if (rotation === 2 || rotation === 4) { } else if (rotation === 2 || rotation === 4) {
console.log(`${spriteId}-${action}_right_down`) if (config.development) console.log(`${spriteId}-${action}_right_down`)
return `${spriteId}-${action}_right_down` return `${spriteId}-${action}_right_down`
} }

4
src/screens/Characters.vue
View File

@ -37,6 +37,9 @@
</div> </div>
<div class="button-wrapper flex gap-8" v-if="!isLoading"> <div class="button-wrapper flex gap-8" v-if="!isLoading">
<button class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" @click="gameStore.disconnectSocket()">
<img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" />
</button>
<button <button
class="btn-cyan py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" class="btn-cyan py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
:disabled="!selected_character" :disabled="!selected_character"
@ -46,6 +49,7 @@
<img class="h-8 drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" /> <img class="h-8 drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
</button> </button>
</div> </div>
<!-- @TODO , style this button properly -->
</div> </div>
</div> </div>