From 70e0633de04645ea0bb51c1bbbe09b507e140f42 Mon Sep 17 00:00:00 2001
From: Flavius Poenaru <Flavius256@icloud.com>
Date: Sun, 17 Sep 2023 11:32:17 -0600
Subject: [PATCH] feat(client): entity masking

---
 packages/client/components/game.astro         |  1 +
 packages/client/data/sprites.json             | 36 +++++++++----------
 .../client/scss/game/impl/_container.scss     |  3 +-
 packages/client/src/renderer/renderer.ts      | 18 ++++++++--
 4 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/client/components/game.astro b/packages/client/components/game.astro
index 11f5efcf27..de272407a5 100644
--- a/packages/client/components/game.astro
+++ b/packages/client/components/game.astro
@@ -4,6 +4,7 @@
             <canvas id="background"></canvas>
             <canvas id="entities"></canvas>
             <canvas id="foreground"></canvas>
+            <canvas id="entities-mask"></canvas>
             <canvas id="cursor"></canvas>
             <canvas id="overlay"></canvas>
             <canvas id="text-canvas"></canvas>
diff --git a/packages/client/data/sprites.json b/packages/client/data/sprites.json
index 745ab5c82c..35dc0d0f08 100755
--- a/packages/client/data/sprites.json
+++ b/packages/client/data/sprites.json
@@ -6019,8 +6019,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/firearrow",
@@ -6031,8 +6031,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -16,
+        "offsetY": -8
     },
     {
         "id": "projectiles/poisonarrow",
@@ -6043,8 +6043,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/icearrow",
@@ -6055,8 +6055,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/lightningarrow",
@@ -6067,8 +6067,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/nisocarrow",
@@ -6079,8 +6079,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/cinnabararrow",
@@ -6091,8 +6091,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/pythararrow",
@@ -6103,8 +6103,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/iboarrow",
@@ -6115,8 +6115,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/none",
diff --git a/packages/client/scss/game/impl/_container.scss b/packages/client/scss/game/impl/_container.scss
index 4e31783832..350696854c 100644
--- a/packages/client/scss/game/impl/_container.scss
+++ b/packages/client/scss/game/impl/_container.scss
@@ -18,7 +18,8 @@
 #foreground,
 #cursor,
 #text-canvas,
-#overlay {
+#overlay,
+#entities-mask {
     position: absolute;
     transform: translateZ(0);
     margin: 0;
diff --git a/packages/client/src/renderer/renderer.ts b/packages/client/src/renderer/renderer.ts
index 575e330cba..0b47924b37 100644
--- a/packages/client/src/renderer/renderer.ts
+++ b/packages/client/src/renderer/renderer.ts
@@ -57,6 +57,7 @@ export default class Renderer {
     protected textCanvas = document.querySelector<HTMLCanvasElement>('#text-canvas')!;
     protected entities = document.querySelector<HTMLCanvasElement>('#entities')!;
     protected cursor = document.querySelector<HTMLCanvasElement>('#cursor')!;
+    protected entitiesMask = document.querySelector<HTMLCanvasElement>('#entities-mask')!;
 
     // Store all canvases for easy iteration
     protected canvases: HTMLCanvasElement[] = [
@@ -65,7 +66,8 @@ export default class Renderer {
         this.overlay,
         this.textCanvas,
         this.entities,
-        this.cursor
+        this.cursor,
+        this.entitiesMask
     ];
 
     // Create the contexts based on the canvases.
@@ -73,16 +75,23 @@ export default class Renderer {
     protected overlayContext: CanvasRenderingContext2D = this.overlay.getContext('2d')!;
     protected textContext: CanvasRenderingContext2D = this.textCanvas.getContext('2d')!;
     protected cursorContext: CanvasRenderingContext2D = this.cursor.getContext('2d')!;
+    protected entitiesMaskContext: CanvasRenderingContext2D = this.entitiesMask.getContext('2d')!;
 
     protected allContexts = [
         this.entitiesContext,
         this.overlayContext,
         this.textContext,
-        this.cursorContext
+        this.cursorContext,
+        this.entitiesMaskContext
     ];
 
     // We split contexts into two arrays, one for tilemap rendering and one for the rest.
-    protected contexts = [this.entitiesContext, this.textContext, this.overlayContext];
+    protected contexts = [
+        this.entitiesContext,
+        this.textContext,
+        this.overlayContext,
+        this.entitiesMaskContext
+    ];
 
     // Zooming buttons
     private zoomIn: HTMLElement = document.querySelector('#zoom-in')!;
@@ -383,6 +392,9 @@ export default class Renderer {
 
             this.drawEntity(entity);
         });
+
+        this.entitiesMaskContext.globalAlpha = 0.3;
+        this.entitiesMaskContext.drawImage(this.entities, 0, 0);
     }
 
     /**