From 7f6ce07ec70688dc974e821ca752f4c02c3106c5 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 8 Sep 2024 03:13:01 +0200
Subject: [PATCH] Improved code logic, only console log when dev is enabled,
 added logout btn. to characters screen

---
 src/components/sprites/Character.vue | 22 ++++++++++++++++------
 src/screens/Characters.vue           |  4 ++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 1b29742..c3a8788 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -48,15 +48,26 @@ const updatePosition = (x: number, y: number) => {
     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))
 
-  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
     currentX.value = targetX
     currentY.value = targetY
-  } else {
+  }
+
+  /**
+   * Normal movement: Animate
+   */
+  if (distance <= config.tile_size.x / 1.5) {
     // 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({
       targets: { x: currentX.value, y: currentY.value },
@@ -93,12 +104,11 @@ const charTexture = computed(() => {
   const spriteId = props.character.characterType.sprite.id
   const action = props.character.isMoving ? 'walk' : 'idle'
 
-  console.log('rotation', rotation)
   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`
   } 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`
   }
 
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 0ebe8c3..25a8537 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -37,6 +37,9 @@
       </div>
 
       <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
           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"
@@ -46,6 +49,7 @@
           <img class="h-8 drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
         </button>
       </div>
+      <!-- @TODO , style this button properly -->
     </div>
   </div>