fix(diff): make example image local

global.d.ts

@@ -17,3 +17,8 @@ declare module "*.jpg" {
   const file: string;
   export default file;
 }
+
+declare module "*.png" {
+  const file: string;
+  export default file;
+}

hmr.html

@@ -56,13 +56,16 @@
       <input id="threshold" type="range" min="0" max="120" value="85">
       <span id="thresholdText">85</span>
     </label>
+    <label>
+      time: <span id="timingText">Loading...</span><span style="color: gray;">(image load complete in browser)</span>
+    </label>
   </div>
 
   <canvas id="canvas" width="1870" height="778"></canvas>
 
   <script>
     const MINE = "/v1/card/genshin/775956514/ororon";
-    const ORIG = "https://media.discordapp.net/attachments/1234762106558218332/1500814127566684202/81a07207-4f8e-4adb-a3c3-dea113477246.png?ex=69f9cd93&is=69f87c13&hm=7708cde2a1161a7d0b26655902d29f93b297e54293725912e981e3e0701b37eb&=&format=webp&quality=lossless&width=1870&height=778";
+    const ORIG = "/v1/card/genshin/diff/ororo.png";
 
     const W = 1870, H = 778;
     /**
@@ -74,6 +77,7 @@
     const mode = document.getElementById("mode");
     const threshold = document.getElementById("threshold");
     const thresholdText = document.getElementById("thresholdText");
+    const timingText = document.getElementById("timingText");
 
     let mineData, origData, refreshing = false;
 
@@ -102,18 +106,24 @@
       ctx.fillStyle = "#00000088";
       ctx.fillRect(0, 0, W, H);
       ctx.fillStyle = "white";
-      ctx.fillText("fetching...", 20, 30);
+      let line = 30;
+      function log(text) {
+        ctx.fillText(text, 20, line);
+        line += 16;
+      }
+      log("fetching...");
 
+      const start = Date.now();
       const [mineImg, origImg] = await Promise.all([
-        loadImage(MINE),
+        loadImage(MINE).finally(() => timingText.innerText = `${Date.now() - start}ms`),
         loadImage(ORIG),
       ]);
 
-      ctx.fillText("loading...", 20, 46);
+      log("loading...");
       mineData = drawToData(mineImg);
       if (!origData) origData = drawToData(origImg);
 
-      ctx.fillText("rendering...", 20, 62);
+      log("rendering...");
       render();
       refreshing = false;
     }

src/v1/card.tsx

@@ -20,6 +20,7 @@ import { featherImage } from "@/assets/feather";
 import { font, iconFont, sansFont } from "@/assets/fonts";
 import { EnkaIcon } from "@/assets/icons";
 import type { library } from "@/assets/icons-library";
+import DiffPageExample from "@/assets/ororo.png" with { type: "file" };
 import shadeSvg from "@/assets/shade.svg" with { type: "file" };
 import { star } from "@/assets/stars";
 import { TalentSvg } from "@/assets/talent";
@@ -73,6 +74,7 @@ export function card(app: App) {
           log: createLogger(),
         }))
         .get("/genshin/diff", DiffPage)
+        .get("/genshin/diff/ororo.png", () => file(DiffPageExample))
         .head(
           "/genshin/:uid/preload",
           async ({ params: { uid }, log }) => {

src/v1/endfield.tsx

@@ -0,0 +1,45 @@
+import type { App } from "@";
+import { status } from "elysia";
+import { TTLCache, fetchEnka } from "enka.ts";
+
+import { batchStore } from "@/lib/assets";
+import { Deduplicator } from "@/lib/dedupe";
+import { createLogger } from "@/lib/logger";
+
+const uidRegex = /^\d{10}$/;
+
+const cache = new TTLCache();
+const deduper = new Deduplicator();
+
+export function endfieldCard<A extends App>(app: A) {
+  return app.group("/endfield/:uid", (app) =>
+    app
+      .derive(() => ({
+        log: createLogger(),
+      }))
+      .head("/preload", async ({ params: { uid }, log }) => {
+        log`Preloading ${uid}`;
+        try {
+          await Promise.all([
+            deduper.acquire("stores", () =>
+              batchStore(
+                "avatars",
+                "locs",
+                "relics",
+                "weapons",
+                "pfps",
+                "affixes",
+              ).finally(() => log`Stores loaded`),
+            ),
+            deduper.acquire(`enka-${uid}`, () =>
+              fetchEnka(uid, false).finally(() => log`Enka data loaded`),
+            ),
+          ]);
+
+          return "OK";
+        } catch {
+          return status(502, "Data Preload Error");
+        }
+      }),
+  );
+}