Zone editor UX improvements, possibly fixed login issue after registration

src/components/utilities/Controls.vue

@@ -9,6 +9,7 @@ import { storeToRefs } from 'pinia'
 import config from '@/config'
 import { getTile, tileToWorldXY } from '@/services/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGameStore } from '@/stores/game'
 
 const props = defineProps<{
   layer: Phaser.Tilemaps.TilemapLayer
@@ -16,6 +17,7 @@ const props = defineProps<{
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
+const gameStore = useGameStore()
 const { tool } = storeToRefs(zoneEditorStore)
 
 const waypoint = ref({
@@ -63,11 +65,13 @@ function setupEventListeners() {
 
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, (pointer: Phaser.Input.Pointer) => {
     if (pointer.event.altKey || tool.value === 'move') {
+      gameStore.setMovingCamera(true)
       scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
     }
   })
 
   scene.input.on(Phaser.Input.Events.POINTER_UP, () => {
+    gameStore.setMovingCamera(false)
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
   })
 }

src/components/utilities/assetManager/partials/ObjectDetails.vue

@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import type { Object } from '@/types'
-import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'
@@ -56,7 +56,7 @@ const objectName = ref('')
 const objectTags = ref([] as string[])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
-const objectIsAnimated = ref(0)
+const objectIsAnimated = ref(false)
 
 if (!selectedObject.value) {
   console.error('No object selected')
@@ -67,7 +67,7 @@ if (selectedObject.value) {
   objectTags.value = selectedObject.value.tags
   objectOriginX.value = selectedObject.value.origin_x
   objectOriginY.value = selectedObject.value.origin_y
-  objectIsAnimated.value = selectedObject.value.is_animated
+  objectIsAnimated.value = selectedObject.value.isAnimated
 }
 
 function removeObject() {

src/screens/Login.vue

@@ -25,7 +25,6 @@
       </form>
     </div>
   </div>
-  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
 </template>
 
 <script setup lang="ts">
@@ -35,12 +34,6 @@ import { useNotificationStore } from '@/stores/notifications'
 import { useGameStore } from '@/stores/game'
 import { useAssetStore } from '@/stores/assets'
 
-const bgm = ref('bgm')
-if (bgm.value.paused) {
-  addEventListener('click', () => bgm.value.play())
-  addEventListener('keydown', () => bgm.value.play())
-}
-
 const gameStore = useGameStore()
 const notifications = useNotificationStore()
 const assetStore = useAssetStore()
@@ -73,7 +66,7 @@ async function loginFunc() {
   }
 
   gameStore.setToken(response.token)
-  await gameStore.initConnection()
+  gameStore.initConnection()
 }
 
 async function registerFunc() {
@@ -91,7 +84,6 @@ async function registerFunc() {
     return
   }
 
-  gameStore.setToken(response.token)
+  await loginFunc()
-  await gameStore.initConnection()
 }
 </script>

src/stores/game.ts

@@ -11,7 +11,8 @@ export const useGameStore = defineStore('game', {
     connection: null as Socket | null,
     user: null as User | null,
     character: null as Character | null,
-    isGmPanelOpen: false
+    isGmPanelOpen: false,
+    isMovingCamera: false
   }),
   actions: {
     setScreen(screen: string) {
@@ -29,6 +30,12 @@ export const useGameStore = defineStore('game', {
     toggleGmPanel() {
       this.isGmPanelOpen = !this.isGmPanelOpen
     },
+    toggleMovingCamera() {
+      this.isMovingCamera = !this.isMovingCamera
+    },
+    setMovingCamera(moving: boolean) {
+      this.isMovingCamera = moving
+    },
     initConnection() {
       this.connection = io(config.server_endpoint, {
         secure: !config.development,

src/stores/zoneEditor.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { useGameStore } from '@/stores/game';
 import type { Zone, Object, Tile, ZoneObject } from '@/types'
 
 export const useZoneEditorStore = defineStore('zoneEditor', {
@@ -62,6 +63,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.selectedObject = object
     },
     setSelectedZoneObject(zoneObject: ZoneObject) {
+      const gameStore = useGameStore(); // Access the gameStore
+      if (gameStore.isMovingCamera) return; // Step 2: Check isMovingCamera before proceeding
+      
       this.selectedZoneObject = zoneObject
     },
     setObjectDepth(depth: number) {