equipment icons

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -12,7 +12,6 @@ import {
 import { chunk } from "lodash-es";
 import { useMemo } from "react";
 import { equipmentColumns } from "../../config/equipment";
-import { catImages } from "../../config/images";
 import {
   alternativeLines,
   isAlternativeLine,
@@ -148,6 +147,10 @@ function EquipmentOption({
   columnIndex,
 }: EquipmentOptionProps) {
   const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
+  const tank = useProtagonist();
+  const equipment = useEquipment(tank.tank!);
+  const slot = equipment.preset.slots[equipmentIndex];
+  const id = slot.options_catalog_i_ds[optionIndex];
 
   const isSelected = Tankopedia.use(
     (state) =>
@@ -172,7 +175,7 @@ function EquipmentOption({
         });
       }}
     >
-      <img src={catImages.squareTransparent} />
+      <img src={`/media/equipment/${id}.webp`} />
     </Button>
   );
 }

packages/website-ue/src/game/game.ts

@@ -6,7 +6,11 @@ let _game: GameInterface | null = null;
 
 if (!clientUnmounted) {
   const { GameInterface } = await import("@blitzkit/game");
-  _game = new GameInterface(assertSecret(import.meta.env.PUBLIC_WOTB_CLIENT));
+  _game = new GameInterface(
+    assertSecret(import.meta.env.PUBLIC_WOTB_CLIENT),
+    assertSecret(import.meta.env.WOTB_USMAP),
+    "../../temp",
+  );
 }
 
 export const game = _game;

packages/website-ue/src/pages/[media]/_index.ts

@@ -0,0 +1,7 @@
+import type { GetStaticPaths } from "astro";
+import { isChunkEnabled } from "../../astro/isChunkEnabled";
+
+export const getStaticPaths = (() => {
+  if (!isChunkEnabled("media")) return [];
+  return [{ params: { media: "media" } }];
+}) satisfies GetStaticPaths;

packages/website-ue/src/pages/[media]/equipment/[id].webp.ts

@@ -0,0 +1,40 @@
+import type { APIContext } from "astro";
+import { api } from "../../../api/dynamic";
+import { notFoundResponse } from "../../../api/responses";
+import { mixStaticPaths } from "../../../astro/mixStaticPaths";
+import { game } from "../../../game/game";
+import { getStaticPaths as _getStaticPaths } from "../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
+  return api.metadata
+    .group("EquipmentEntity")
+    .map(({ id }) => ({ params: { id } }));
+});
+
+const HACK_nameMap: Record<string, string> = {
+  SystemsFineTuning: "SystemFineTuning",
+};
+
+export function GET({ params }: APIContext<never, { id: string }>) {
+  const item = api.metadata.item(params.id);
+  const assetDiscovery = item.BlitzStaticAssetsDiscovery();
+  const names = assetDiscovery.required_tags!.tags.map(
+    (tag) => tag.value.split(".").at(-1)!,
+  );
+
+  for (const name of names) {
+    if (name in HACK_nameMap) {
+      names.push(HACK_nameMap[name]);
+    }
+  }
+
+  const icon = game!.equipmentIcon(names);
+
+  if (icon.length === 0) {
+    return notFoundResponse;
+  }
+
+  const array = new Uint8Array(icon);
+
+  return new Response(array);
+}