Various zone editor UX improvements

src/App.vue

@@ -1,9 +1,11 @@
 <template>
+<div class="overflow-hidden">
   <Notifications />
   <Login v-if="screen === 'login'" />
   <Register v-if="screen === 'register'" />
   <Characters v-if="screen === 'characters'" />
   <Game v-if="screen === 'game'" />
+</div>
 </template>
 
 <script setup lang="ts">

src/components/utilities/Controls.vue

@@ -64,6 +64,25 @@ watch(
   { deep: true }
 )
 
+// if ctrl is pressed and mouse is down , then drag the zone
+scene.input.on(Phaser.Input.Events.POINTER_DOWN, (pointer: Phaser.Input.Pointer) => {
+  if (pointer.event.altKey) {
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+  } else if (zoneEditorStore.tool !== 'move') {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
+  }
+})
+
+/**
+ * Zoom in and out
+ */
+scene.input.on(Phaser.Input.Events.POINTER_WHEEL, (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[], deltaX: number, deltaY: number) => {
+  if (pointer.event.altKey) {
+    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+    cam = scene.cameras.main
+  }
+})
+
 // Unload funcs
 onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, onPointerMove)

src/components/utilities/zoneEditor/Toolbar.vue

@@ -114,6 +114,10 @@ function drawTile(pointer: Phaser.Input.Pointer) {
     return
   }
 
+  if (pointer.event.altKey) {
+    return
+  }
+
   const px = scene.cameras.main.worldView.x + pointer.x
   const py = scene.cameras.main.worldView.y + pointer.y
 

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
+  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="350" :is-resizable="false">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
     </template>

src/screens/Game.vue

@@ -62,6 +62,7 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO,
+  resolution: 3,
   pixelArt: true
 }