npm run format

This commit is contained in:
Dennis Postma 2025-02-01 16:18:33 +01:00
parent d65ceba66a
commit e53e154d16
8 changed files with 35 additions and 56 deletions

View File

@ -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 {
characterContainer,
characterSprite,
currentPositionX,
currentPositionY,
isometricDepth,
isFlippedX,
updatePosition,
calcDirection,
updateSprite,
initializeSprite,
cleanup
} = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
const { 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

View File

@ -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

View File

@ -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)
})

View File

@ -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>()
@ -133,4 +133,4 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
initializeSprite,
cleanup
}
}
}

View File

@ -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)))
.then(() => {
isProcessing = false
if (processingQueue.value.length > 0) {
setTimeout(processBatch, 0)
}
})
Promise.all(batch.map((tile) => processTileAsync(tile))).then(() => {
isProcessing = false
if (processingQueue.value.length > 0) {
setTimeout(processBatch, 0)
}
})
}
function processTile(tile: Tile) {
@ -82,17 +81,9 @@ export function useTileProcessingComposable() {
if (!data1 || !data2) return false
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)
)
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))
return (
colorDifference <= COLOR_SIMILARITY_THRESHOLD &&
Math.abs(data1.edge - data2.edge) <= EDGE_SIMILARITY_THRESHOLD &&
data1.namePrefix === data2.namePrefix
)
return colorDifference <= COLOR_SIMILARITY_THRESHOLD && Math.abs(data1.edge - data2.edge) <= EDGE_SIMILARITY_THRESHOLD && data1.namePrefix === data2.namePrefix
}
function cleanup() {
@ -104,4 +95,4 @@ export function useTileProcessingComposable() {
areTilesRelated,
cleanup
}
}
}

View File

@ -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>(
characterId: UUID,
property: K,
value: MapCharacter[K]
) {
updateCharacterProperty<K extends keyof MapCharacter>(characterId: UUID, property: K, value: MapCharacter[K]) {
const character = this.characters.find((char) => char.character.id === characterId)
if (character) {
character[property] = value

View File

@ -17,4 +17,4 @@ export interface TileWorkerMessage {
export interface TileCache {
[key: string]: TileAnalysisResult
}
}

View File

@ -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 ? {
r: Math.round(r / total),
g: Math.round(g / total),
b: Math.round(b / total)
} : { r: 0, g: 0, b: 0 }
return total > 0
? {
r: Math.round(r / total),
g: Math.round(g / total),
b: Math.round(b / total)
}
: { r: 0, g: 0, b: 0 }
}
function getEdgeComplexityFast(imageData: ImageData) {
@ -51,14 +56,13 @@ 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 && (
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
)) {
if (
data[i + 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)
) {
edgePixels++
}
}
}
return edgePixels * PIXEL_SAMPLE_RATE
}
}