From b3c1972ef929a6c4e0976caa30b322209d6e8d63 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Sat, 28 Oct 2023 00:25:08 +1100
Subject: [PATCH] Improve render consistency

---
 .../src/d2-renderer/D2Renderer.ts             | 33 +++++++++++++++----
 .../src/d2-renderer/D2RendererWorker.ts       |  6 ++--
 resources/traces/v1.0.5/tile.trace.json       | 11 ++-----
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/internal-renderers/src/d2-renderer/D2Renderer.ts b/internal-renderers/src/d2-renderer/D2Renderer.ts
index e4de087a..a48822da 100644
--- a/internal-renderers/src/d2-renderer/D2Renderer.ts
+++ b/internal-renderers/src/d2-renderer/D2Renderer.ts
@@ -2,9 +2,9 @@ import {
   ceil,
   clamp,
   debounce,
-  delay,
   find,
   floor,
+  forEach,
   isEqual,
   isNaN,
   map,
@@ -352,16 +352,19 @@ class D2Renderer
         ?.addChild(tile)
         .setTransform(bounds.left, bounds.top, scale.x, scale.y);
       this.#getUpdateGridQueue()();
-      await this.#animate(tile);
-      for (const c of this.#world!.children) {
+      await this.#show(tile);
+      forEach(this.#world?.children, async (c) => {
         if (intersect(c.bounds!, bounds) && c.age < tile.age) {
-          c.destroy({ texture: true, baseTexture: true });
+          await this.#hide(c);
+          if (!c.destroyed) {
+            c.destroy({ texture: true, baseTexture: true });
+          }
         }
-      }
+      });
     }
   }
 
-  #animate(tile: Tile) {
+  #show(tile: Tile) {
     const ticker = this.#app!.ticker;
     return new Promise<void>((res) => {
       const f = (dt: number) => {
@@ -373,7 +376,23 @@ class D2Renderer
         }
       };
       tile.alpha = 0;
-      delay(() => ticker.add(f), this.#options.animationDuration);
+      ticker.add(f);
+    });
+  }
+
+  #hide(tile: Tile) {
+    const ticker = this.#app!.ticker;
+    return new Promise<void>((res) => {
+      const f = (dt: number) => {
+        tile.alpha -=
+          dt / PIXI.Ticker.targetFPMS / this.#options.animationDuration;
+        if (tile.alpha < 0) {
+          ticker.remove(f);
+          res();
+        }
+      };
+      tile.alpha = 1;
+      ticker.add(f);
     });
   }
 }
diff --git a/internal-renderers/src/d2-renderer/D2RendererWorker.ts b/internal-renderers/src/d2-renderer/D2RendererWorker.ts
index db32fbac..1df427aa 100644
--- a/internal-renderers/src/d2-renderer/D2RendererWorker.ts
+++ b/internal-renderers/src/d2-renderer/D2RendererWorker.ts
@@ -201,10 +201,10 @@ export class D2RendererWorker extends EventEmitter<
       y: tile.height / (bottom - top),
     };
     const g = new OffscreenCanvas(tile.width, tile.height);
-    const ctx = g.getContext("2d", { alpha: false })!;
+    const ctx = g.getContext("2d")!;
     ctx.imageSmoothingEnabled = false;
-    ctx.fillStyle = this.#options.backgroundColor;
-    ctx.fillRect(0, 0, tile.width, tile.height);
+    // ctx.fillStyle = this.#options.backgroundColor;
+    // ctx.fillRect(0, 0, tile.width, tile.height);
 
     const length = tile.width * 0.05;
     const thickness = 1;
diff --git a/resources/traces/v1.0.5/tile.trace.json b/resources/traces/v1.0.5/tile.trace.json
index 2cf3589e..273417e5 100644
--- a/resources/traces/v1.0.5/tile.trace.json
+++ b/resources/traces/v1.0.5/tile.trace.json
@@ -10,9 +10,9 @@
           "text": "{{$.event[`${$.tile_x}${$.tile_y}`] === 0 ? '' : $.event[`${$.tile_x}${$.tile_y}`]}}",
           "textX": 0.27,
           "textY": 0.75,
-          "fill": "{{$.event[`${$.tile_x}${$.tile_y}`] ? $.themeTextPrimary : $.themeAccent}}",
           "fontSize": 0.75,
-          "fontColor": "{{$.event.themeBackground}}",
+          "fontColor": "{{$.themeBackground}}",
+          "fill": "{{$.event[`${$.tile_x}${$.tile_y}`] ? $.themeTextPrimary : $.themeAccent}}",
           "x": "{{$.tile_x}}",
           "y": "{{$.tile_y}}",
           "display": "persistent"
@@ -37,13 +37,6 @@
       }
     }
   },
-  "path": {
-    "pivot": {
-      "x": "{{'x' in $.event ? $.event.x : 0}}",
-      "y": "{{'y' in $.event ? $.event.y : 0}}"
-    },
-    "scale": 1
-  },
   "events": [
     {
       "11": 1,