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>
   );
 }

packages/website-ue/src/components/Text/index.css

@@ -4,7 +4,6 @@
   &[data-size="minor"] {
     font-size: var(--font-size-minor);
   }
-
   &[data-size="major"] {
     font-size: var(--font-size-major);
   }
@@ -12,20 +11,23 @@
   &[data-weight="light"] {
     font-weight: var(--weight-light);
   }
-
   &[data-weight="regular"] {
     font-weight: var(--weight-regular);
   }
-
   &[data-weight="medium"] {
     font-weight: var(--weight-medium);
   }
-
   &[data-weight="bold"] {
     font-weight: var(--weight-bold);
   }
-
   &[data-weight="black"] {
     font-weight: var(--weight-black);
   }
+
+  &[data-align="center"] {
+    text-align: center;
+  }
+  &[data-align="right"] {
+    text-align: right;
+  }
 }

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

@@ -8,6 +8,7 @@ export interface TextProps extends ComponentProps<"span"> {
   weight?: "light" | "regular" | "medium" | "bold" | "black";
   lowContrast?: boolean;
   size?: "regular" | "minor" | "major";
+  align?: "left" | "center" | "right";
 }
 
 export function Text({
@@ -17,6 +18,7 @@ export function Text({
   size = "regular",
   weight,
   style,
+  align,
   ...props
 }: TextProps) {
   return (
@@ -25,6 +27,7 @@ export function Text({
       style={{ color: `var(--${color}-${lowContrast ? 11 : 12})`, ...style }}
       data-size={size}
       data-weight={weight}
+      data-align={align === "left" ? undefined : align}
       {...props}
     />
   );

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

@@ -83,9 +83,10 @@ export abstract class AbstractAPI {
   > = {};
   protected abstract _groupedGameStrings(
     locale: string,
-    group: string
+    group: string,
+    prefix: boolean
   ): Promise<Record<string, string>>;
-  async groupedGameStrings(locale: string, group: string) {
+  async groupedGameStrings(locale: string, group: string, prefix = true) {
     this.assertLocale(locale);
 
     if (this._groupedGameStringsCache[locale] === undefined) {
@@ -94,7 +95,7 @@ export abstract class AbstractAPI {
 
     if (this._groupedGameStringsCache[locale][group] === undefined) {
       this._groupedGameStringsCache[locale][group] =
-        await this._groupedGameStrings(locale, group);
+        await this._groupedGameStrings(locale, group, prefix);
     }
 
     return this._groupedGameStringsCache[locale][group];

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

@@ -6,4 +6,27 @@ export class ClientAPI extends AbstractAPI {
   protected _avatars() {
     return fetchPB("/api/avatars/all.pb", Avatars);
   }
+
+  protected _gameStrings(): Promise<Record<string, string>> {
+    throw new Error("Cannot fetch full game strings on client");
+  }
+
+  protected async _groupedGameStrings(
+    locale: string,
+    group: string,
+    prefix: boolean
+  ) {
+    const response = await fetch(`/api/game-strings/${locale}/${group}.json`);
+    const json = (await response.json()) as Record<string, string>;
+
+    if (!prefix) return json;
+
+    const strings: Record<string, string> = {};
+
+    for (const key in json) {
+      strings[`${group}__${key}`] = json[key];
+    }
+
+    return strings;
+  }
 }

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

@@ -101,14 +101,17 @@ export class ServerAPI extends AbstractAPI {
     return strings;
   }
 
-  protected async _groupedGameStrings(locale: string, group: string) {
+  protected async _groupedGameStrings(
+    locale: string,
+    group: string,
+    prefix: boolean
+  ) {
     const strings = await this.gameStrings(locale);
     const filtered: Record<string, string> = {};
 
     for (const key in strings) {
       if (key.startsWith(`${group}__`)) {
-        const trimmed = key.substring(group.length + 2);
-        filtered[trimmed] = strings[key];
+        filtered[prefix ? key : key.substring(group.length + 2)] = strings[key];
       }
     }
 

packages/website-ue/src/pages/api/game-strings/[locale]/[group].json.ts

@@ -20,6 +20,10 @@ export async function GET({
 }: {
   params: { locale: string; group: string };
 }) {
-  const strings = await api.groupedGameStrings(params.locale, params.group);
+  const strings = await api.groupedGameStrings(
+    params.locale,
+    params.group,
+    false
+  );
   return Response.json(strings);
 }