feat: proxy avatars

packages/website-ue/src/core/api/abstract.ts

@@ -16,4 +16,5 @@ export abstract class AbstractAPI {
   abstract tank(id: string): Promise<Tank>;
 
   abstract avatars(): Promise<CatalogItemAccessor[]>;
+  abstract avatar(id: string): Promise<CatalogItemAccessor>;
 }

packages/website-ue/src/core/api/client.ts

@@ -6,7 +6,7 @@ import { AbstractAPI } from "./abstract";
 
 export class ClientAPI extends AbstractAPI {
   tanks() {
-    return fetchPB("/api/tanks.pb", Tanks);
+    return fetchPB("/api/tanks/all.pb", Tanks);
   }
 
   tankList() {

packages/website-ue/src/core/api/server.ts

@@ -150,4 +150,8 @@ export class ServerAPI extends AbstractAPI {
   async avatars() {
     return this.metadata.group("ProfileAvatarEntity");
   }
+
+  async avatar(id: string) {
+    return this.metadata.item(`ProfileAvatarEntity.${id}`);
+  }
 }

packages/website-ue/src/core/tools/tools.ts

@@ -17,66 +17,13 @@ export const tools: Record<string, Tool> = {
     button: "purple",
     significant: true,
   },
-  players: {
+  avatars: {
-    id: "players",
+    id: "avatars",
-    disabled: true,
-    button: "blue",
-  },
-  compare: {
-    id: "compare",
-    button: "crimson",
-  },
-  performance: {
-    id: "performance",
-    button: "jade",
-  },
-  charts: {
-    id: "charts",
-    disabled: true,
-    button: "bronze",
-  },
-  playlist: {
-    id: "playlist",
-    button: "tomato",
-  },
-  mixer: {
-    id: "mixer",
-    button: "gray",
-  },
-  guess: {
-    id: "guess",
-    button: "cyan",
-  },
-  gallery: {
-    id: "gallery",
     button: "gold",
   },
-  session: {
-    id: "session",
-    button: "blue",
-  },
-  discord: {
-    id: "discord",
-    href: "https://discord.com/application-directory/1097673957865443370",
-    button: "indigo",
-  },
-  tier_list: {
-    id: "tier-list",
-    strings: "tier_list",
-    button: "orange",
-  },
-  embed: {
-    id: "embed",
-    button: "red",
-  },
   api: {
     id: "api",
     disabled: true,
     button: "bronze",
   },
-  more: {
-    id: "more",
-    href: "https://discord.gg/nDt7AjGJQH",
-    button: "plum",
-  },
 };

packages/website-ue/src/pages/api/avatars/[id].webp.ts

@@ -0,0 +1,27 @@
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (async () => {
+  const avatars = await api.avatars();
+
+  return avatars.map((avatar) => ({
+    params: { id: avatar.name },
+  }));
+}) satisfies GetStaticPaths;
+
+/**
+ * One day I will write documentation for this
+ */
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const avatar = await api.avatar(params.id);
+  const profileAvatar = avatar.ProfileAvatar();
+
+  if (import.meta.env.DEV) {
+    return Response.redirect(profileAvatar.avatar);
+  }
+
+  const response = await fetch(profileAvatar.avatar);
+  const buffer = await response.arrayBuffer();
+
+  return new Response(buffer);
+}

packages/website-ue/src/pages/api/tanks/all.json.ts

@@ -1,4 +1,4 @@
-import { api } from "../../core/api/dynamic";
+import { api } from "../../../core/api/dynamic";
 
 /**
  * Literally all the tanks in one place lmao.

packages/website-ue/src/pages/api/tanks/all.pb.ts

@@ -1,5 +1,5 @@
-import { api } from "../../core/api/dynamic";
+import { api } from "../../../core/api/dynamic";
-import { Tanks } from "../../protos/tanks";
+import { Tanks } from "../../../protos/tanks";
 
 /**
  * Literally all the tanks in one place lmao.

packages/website-ue/src/pages/avatars/index.astro

@@ -24,7 +24,7 @@ const avatars = await api.avatars();
           {ui.obtaining_methods && <p>{ui.obtaining_methods}</p>}
           {ui.features && <p>{ui.features}</p>}
 
-          <img width="128" src={profileAvatar.avatar} />
+          <img width="128" src={`/api/avatars/${avatar.name}.webp`} />
 
           {avatar.components.sellableComponent && (
             <pre>{JSON.stringify(avatar.Sellable(), null, 2)}</pre>

packages/website-ue/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import "@radix-ui/colors/amber-dark.css";
 import packageJson from "../../../../package.json";
+import { tools } from "../core/tools/tools";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
@@ -9,9 +10,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
   <h1>blitzkit {packageJson.version}</h1>
 
-  <p><a href="/tanks">/tanks</a></p>
+  {
-
+    Object.values(tools).map((tool) => (
-  <p><a href="/avatars">/avatars</a></p>
+      <p>
-
+        <a href={`/${tool.id}`}>{tool.id}</a>
-  <p><a href="/api">/api</a></p>
+      </p>
+    ))
+  }
 </BaseLayout>