npm run format

src/components/game/character/Character.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" setup>
+import { Direction } from '@/application/enums'
 import { type MapCharacter } from '@/application/types'
 import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
@@ -17,7 +18,6 @@ import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Container, Sprite, useScene } from 'phavuer'
 import { onMounted, onUnmounted, watch } from 'vue'
-import { Direction } from '@/application/enums'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -28,19 +28,7 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const scene = useScene()
 
-const {
+const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
-  characterContainer,
-  characterSprite,
-  currentPositionX,
-  currentPositionY,
-  isometricDepth,
-  isFlippedX,
-  updatePosition,
-  calcDirection,
-  updateSprite,
-  initializeSprite,
-  cleanup
-} = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
 
 const handlePositionUpdate = (newValues: any, oldValues: any) => {
   if (!newValues) return

src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue

@@ -173,7 +173,7 @@ const onOffsetChange = () => {
 
 watch(tempOffset, onOffsetChange, { deep: true })
 
-const imageDimensions = ref<{ [key: number]: { width: number; height: number } }>({});
+const imageDimensions = ref<{ [key: number]: { width: number; height: number } }>({})
 
 const updateImageDimensions = (event: Event, index: number) => {
   const img = event.target as HTMLImageElement

src/components/gameMaster/mapEditor/partials/TileList.vue

@@ -165,11 +165,11 @@ onMounted(async () => {
   tiles.value = await tileStorage.getAll()
   const initialBatchSize = 20
   const initialTiles = tiles.value.slice(0, initialBatchSize)
-  initialTiles.forEach(tile => tileProcessor.processTile(tile))
+  initialTiles.forEach((tile) => tileProcessor.processTile(tile))
 
   // Process remaining tiles in background
   setTimeout(() => {
-    tiles.value.slice(initialBatchSize).forEach(tile => tileProcessor.processTile(tile))
+    tiles.value.slice(initialBatchSize).forEach((tile) => tileProcessor.processTile(tile))
   }, 1000)
 })
 

src/composables/useCharacterSpriteComposable.ts

@@ -1,10 +1,10 @@
+import { Direction } from '@/application/enums'
 import { type MapCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
 import { CharacterTypeStorage } from '@/storage/storages'
 import { refObj } from 'phavuer'
 import { computed, ref } from 'vue'
-import { Direction } from '@/application/enums'
 
 export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) {
   const characterContainer = refObj<Phaser.GameObjects.Container>()

src/composables/useTileProcessingComposable.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue'
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import type { TileAnalysisResult, TileWorkerMessage } from '@/types/tileTypes'
+import { ref } from 'vue'
 
 // Constants for image processing
 const DOWNSCALE_WIDTH = 32
@@ -60,13 +60,12 @@ export function useTileProcessingComposable() {
     isProcessing = true
 
     const batch = processingQueue.value.splice(0, BATCH_SIZE)
-    Promise.all(batch.map(tile => processTileAsync(tile)))
+    Promise.all(batch.map((tile) => processTileAsync(tile))).then(() => {
-      .then(() => {
+      isProcessing = false
-        isProcessing = false
+      if (processingQueue.value.length > 0) {
-        if (processingQueue.value.length > 0) {
+        setTimeout(processBatch, 0)
-          setTimeout(processBatch, 0)
+      }
-        }
+    })
-      })
   }
 
   function processTile(tile: Tile) {
@@ -82,17 +81,9 @@ export function useTileProcessingComposable() {
 
     if (!data1 || !data2) return false
 
-    const colorDifference = Math.sqrt(
+    const colorDifference = Math.sqrt(Math.pow(data1.color.r - data2.color.r, 2) + Math.pow(data1.color.g - data2.color.g, 2) + Math.pow(data1.color.b - data2.color.b, 2))
-      Math.pow(data1.color.r - data2.color.r, 2) +
-      Math.pow(data1.color.g - data2.color.g, 2) +
-      Math.pow(data1.color.b - data2.color.b, 2)
-    )
 
-    return (
+    return colorDifference <= COLOR_SIMILARITY_THRESHOLD && Math.abs(data1.edge - data2.edge) <= EDGE_SIMILARITY_THRESHOLD && data1.namePrefix === data2.namePrefix
-      colorDifference <= COLOR_SIMILARITY_THRESHOLD &&
-      Math.abs(data1.edge - data2.edge) <= EDGE_SIMILARITY_THRESHOLD &&
-      data1.namePrefix === data2.namePrefix
-    )
   }
 
   function cleanup() {

src/stores/mapStore.ts

@@ -32,11 +32,7 @@ export const useMapStore = defineStore('map', {
       if (index !== -1) this.characters[index] = updatedCharacter
     },
     // Property is mapCharacter key
-    updateCharacterProperty<K extends keyof MapCharacter>(
+    updateCharacterProperty<K extends keyof MapCharacter>(characterId: UUID, property: K, value: MapCharacter[K]) {
-      characterId: UUID,
-      property: K,
-      value: MapCharacter[K]
-    ) {
       const character = this.characters.find((char) => char.character.id === characterId)
       if (character) {
         character[property] = value

src/workers/tileAnalyzerWorker.ts

@@ -23,7 +23,10 @@ function analyzeTile(imageData: ImageData, tileId: string, tileName: string): Ti
 
 function getDominantColorFast(imageData: ImageData) {
   const data = new Uint8ClampedArray(imageData.data.buffer)
-  let r = 0, g = 0, b = 0, total = 0
+  let r = 0,
+    g = 0,
+    b = 0,
+    total = 0
   const length = data.length
 
   for (let i = 0; i < length; i += 4 * PIXEL_SAMPLE_RATE) {
@@ -35,11 +38,13 @@ function getDominantColorFast(imageData: ImageData) {
     }
   }
 
-  return total > 0 ? {
+  return total > 0
-    r: Math.round(r / total),
+    ? {
-    g: Math.round(g / total),
+        r: Math.round(r / total),
-    b: Math.round(b / total)
+        g: Math.round(g / total),
-  } : { r: 0, g: 0, b: 0 }
+        b: Math.round(b / total)
+      }
+    : { r: 0, g: 0, b: 0 }
 }
 
 function getEdgeComplexityFast(imageData: ImageData) {
@@ -51,11 +56,10 @@ function getEdgeComplexityFast(imageData: ImageData) {
   for (let y = 0; y < height; y += PIXEL_SAMPLE_RATE) {
     for (let x = 0; x < width; x += PIXEL_SAMPLE_RATE) {
       const i = (y * width + x) * 4
-      if (data[i + 3] > 0 && (
+      if (
-        x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE ||
+        data[i + 3] > 0 &&
-        data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + 4 * PIXEL_SAMPLE_RATE + 3] === 0 ||
+        (x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE || data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i - width * 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + width * 4 * PIXEL_SAMPLE_RATE + 3] === 0)
-        data[i - width * 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + width * 4 * PIXEL_SAMPLE_RATE + 3] === 0
+      ) {
-      )) {
         edgePixels++
       }
     }