From 5b31729f64fdfa0ebb62e37426114358e2fc8a6d Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 29 Sep 2024 01:07:53 +0200
Subject: [PATCH] Minor improvements

---
 src/components/sprites/Character.vue                      | 5 ++---
 src/composables/pointerHandlers/useGamePointerHandlers.ts | 2 +-
 src/composables/useCameraControls.ts                      | 3 +++
 src/screens/Game.vue                                      | 7 +++----
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index e88cecc..324c57e 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,6 +1,6 @@
 <template>
   <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
-    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />
+    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
     <Text @create="createChatText" text="" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
   </Container>
   <Container :depth="999" :x="currentX" :y="currentY">
@@ -134,12 +134,11 @@ const createChatBubble = (container: Phaser.GameObjects.Container) => {
 const createChatText = (text: Phaser.GameObjects.Text) => {
   text.setName(`${props.character.name}_chatText`)
   text.setFontSize(13)
-  text.setFontStyle('bold')
   text.setFontFamily('Arial')
 
   // Fix text alignment on Windows
   if (game.device.os.windows) {
-    text.setOrigin(0.5, 9.8)
+    text.setOrigin(0.5, 9.75)
   }
 }
 
diff --git a/src/composables/pointerHandlers/useGamePointerHandlers.ts b/src/composables/pointerHandlers/useGamePointerHandlers.ts
index aa58094..8caa1a4 100644
--- a/src/composables/pointerHandlers/useGamePointerHandlers.ts
+++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts
@@ -6,7 +6,7 @@ import config from '@/config'
 export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
   const gameStore = useGameStore()
   const lastDragTime = ref(Date.now())
-  const dragTimeout = 100 // 100ms timeout for dragging, to prevent accidental clicks
+  const dragTimeout = 250 // 250ms timeout for dragging, to prevent accidental clicks
 
   function updateWaypoint(pointer: Phaser.Input.Pointer) {
     const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
diff --git a/src/composables/useCameraControls.ts b/src/composables/useCameraControls.ts
index 534fa53..6c5589e 100644
--- a/src/composables/useCameraControls.ts
+++ b/src/composables/useCameraControls.ts
@@ -7,6 +7,9 @@ export function useCameraControls(scene: Phaser.Scene): any {
   const zoneStore = useZoneStore()
   const camera = scene.cameras.main
 
+  // Might improve image quality
+  camera.setRoundPixels(true)
+
   function onPointerDown(pointer: Phaser.Input.Pointer) {
     gameStore.setPlayerDraggingCamera(true)
   }
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 1f21120..95536f7 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -62,10 +62,9 @@ const gameConfig = {
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
   resolution: 3,
-  render: {
-    pixelArt: true,
-    roundPixels: true,
-  },
+  scale: { mode: Phaser.Scale.RESIZE },
+  pixelArt: true,
+  roundPixels: true,
 }
 
 const createGame = (game: Phaser.Game) => {