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