From ea9771e3ecdfd8cd01ba6c3ffde62053bf0e2bac Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 11 Jul 2024 18:28:38 +0200
Subject: [PATCH] Various zone editor UX improvements

---
 src/App.vue                                   |  2 ++
 src/components/utilities/Controls.vue         | 19 +++++++++++++++++++
 .../utilities/zoneEditor/Toolbar.vue          |  4 ++++
 .../utilities/zoneEditor/ZoneSettings.vue     |  2 +-
 src/screens/Game.vue                          |  1 +
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 197f926..80101f2 100644
--- a/src/App.vue
+++ b/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">
diff --git a/src/components/utilities/Controls.vue b/src/components/utilities/Controls.vue
index e0af09e..c4c4712 100644
--- a/src/components/utilities/Controls.vue
+++ b/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)
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index dcc7e4d..924ff96 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/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
 
diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue
index 26b9782..0208d35 100644
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/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>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index e6488c2..15ff62c 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -62,6 +62,7 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO,
+  resolution: 3,
   pixelArt: true
 }