From 0f7304851ec749cbe9fcc2a2bf13951bcc113526 Mon Sep 17 00:00:00 2001
From: Pabloader <pabloader@pabloader.ru>
Date: Tue, 25 Jun 2024 22:25:55 +0000
Subject: [PATCH] Nice zoom

---
 src/game.ts     |  7 +++++--
 src/graphics.ts | 16 ++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/game.ts b/src/game.ts
index 1f0e618..555cb82 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -33,12 +33,15 @@ export default class Game {
     private onScroll = (event: WheelEvent) => {
         const direction = event.deltaY / Math.abs(event.deltaY);
 
+        let scale = 1;
         if (direction < 0) {
-            this.graphics.scale /= 1.1;
+            scale = 1.1;
         } else if (direction > 0) {
-            this.graphics.scale *= 1.1;
+            scale = 1/ 1.1;
         }
 
+        this.graphics.applyScale(scale, [event.clientX, event.clientY]);
+
         event.preventDefault();
     }
 
diff --git a/src/graphics.ts b/src/graphics.ts
index 85f2363..71dd658 100644
--- a/src/graphics.ts
+++ b/src/graphics.ts
@@ -21,16 +21,16 @@ export default class Graphics {
         return [this.canvas.width, this.canvas.height];
     }
 
-    get scale() {
-        return 1.0 / this.tileSize;
-    }
+    applyScale(scale: number, point: Point) {
+        const newTileSize = Math.min(Math.max(this.tileSize * scale, 2), this.width / 2, this.height / 2);
+        const realScale = newTileSize / this.tileSize;
+        this.tileSize = newTileSize;
 
-    set scale(value) {
-        this.tileSize = Math.min(Math.max(1.0 / value, 2), this.width / 2, this.height / 2);
+        this.offset = exp`((${this.offset} - ${point}) * ${realScale}) + ${point}`;
     }
 
     pan(amount: Point) {
-        this.offset = exp`${this.offset} + ${amount} / ${this.tileSize}`;
+        this.offset = exp`${this.offset} + ${amount}`;
     }
 
     clear() {
@@ -71,10 +71,10 @@ export default class Graphics {
     }
 
     worldToScreen(point: Point): Point {
-        return exp`(${point} + ${this.offset}) * ${this.tileSize} + ${this.size} / ${2}`;
+        return exp`${point} * ${this.tileSize} + ${this.offset}`;
     }
 
     screenToWorld(point: Point): Point {
-        return exp`(${point} - ${this.size} / ${2}) / ${this.tileSize} - ${this.offset}`;
+        return exp`(${point} - ${this.offset}) / ${this.tileSize}`;
     }
 }
\ No newline at end of file