npm run format

src/App.vue

@@ -14,11 +14,11 @@ import Loading from '@/components/screens/Loading.vue'
 import Login from '@/components/screens/Login.vue'
 import MapEditor from '@/components/screens/MapEditor.vue'
 import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
+import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, onMounted, onUnmounted, watch } from 'vue'
-import Debug from '@/components/utilities/Debug.vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()

src/components/game/character/Character.vue

@@ -2,8 +2,8 @@
   <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" />-->
+    <!--    <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
-<!--    <CharacterChest :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>
@@ -16,11 +16,11 @@ 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'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { CharacterTypeStorage } from '@/storage/storages'
 
 // import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
 

src/components/game/map/Map.vue

@@ -5,16 +5,16 @@
 </template>
 
 <script setup lang="ts">
-import type { MapCharacter, mapLoadData, UUID, Map } from '@/application/types'
+import type { Map, MapCharacter, mapLoadData, UUID } from '@/application/types'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
 import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
 import { loadMapTilesIntoScene } from '@/composables/mapComposable'
+import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
 import { onUnmounted, ref, shallowRef } from 'vue'
-import { MapStorage } from '@/storage/storages'
 
 const scene = useScene()
 const gameStore = useGameStore()

src/components/game/map/MapTiles.vue

@@ -4,14 +4,14 @@
 
 <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, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
+import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { MapStorage } from '@/storage/storages'
-import type { UUID } from '@/application/types'
 
 const emit = defineEmits(['tileMap:create'])
 
@@ -80,4 +80,4 @@ onBeforeUnmount(() => {
     tileMap.destroy()
   }
 })
-</script>
+</script>

src/components/screens/Characters.vue

@@ -41,16 +41,16 @@
                   </div>
                 </div>
                 <!-- TODO: update gender on (selected) character -->
-<!--                <div class="flex justify-between w-[190px]">-->
+                <!--                <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' }">-->
+                <!--                  <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" />-->
+                <!--                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
-<!--                    <span class="text-white">Male</span>-->
+                <!--                    <span class="text-white">Male</span>-->
-<!--                  </button>-->
+                <!--                  </button>-->
-<!--                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">-->
+                <!--                  <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" />-->
+                <!--                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
-<!--                    <span class="text-white">Female</span>-->
+                <!--                    <span class="text-white">Female</span>-->
-<!--                  </button>-->
+                <!--                  </button>-->
-<!--                </div>-->
+                <!--                </div>-->
               </div>
             </div>
           </div>
@@ -124,9 +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, onMounted, ref, watch } from 'vue'
-import { CharacterHairStorage } from '@/storage/storages'
 
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
@@ -137,7 +137,6 @@ const newCharacterName = ref<string>('')
 const characterHairs = ref<CharacterHair[]>([])
 const selectedHairId = ref<number | null>(null)
 
-
 // Fetch characters
 setTimeout(() => {
   gameStore.connection?.emit('character:list')

src/components/screens/Loading.vue

@@ -17,27 +17,18 @@
 <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'
-import type { BaseStorage } from '@/storage/baseStorage'
-import {
-  CharacterHairStorage,
-  CharacterTypeStorage,
-  MapObjectStorage,
-  MapStorage, SpriteStorage,
-  TileStorage
-} from '@/storage/storages'
 
 const gameStore = useGameStore()
 
 const totalItems = ref(0)
 const currentItem = ref(0)
 
-async function downloadAndStore<T extends { id: string }>(
+async function downloadAndStore<T extends { id: string }>(endpoint: string, storage: BaseStorage<T>) {
-  endpoint: string,
-  storage: BaseStorage<T>
-) {
   const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
   const response = (await request.json()) as HttpResponse<T[]>
 

src/components/utilities/Debug.vue

@@ -1,17 +1,9 @@
-<template>
+<template></template>
-
-</template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
-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()
@@ -25,8 +17,7 @@ let currentString = ''
 
 async function handleKeyPress(event: KeyboardEvent) {
   // Ignore if typing in input/textarea
-  if (document.activeElement?.tagName.toUpperCase() === 'INPUT' ||
+  if (document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
-    document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
     return
   }
 
@@ -52,4 +43,4 @@ async function handleKeyPress(event: KeyboardEvent) {
 
 onMounted(() => window.addEventListener('keydown', handleKeyPress))
 onUnmounted(() => window.removeEventListener('keydown', handleKeyPress))
-</script>
+</script>

src/composables/gameComposable.ts

@@ -1,7 +1,7 @@
 import type { TextureData } from '@/application/types'
+import { SpriteStorage } from '@/storage/storages'
 import { TextureStorage } from '@/storage/textureStorage'
 import { useGameStore } from '@/stores/gameStore'
-import { SpriteStorage } from '@/storage/storages'
 
 const textureLoadingPromises = new Map<string, Promise<boolean>>()
 

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -34,32 +34,19 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
 
     if (!gameStore.game.isPlayerDraggingCamera) return
 
-    const distance = Phaser.Math.Distance.Between(
+    const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
-      pointerStartPosition.value.x,
-      pointerStartPosition.value.y,
-      pointer.x,
-      pointer.y
-    )
 
     // If the distance is less than the drag threshold, return
     // We do this to prevent the camera from scrolling too quickly
     if (distance <= dragThreshold) return
 
-    camera.setScroll(
+    camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
-      camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom,
-      camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom
-    )
   }
 
   function handlePointerUp(pointer: Phaser.Input.Pointer) {
     gameStore.setPlayerDraggingCamera(false)
 
-    const distance = Phaser.Math.Distance.Between(
+    const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
-      pointerStartPosition.value.x,
-      pointerStartPosition.value.y,
-      pointer.x,
-      pointer.y
-    )
 
     // If the distance is greater than the drag threshold, return
     // We do this to prevent the camera from scrolling too quickly

src/storage/baseStorage.ts

@@ -57,4 +57,4 @@ export class BaseStorage<T extends { id: string }> {
       console.error(`Failed to destroy ${this.tableName}:`, error)
     }
   }
-}
+}

src/storage/storages.ts

@@ -1,4 +1,4 @@
-import type { Tile, Map, MapObject } from '@/application/types'
+import type { Map, MapObject, Tile } from '@/application/types'
 import { BaseStorage } from '@/storage/baseStorage'
 
 export class MapStorage extends BaseStorage<Map> {
@@ -41,4 +41,3 @@ export class CharacterHairStorage extends BaseStorage<any> {
     super('characterHairs', 'id, name, createdAt, updatedAt')
   }
 }
-

src/stores/gameStore.ts

@@ -38,8 +38,10 @@ export const useGameStore = defineStore('game', {
       return state.game.loadedTextures
     },
     isAssetLoaded: (state) => {
-      return (key: string) => { return state.game.loadedTextures.includes(key)}
+      return (key: string) => {
-    },
+        return state.game.loadedTextures.includes(key)
+      }
+    }
   },
   actions: {
     addNotification(notification: Notification) {

src/stores/mapStore.ts

@@ -15,7 +15,7 @@ export const useMapStore = defineStore('map', {
     },
     getCharacterCount: (state) => {
       return state.characters.length
-    },
+    }
   },
   actions: {
     setMapId(mapId: UUID) {