diff --git a/packages/website-ue/src/components/AvatarCard/index.tsx b/packages/website-ue/src/components/AvatarCard/index.tsx
index 5ec82fe24..316848e87 100644
--- a/packages/website-ue/src/components/AvatarCard/index.tsx
+++ b/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 (
-
{avatar.name}
+
+ {profileAvatarEntityStrings[avatar.stuff_ui!.display_name]}
+
);
}
diff --git a/packages/website-ue/src/components/Text/index.css b/packages/website-ue/src/components/Text/index.css
index c2b4eb0e7..b716e926b 100644
--- a/packages/website-ue/src/components/Text/index.css
+++ b/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;
+ }
}
diff --git a/packages/website-ue/src/components/Text/index.tsx b/packages/website-ue/src/components/Text/index.tsx
index 0a1f05733..ef76eefb5 100644
--- a/packages/website-ue/src/components/Text/index.tsx
+++ b/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}
/>
);
diff --git a/packages/website-ue/src/core/api/abstract.ts b/packages/website-ue/src/core/api/abstract.ts
index abebe26bf..ca154671a 100644
--- a/packages/website-ue/src/core/api/abstract.ts
+++ b/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>;
- 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];
diff --git a/packages/website-ue/src/core/api/client.ts b/packages/website-ue/src/core/api/client.ts
index a1ca86ed8..fb8ec176f 100644
--- a/packages/website-ue/src/core/api/client.ts
+++ b/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> {
+ 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;
+
+ if (!prefix) return json;
+
+ const strings: Record = {};
+
+ for (const key in json) {
+ strings[`${group}__${key}`] = json[key];
+ }
+
+ return strings;
+ }
}
diff --git a/packages/website-ue/src/core/api/server.ts b/packages/website-ue/src/core/api/server.ts
index 55a2b23f9..34a4ddb72 100644
--- a/packages/website-ue/src/core/api/server.ts
+++ b/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 = {};
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];
}
}
diff --git a/packages/website-ue/src/pages/api/game-strings/[locale]/[group].json.ts b/packages/website-ue/src/pages/api/game-strings/[locale]/[group].json.ts
index e4ec3459c..458d1262a 100644
--- a/packages/website-ue/src/pages/api/game-strings/[locale]/[group].json.ts
+++ b/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);
}