From 1a639c51e1b8adfb01bb4d912ecfc5300265e8a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 11 Jan 2026 13:46:54 -0600
Subject: [PATCH] feat: update backgrounds

---
 packages/website-ue/src/core/api/abstract.ts  | 68 ++++++++++++-------
 packages/website-ue/src/core/api/server.ts    | 27 ++++++--
 .../pages/[...locale]/backgrounds/index.astro | 26 ++++---
 .../website-ue/src/protos/background.proto    | 14 ++++
 .../website-ue/src/protos/backgrounds.proto   |  9 +++
 5 files changed, 102 insertions(+), 42 deletions(-)
 create mode 100644 packages/website-ue/src/protos/background.proto
 create mode 100644 packages/website-ue/src/protos/backgrounds.proto

diff --git a/packages/website-ue/src/core/api/abstract.ts b/packages/website-ue/src/core/api/abstract.ts
index cebdfd64b..899967a85 100644
--- a/packages/website-ue/src/core/api/abstract.ts
+++ b/packages/website-ue/src/core/api/abstract.ts
@@ -1,23 +1,14 @@
-import type { CatalogItemAccessor } from "@blitzkit/closed";
 import type { Strings } from "@blitzkit/i18n";
 import locales from "@blitzkit/i18n/locales.json";
 import type { Avatar } from "../../protos/avatar";
 import type { Avatars } from "../../protos/avatars";
