feat: client side game strings

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

@@ -1,3 +1,5 @@
+import { api } from "../../core/api/dynamic";
+import { useAwait } from "../../hooks/useAwait";
 import type { Avatar } from "../../protos/avatar";
 import { Text } from "../Text";
 import "./index.css";
@@ -7,13 +9,22 @@ interface Props {
 }
 
 export function AvatarCard({ avatar }: Props) {
+  // const { locale } = useLocale();
+  const { locale } = { locale: "en" };
+  const profileAvatarEntityStrings = useAwait(
+    () => api.groupedGameStrings(locale, "ProfileAvatarEntity"),
+    "profile-avatar-entity-strings"
+  );
+
   return (
     <div className="avatar-card">
       <div
         className="avatar-image"
         style={{ backgroundImage: `url(/api/avatars/${avatar.name}.webp)` }}
       />
-      <Text className="avatar-label">{avatar.name}</Text>
+      <Text align="center" className="avatar-label">
+        {profileAvatarEntityStrings[avatar.stuff_ui!.display_name]}
+      </Text>
     </div>
   );
 }