From 4c16878214bed94f633663d0357bf0440401fdbd Mon Sep 17 00:00:00 2001
From: 7c00 <i@7c00.cc>
Date: Mon, 23 Oct 2023 13:29:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E4=B8=80=E5=B1=82=E9=98=B4=E5=BD=B1?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E8=B4=A8=E6=84=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/area-picker.tsx              |  2 +-
 src/genshin-map/index.tsx        |  2 ++
 src/genshin-map/shadow-layer.tsx | 37 ++++++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/genshin-map/shadow-layer.tsx

diff --git a/src/area-picker.tsx b/src/area-picker.tsx
index 9994db4..774ccb1 100644
--- a/src/area-picker.tsx
+++ b/src/area-picker.tsx
@@ -39,7 +39,7 @@ export function AreaPicker() {
     return null;
   }
 
-  const iconClassName = "w-8 h-8 md:w-10 md:h-10 text-white";
+  const iconClassName = "w-8 h-8 text-white";
   return (
     <>
       <div
diff --git a/src/genshin-map/index.tsx b/src/genshin-map/index.tsx
index 9664dd8..88afd88 100644
--- a/src/genshin-map/index.tsx
+++ b/src/genshin-map/index.tsx
@@ -6,6 +6,7 @@ import { ActiveMarkerLayer } from "./active-marker-layer";
 import { AreaItemLayer } from "./area-item-layer";
 import { AreaNamesLayer } from "./area-names-layer";
 import { Settings } from "./settings";
+import { ShadowLayer } from "./shadow-layer";
 import { onTilemapClick, onTilemapMove, onTilemapReady } from "./state";
 import { TeleportLayer } from "./teleport-layer";
 import { UndergroundLayer } from "./underground-layer";
@@ -46,6 +47,7 @@ export function GenshinMap() {
       <UndergroundLayer />
       <TeleportLayer />
       <AreaNamesLayer />
+      <ShadowLayer />
     </CanvaskitMap>
   );
 }
diff --git a/src/genshin-map/shadow-layer.tsx b/src/genshin-map/shadow-layer.tsx
new file mode 100644
index 0000000..25b32f3
--- /dev/null
+++ b/src/genshin-map/shadow-layer.tsx
@@ -0,0 +1,37 @@
+import { Layer } from "@canvaskit-map/core";
+import { CustomLayer } from "@canvaskit-map/react";
+import { Canvas, Paint } from "canvaskit-wasm";
+import { zIndex } from ".";
+
+class _ShadowLayer extends Layer {
+  _paint?: Paint;
+
+  constructor() {
+    super({ zIndex: zIndex.underground });
+  }
+
+  async init() {
+    this._paint = new this.canvaskit!.Paint();
+    this._paint!.setShader(
+      this.canvaskit!.Shader.MakeRadialGradient(
+        [this.map!.size[0] / 2, this.map!.size[1] / 2],
+        Math.max(...this.map!.size),
+        [this.canvaskit!.TRANSPARENT, this.canvaskit!.BLACK],
+        [0.1, 1],
+        this.canvaskit!.TileMode.Clamp
+      )
+    );
+  }
+
+  draw(canvas: Canvas) {
+    canvas.save();
+    canvas.concat(this.canvaskit!.Matrix.invert(canvas.getTotalMatrix())!);
+    canvas.scale(devicePixelRatio, devicePixelRatio);
+    canvas.drawPaint(this._paint!);
+    canvas.restore();
+  }
+}
+
+export function ShadowLayer() {
+  return <CustomLayer createLayer={() => new _ShadowLayer()} />;
+}