feat: backgrounds

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

@@ -17,4 +17,7 @@ export abstract class AbstractAPI {
 
   abstract avatars(): Promise<CatalogItemAccessor[]>;
   abstract avatar(id: string): Promise<CatalogItemAccessor>;
+
+  abstract backgrounds(): Promise<CatalogItemAccessor[]>;
+  abstract background(id: string): Promise<CatalogItemAccessor>;
 }

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

@@ -154,4 +154,12 @@ export class ServerAPI extends AbstractAPI {
   async avatar(id: string) {
     return this.metadata.item(`ProfileAvatarEntity.${id}`);
   }
+
+  async backgrounds() {
+    return this.metadata.group("ProfileBackgroundEntity");
+  }
+
+  async background(id: string) {
+    return this.metadata.item(`ProfileBackgroundEntity.${id}`);
+  }
 }

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

@@ -17,10 +17,17 @@ export const tools: Record<string, Tool> = {
     button: "purple",
     significant: true,
   },
+
   avatars: {
     id: "avatars",
     button: "gold",
   },
+
+  backgrounds: {
+    id: "backgrounds",
+    button: "amber",
+  },
+
   api: {
     id: "api",
     disabled: true,

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

@@ -0,0 +1,27 @@
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (async () => {
+  const backgrounds = await api.backgrounds();
+
+  return backgrounds.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.background(params.id);
+  const profileBackground = avatar.ProfileBackground();
+
+  if (import.meta.env.DEV) {
+    return Response.redirect(profileBackground.background);
+  }
+
+  const response = await fetch(profileBackground.background);
+  const buffer = await response.arrayBuffer();
+
+  return new Response(buffer);
+}

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

@@ -0,0 +1,38 @@
+---
+import { Grade } from "@protos/blitz_static_standard_grades_enum";
+import { api } from "../../core/api/dynamic";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+const backgrounds = await api.backgrounds();
+---
+
+<BaseLayout accent="amber">
+  {
+    backgrounds.map((background) => {
+      const ui = background.StuffUI("UIComponent");
+      const profileBackground = background.ProfileBackground();
+
+      return (
+        <>
+          <h3>
+            {ui.display_name} {Grade[ui.grade]}{" "}
+          </h3>
+
+          <pre>{JSON.stringify(profileBackground, null, 2)}</pre>
+
+          {ui.description && <p>{ui.description}</p>}
+          {ui.obtaining_methods && <p>{ui.obtaining_methods}</p>}
+          {ui.features && <p>{ui.features}</p>}
+
+          <img width="128" src={`/api/backgrounds/${background.name}.webp`} />
+
+          {background.components.sellableComponent && (
+            <pre>{JSON.stringify(background.Sellable(), null, 2)}</pre>
+          )}
+
+          <br />
+        </>
+      );
+    })
+  }
+</BaseLayout>