Fixed scaling event lag

src/js/draw.js

@@ -137,12 +137,16 @@ export function drawIsometricGrid(gfx, grid) {
     let exts = new Vec3(grid.tileSize, grid.tileSize, 0);
     let tileCoord = new Vec3(0, 0, 0);
     // TODO: Optimize this
+    // 1. Grid based occlusion culling
+    // 2. frustum culling
     for (let k = 0; k < grid.height; ++k) {
         for (let j = 0; j < grid.length; ++j) {
             for (let i = 0; i < grid.width; ++i) {
                 tileCoord.x = i;
                 tileCoord.y = j;
                 tileCoord.z = k;
+                // getTile is sus (it uses a lot of time in the profiler) (i don't know why, it is a pretty simple function)
+                // (Prolly cuz i call it a lot) (Maybe change grid to use spatial hashmap?)
                 let tile = grid.getTile(tileCoord);
                 if (tile === null) {
                     position.x += grid.tileSize;

src/js/draw.ts

@@ -175,6 +175,8 @@ export function drawIsometricGrid(gfx: Graphics, grid: Grid) {
     let tileCoord = new Vec3(0, 0, 0);
 
     // TODO: Optimize this
+    // 1. Grid based occlusion culling
+    // 2. frustum culling
     for (let k = 0; k < grid.height; ++k) {
         for (let j = 0; j < grid.length; ++j) {
             for (let i = 0; i < grid.width; ++i) {
@@ -182,6 +184,8 @@ export function drawIsometricGrid(gfx: Graphics, grid: Grid) {
                 tileCoord.y = j;
                 tileCoord.z = k;
 
+                // getTile is sus (it uses a lot of time in the profiler) (i don't know why, it is a pretty simple function)
+                // (Prolly cuz i call it a lot) (Maybe change grid to use spatial hashmap?)
                 let tile = grid.getTile(tileCoord);
 
                 if (tile === null) {

src/js/graphics.js

@@ -1,4 +1,4 @@
-import { Vec4 } from "./common.js";
+import { Vec2, Vec4 } from "./common.js";
 export function fullscreenCanvas(gfx, id) {
     const canvas = document.getElementById(id);
     canvas.width = window.innerWidth;
@@ -198,18 +198,19 @@ export class Camera {
     movement;
     speed = 600;
     scale = 1.0;
-    scaling = 0.0;
+    scaling;
     scaleSpeed = 1.5;
     constructor(position) {
         this.position = position;
         this.movement = new Vec4(0, 0, 0, 0);
+        this.scaling = new Vec2(0, 0);
     }
     update(dt) {
         this.dt = dt;
         let newPosition = this.movement.multScalarNew(this.dt);
         this.position.x += (newPosition.x + newPosition.y) * this.speed;
         this.position.y += (newPosition.z + newPosition.w) * this.speed;
-        this.scale += this.scaling * this.dt * this.scaleSpeed;
+        this.scale += (this.scaling.x + this.scaling.y) * this.dt * this.scaleSpeed;
         if (this.scale < 0.5) {
             this.scale = 0.5;
         }

src/js/graphics.ts

@@ -269,12 +269,13 @@ export class Camera {
     speed: number = 600;
 
     scale: number = 1.0;
-    scaling: number = 0.0;
+    scaling: Vec2;
     scaleSpeed: number = 1.5;
 
     constructor(position: Vec3) {
         this.position = position;
         this.movement = new Vec4(0, 0, 0, 0);
+        this.scaling  = new Vec2(0, 0);
     }
 
     update(dt: number) {
@@ -284,7 +285,7 @@ export class Camera {
         this.position.x += (newPosition.x + newPosition.y) * this.speed;
         this.position.y += (newPosition.z + newPosition.w) * this.speed;
 
-        this.scale += this.scaling * this.dt * this.scaleSpeed;
+        this.scale += (this.scaling.x + this.scaling.y) * this.dt * this.scaleSpeed;
 
         if (this.scale < 0.5) {
             this.scale = 0.5;

src/js/script.js

@@ -110,14 +110,14 @@ function addDefaultKeybinds(input, camera) {
         c.movement.w = 1;
     });
     input.addKeyAction("KeyQ", [], camera, (c) => {
-        c.scaling = 0.0;
+        c.scaling.x = 0.0;
     }, (c) => {
-        c.scaling = 1.0;
+        c.scaling.x = 1.0;
     });
     input.addKeyAction("KeyE", [], camera, (c) => {
-        c.scaling = 0.0;
+        c.scaling.y = 0.0;
     }, (c) => {
-        c.scaling = -1.0;
+        c.scaling.y = -1.0;
     });
 }
 (async () => {

src/js/script.ts

@@ -151,18 +151,18 @@ function addDefaultKeybinds(input: Input, camera: Camera) {
 
     input.addKeyAction("KeyQ", [], camera,
     (c) => {
-        c.scaling = 0.0;
+        c.scaling.x = 0.0;
     },
     (c) => {
-        c.scaling = 1.0;
+        c.scaling.x = 1.0;
     });
 
     input.addKeyAction("KeyE", [], camera, 
     (c) => {
-        c.scaling = 0.0;
+        c.scaling.y = 0.0;
     },
     (c) => {
-        c.scaling = -1.0;
+        c.scaling.y = -1.0;
     });
 }