+import type { Background } from "../../protos/background";
+import type { Backgrounds } from "../../protos/backgrounds";
 import type { Tank } from "../../protos/tank";
 import type { TankList } from "../../protos/tank_list";
 import type { Tanks } from "../../protos/tanks";
 
 export abstract class AbstractAPI {
-  private _tanksCache: Tanks | undefined;
-  protected abstract _tanks(): Promise<Tanks>;
-  async tanks() {
-    if (this._tanksCache === undefined) {
-      this._tanksCache = await this._tanks();
-    }
-
-    return this._tanksCache;
-  }
-
   private _tankListCache: TankList | undefined;
   protected abstract _tankList(): Promise<TankList>;
   async tankList() {
@@ -28,6 +19,26 @@ export abstract class AbstractAPI {
     return this._tankListCache;
   }
 
+  private _tankCache: Record<string, Tank> = {};
+  protected abstract _tank(id: string): Promise<Tank>;
+  async tank(id: string) {
+    if (this._tankCache[id] === undefined) {
+      this._tankCache[id] = await this._tank(id);
+    }
+
+    return this._tankCache[id];
+  }
+
+  private _tanksCache: Tanks | undefined;
+  protected abstract _tanks(): Promise<Tanks>;
+  async tanks() {
+    if (this._tanksCache === undefined) {
+      this._tanksCache = await this._tanks();
+    }
+
+    return this._tanksCache;
+  }
+
   private assertLocale(locale: string) {
     const supported = locales.supported.find(
       (supported) => supported.locale === locale
@@ -77,14 +88,14 @@ export abstract class AbstractAPI {
     return this._gameStringsCache[locale][prefix];
   }
 
-  private _tankCache: Record<string, Tank> = {};
-  protected abstract _tank(id: string): Promise<Tank>;
-  async tank(id: string) {
-    if (this._tankCache[id] === undefined) {
-      this._tankCache[id] = await this._tank(id);
+  private _avatarCache: Record<string, Avatar> = {};
+  protected abstract _avatar(id: string): Promise<Avatar>;
+  async avatar(id: string) {
+    if (this._avatarCache[id] === undefined) {
+      this._avatarCache[id] = await this._avatar(id);
     }
 
-    return this._tankCache[id];
+    return this._avatarCache[id];
   }
 
   private _avatarsCache: Avatars | undefined;
@@ -97,16 +108,23 @@ export abstract class AbstractAPI {
     return this._avatarsCache;
   }
 
-  private _avatarCache: Record<string, Avatar> = {};
-  protected abstract _avatar(id: string): Promise<Avatar>;
-  async avatar(id: string) {
-    if (this._avatarCache[id] === undefined) {
-      this._avatarCache[id] = await this._avatar(id);
+  private _backgroundCache: Record<string, Background> = {};
+  protected abstract _background(id: string): Promise<Background>;
+  async background(id: string) {
+    if (this._backgroundCache[id] === undefined) {
+      this._backgroundCache[id] = await this._background(id);
     }
 
-    return this._avatarCache[id];
+    return this._backgroundCache[id];
   }
 
-  abstract backgrounds(): Promise<CatalogItemAccessor[]>;
-  abstract background(id: string): Promise<CatalogItemAccessor>;
+  private _backgroundsCache: Backgrounds | undefined;
+  protected abstract _backgrounds(): Promise<Backgrounds>;
+  async backgrounds() {
+    if (this._backgroundsCache === undefined) {
+      this._backgroundsCache = await this._backgrounds();
+    }
+
+    return this._backgroundsCache;
+  }
 }
diff --git a/packages/website-ue/src/core/api/server.ts b/packages/website-ue/src/core/api/server.ts
index 604ea96d8..edf49de35 100644
--- a/packages/website-ue/src/core/api/server.ts
+++ b/packages/website-ue/src/core/api/server.ts
@@ -6,6 +6,7 @@ import type { RemoteStorageComponent } from "@protos/blitz_static_remote_storage
 import { merge } from "lodash-es";
 import { parse } from "yaml";
 import type { Avatar } from "../../protos/avatar";
+import type { Background } from "../../protos/background";
 import type { Tank } from "../../protos/tank";
 import type { TankListEntry } from "../../protos/tank_list";
 import type { Tanks } from "../../protos/tanks";
@@ -170,7 +171,7 @@ export class ServerAPI extends AbstractAPI {
     return { tank, compensation, slug } satisfies Tank;
   }
 
-  async _avatars() {
+  protected async _avatars() {
     const avatars: Avatar[] = [];
 
     for (const item of this.metadata.group("ProfileAvatarEntity")) {
@@ -180,7 +181,7 @@ export class ServerAPI extends AbstractAPI {
     return { avatars };
   }
 
-  async _avatar(id: string) {
+  protected async _avatar(id: string) {
     const avatar = this.metadata.item(`ProfileAvatarEntity.${id}`);
     const name = avatar.name;
     const stuff_ui = avatar.StuffUI("UIComponent");
@@ -192,11 +193,25 @@ export class ServerAPI extends AbstractAPI {
     return { name, stuff_ui, profile_avatar, sellable };
   }
 
-  async backgrounds() {
-    return this.metadata.group("ProfileBackgroundEntity");
+  protected async _backgrounds() {
+    const backgrounds: Background[] = [];
+
+    for (const item of this.metadata.group("ProfileBackgroundEntity")) {
+      backgrounds.push(await this.background(item.name));
+    }
+
+    return { backgrounds };
   }
 
-  async background(id: string) {
-    return this.metadata.item(`ProfileBackgroundEntity.${id}`);
+  protected async _background(id: string) {
+    const background = this.metadata.item(`ProfileBackgroundEntity.${id}`);
+    const name = background.name;
+    const stuff_ui = background.StuffUI("UIComponent");
+    const profile_background = background.ProfileBackground();
+    const sellable = background.components.sellableComponent
+      ? background.Sellable()
+      : undefined;
+
+    return { name, stuff_ui, profile_background, sellable };
   }
 }
diff --git a/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro b/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro
index 8d0526cc7..2ac6241e4 100644
--- a/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro
@@ -5,31 +5,35 @@ import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 export { getStaticPaths } from "../index.astro";
 
-const backgrounds = await api.backgrounds();
+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]}{" "}
+            {background.stuff_ui!.display_name}{" "}
+            {Grade[background.stuff_ui!.grade]}{" "}
           </h3>
 
-          <pre>{JSON.stringify(profileBackground, null, 2)}</pre>
+          <pre>{JSON.stringify(background.profile_background, null, 2)}</pre>
 
-          {ui.description && <p>{ui.description}</p>}
-          {ui.obtaining_methods && <p>{ui.obtaining_methods}</p>}
-          {ui.features && <p>{ui.features}</p>}
+          {background.stuff_ui!.description && (
+            <p>{background.stuff_ui!.description}</p>
+          )}
+          {background.stuff_ui!.obtaining_methods && (
+            <p>{background.stuff_ui!.obtaining_methods}</p>
+          )}
+          {background.stuff_ui!.features && (
+            <p>{background.stuff_ui!.features}</p>
+          )}
 
           <img width="128" src={`/api/backgrounds/${background.name}.webp`} />
 
-          {background.components.sellableComponent && (
-            <pre>{JSON.stringify(background.Sellable(), null, 2)}</pre>
+          {background.sellable && (
+            <pre>{JSON.stringify(background.sellable, null, 2)}</pre>
           )}
 
           <br />
diff --git a/packages/website-ue/src/protos/background.proto b/packages/website-ue/src/protos/background.proto
new file mode 100644
index 000000000..d017dcdfd
--- /dev/null
+++ b/packages/website-ue/src/protos/background.proto
@@ -0,0 +1,14 @@
+syntax = "proto3";
+
+package blitzkit;
+
+import "blitz_static_profile_background_component.proto";
+import "blitz_static_sellable_component.proto";
+import "blitz_static_stuff_ui_component.proto";
+
+message Background {
+  string name = 1;
+  blitz_static_stuff_ui_component.StuffUIComponent stuff_ui = 2;
+  blitz_static_profile_background_component.ProfileBackgroundComponent profile_background = 3;
+  optional blitz_static_sellable_component.SellableComponent sellable = 4;
+}
\ No newline at end of file
diff --git a/packages/website-ue/src/protos/backgrounds.proto b/packages/website-ue/src/protos/backgrounds.proto
new file mode 100644
index 000000000..058a37ff9
--- /dev/null
+++ b/packages/website-ue/src/protos/backgrounds.proto
@@ -0,0 +1,9 @@
+syntax = "proto3";
+
+package blitzkit;
+
+import "background.proto";
+
+message Backgrounds {
+  repeated Background backgrounds = 1;
+}
\ No newline at end of file