feat: client side game strings

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