diff --git a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue index 1433a02..bb45963 100644 --- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue +++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue @@ -79,4 +79,4 @@ function updateTeleportSettings() { toZoneId: toZoneId.value }) } - \ No newline at end of file + diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue index 7b2d67a..9e63b4a 100644 --- a/src/components/gui/Chat.vue +++ b/src/components/gui/Chat.vue @@ -59,61 +59,61 @@ const scrollToBottom = () => { }) } - gameStore.connection?.on('chat:message', (data: ChatMessage) => { - chats.value.push(data) - scrollToBottom() - - if (!zoneStore.characterLoaded) return - - const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container - if (!charChatContainer) return - - const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container - const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text - if (!chatText || !chatBubble) return - - function calculateTextWidth(text: string, font: string, fontSize: number): number { - // Create a canvas element - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - - if (!context) { - throw new Error('Unable to create canvas context'); - } - - // Set the font - context.font = `${fontSize}px ${font}`; - - // Measure the text width - const metrics = context.measureText(text); - - return metrics.width; - } - - chatBubble.width = calculateTextWidth(data.message, 'Arial', 13) + 10 - chatText.setText(data.message) - - charChatContainer.setVisible(true) - - /** - * Hide chat bubble after a few seconds - */ - - // Clear any existing hide timer - if (charChatContainer.getData('hideTimer')) { - clearTimeout(charChatContainer.getData('hideTimer')) - } - - // Set a new hide timer - const hideTimer = setTimeout(() => { - charChatContainer.setVisible(false) - }, 3000) - - // Store the timer on the container itself - charChatContainer.setData('hideTimer', hideTimer) - }) +gameStore.connection?.on('chat:message', (data: ChatMessage) => { + chats.value.push(data) scrollToBottom() + if (!zoneStore.characterLoaded) return + + const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container + if (!charChatContainer) return + + const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container + const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text + if (!chatText || !chatBubble) return + + function calculateTextWidth(text: string, font: string, fontSize: number): number { + // Create a canvas element + const canvas = document.createElement('canvas') + const context = canvas.getContext('2d') + + if (!context) { + throw new Error('Unable to create canvas context') + } + + // Set the font + context.font = `${fontSize}px ${font}` + + // Measure the text width + const metrics = context.measureText(text) + + return metrics.width + } + + chatBubble.width = calculateTextWidth(data.message, 'Arial', 13) + 10 + chatText.setText(data.message) + + charChatContainer.setVisible(true) + + /** + * Hide chat bubble after a few seconds + */ + + // Clear any existing hide timer + if (charChatContainer.getData('hideTimer')) { + clearTimeout(charChatContainer.getData('hideTimer')) + } + + // Set a new hide timer + const hideTimer = setTimeout(() => { + charChatContainer.setVisible(false) + }, 3000) + + // Store the timer on the container itself + charChatContainer.setData('hideTimer', hideTimer) +}) +scrollToBottom() + onBeforeUnmount(() => { gameStore.connection?.off('chat:message') }) diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue index 540b04c..f8c4f90 100644 --- a/src/components/sprites/Character.vue +++ b/src/components/sprites/Character.vue @@ -22,7 +22,11 @@ import { watch, computed, ref, onMounted, onUnmounted } from 'vue' import { Container, refObj, RoundRectangle, Sprite, Text } from 'phavuer' import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable' -enum Direction { POSITIVE, NEGATIVE, UNCHANGED } +enum Direction { + POSITIVE, + NEGATIVE, + UNCHANGED +} const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer @@ -113,13 +117,13 @@ const charTexture = computed(() => { const updateSprite = () => { if (props.character.isMoving) { - charSprite.value!.anims.play(charTexture.value, true); - return; + charSprite.value!.anims.play(charTexture.value, true) + return } - charSprite.value!.anims.stop(); - charSprite.value!.setFrame(0); - charSprite.value!.setTexture(charTexture.value); + charSprite.value!.anims.stop() + charSprite.value!.setFrame(0) + charSprite.value!.setTexture(charTexture.value) } const createChatBubble = (container: Phaser.GameObjects.Container) => { @@ -138,14 +142,17 @@ const createText = (text: Phaser.GameObjects.Text) => { text.setFontFamily('Arial') } -watch(() => props.character, (newChar, oldChar) => { - if (!newChar) return +watch( + () => props.character, + (newChar, oldChar) => { + if (!newChar) return - if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) { - const direction = !oldChar ? Direction.POSITIVE : calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY) - updatePosition(newChar.positionX, newChar.positionY, direction) + if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) { + const direction = !oldChar ? Direction.POSITIVE : calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY) + updatePosition(newChar.positionX, newChar.positionY, direction) + } } -}) +) watch(() => props.character.isMoving, updateSprite) watch(() => props.character.rotation, updateSprite) @@ -169,4 +176,4 @@ onMounted(() => { onUnmounted(() => { tween.value?.stop() }) - \ No newline at end of file + diff --git a/src/composables/pointerHandlers/useGamePointerHandlers.ts b/src/composables/pointerHandlers/useGamePointerHandlers.ts index 0cd7945..046a1bf 100644 --- a/src/composables/pointerHandlers/useGamePointerHandlers.ts +++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts @@ -63,4 +63,4 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema } return { setupPointerHandlers, cleanupPointerHandlers } -} \ No newline at end of file +} diff --git a/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts b/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts index 154fbf5..57ad87e 100644 --- a/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts +++ b/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts @@ -54,4 +54,4 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser. } return { setupPointerHandlers, cleanupPointerHandlers } -} \ No newline at end of file +} diff --git a/src/composables/useCameraControls.ts b/src/composables/useCameraControls.ts index 83135ce..534fa53 100644 --- a/src/composables/useCameraControls.ts +++ b/src/composables/useCameraControls.ts @@ -18,7 +18,7 @@ export function useCameraControls(scene: Phaser.Scene): any { watch( () => zoneStore.characterLoaded, (characterLoaded) => { - if(!characterLoaded) return; + if (!characterLoaded) return // scene.cameras.main.startFollow(scene.children.getByName(gameStore.character!.name) as Phaser.GameObjects.Container); } ) diff --git a/src/stores/zoneStore.ts b/src/stores/zoneStore.ts index 82db502..80e2b14 100644 --- a/src/stores/zoneStore.ts +++ b/src/stores/zoneStore.ts @@ -5,7 +5,7 @@ export const useZoneStore = defineStore('zone', { state: () => ({ zone: null as Zone | null, characters: [] as ExtendedCharacter[], - characterLoaded: false, + characterLoaded: false }), getters: { getCharacterById: (state) => { @@ -42,8 +42,7 @@ export const useZoneStore = defineStore('zone', { }, reset() { this.zone = null - this.characters = [], - this.characterLoaded = false + ;(this.characters = []), (this.characterLoaded = false) } } })