From ea412086d40267fb10606ab9173a0408a2efb211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 12 Jan 2026 14:13:21 -0600
Subject: [PATCH] feat: start of avatars

---
 .../src/components/AvatarCard/index.css       | 19 +++++++++++++++++++
 .../src/components/AvatarCard/index.tsx       | 19 +++++++++++++++++++
 packages/website-ue/src/core/api/client.ts    | 16 +++-------------
 .../src/pages/[...locale]/avatars/_index.tsx  | 16 +++++++++++++++-
 .../src/pages/[...locale]/avatars/index.astro |  8 ++++++++
 .../src/pages/api/avatars/all.json.ts         |  2 +-
 .../src/pages/api/avatars/all.pb.ts           |  7 +++++++
 7 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 packages/website-ue/src/components/AvatarCard/index.css
 create mode 100644 packages/website-ue/src/components/AvatarCard/index.tsx
 create mode 100644 packages/website-ue/src/pages/api/avatars/all.pb.ts

diff --git a/packages/website-ue/src/components/AvatarCard/index.css b/packages/website-ue/src/components/AvatarCard/index.css
new file mode 100644
index 000000000..aba12f507
--- /dev/null
+++ b/packages/website-ue/src/components/AvatarCard/index.css
@@ -0,0 +1,19 @@
+.avatar-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .avatar-image {
+    width: 100%;
+    aspect-ratio: 7 / 8;
+
+    background-size: cover;
+    background-position: center;
+  }
+
+  .avatar-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/packages/website-ue/src/components/AvatarCard/index.tsx b/packages/website-ue/src/components/AvatarCard/index.tsx
new file mode 100644
index 000000000..5ec82fe24
--- /dev/null
+++ b/packages/website-ue/src/components/AvatarCard/index.tsx
@@ -0,0 +1,19 @@
+import type { Avatar } from "../../protos/avatar";
+import { Text } from "../Text";
+import "./index.css";
+
+interface Props {
+  avatar: Avatar;
+}
+
+export function AvatarCard({ avatar }: Props) {
+  return (
+    <div className="avatar-card">
+      <div
+        className="avatar-image"
+        style={{ backgroundImage: `url(/api/avatars/${avatar.name}.webp)` }}
+      />
+      <Text className="avatar-label">{avatar.name}</Text>
+    </div>
+  );
+}
diff --git a/packages/website-ue/src/core/api/client.ts b/packages/website-ue/src/core/api/client.ts
index 8069107f9..a1ca86ed8 100644
--- a/packages/website-ue/src/core/api/client.ts
+++ b/packages/website-ue/src/core/api/client.ts
@@ -1,19 +1,9 @@
 import { fetchPB } from "@blitzkit/core";
-import { Tank } from "../../protos/tank";
-import { TankList } from "../../protos/tank_list";
-import { Tanks } from "../../protos/tanks";
+import { Avatars } from "../../protos/avatars";
 import { AbstractAPI } from "./abstract";
 
 export class ClientAPI extends AbstractAPI {
-  tanks() {
-    return fetchPB("/api/tanks/all.pb", Tanks);
-  }
-
-  tankList() {
-    return fetchPB("/api/tanks/list.pb", TankList);
-  }
-
-  tank(id: string) {
-    return fetchPB(`/api/tanks/${id}.pb`, Tank);
+  protected _avatars() {
+    return fetchPB("/api/avatars/all.pb", Avatars);
   }
 }
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx b/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
index df36c2f41..d8e0f0b2b 100644
--- a/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
@@ -1,5 +1,19 @@
+import { AvatarCard } from "../../../components/AvatarCard";
+import { api } from "../../../core/api/dynamic";
+import { useAwait } from "../../../hooks/useAwait";
+
 interface Props {
   skeleton?: boolean;
 }
 
-export function Page({ skeleton }: Props) {}
+export function Page({ skeleton }: Props) {
+  const { avatars } = useAwait(() => api.avatars(), "avatars");
+
+  return (
+    <div className="avatars">
+      {avatars.map((avatar) => (
+        <AvatarCard key={avatar.name} avatar={avatar} />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/index.astro b/packages/website-ue/src/pages/[...locale]/avatars/index.astro
index 0b4b1179a..b459b4f82 100644
--- a/packages/website-ue/src/pages/[...locale]/avatars/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/avatars/index.astro
@@ -7,6 +7,14 @@ export { getStaticPaths } from "../index.astro";
 const { locale } = Astro.props;
 ---
 
+<style is:global>
+  .avatars {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--space-7), 1fr));
+    gap: var(--space-4);
+  }
+</style>
+
 <BaseLayout {locale} accent="gold">
   <Page client:only="react">
     <Page skeleton slot="fallback" />
diff --git a/packages/website-ue/src/pages/api/avatars/all.json.ts b/packages/website-ue/src/pages/api/avatars/all.json.ts
index d112c5a09..6f88b1564 100644
--- a/packages/website-ue/src/pages/api/avatars/all.json.ts
+++ b/packages/website-ue/src/pages/api/avatars/all.json.ts
@@ -1,6 +1,6 @@
 import { api } from "../../../core/api/dynamic";
 
 export async function GET() {
-  const { avatars } = await api.avatars();
+  const avatars = await api.avatars();
   return Response.json(avatars);
 }
diff --git a/packages/website-ue/src/pages/api/avatars/all.pb.ts b/packages/website-ue/src/pages/api/avatars/all.pb.ts
new file mode 100644
index 000000000..f93f9afb1
--- /dev/null
+++ b/packages/website-ue/src/pages/api/avatars/all.pb.ts
@@ -0,0 +1,7 @@
+import { api } from "../../../core/api/dynamic";
+import { Avatars } from "../../../protos/avatars";
+
+export async function GET() {
+  const avatars = await api.avatars();
+  return new Response(Avatars.encode(avatars).finish());
+}