feat: groups

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

@@ -4,15 +4,20 @@
   align-items: center;
   gap: var(--space-4);
 
-  .avatar-image {
+  .avatar-series {
+    position: relative;
     width: 100%;
     aspect-ratio: 7 / 8;
-    border-radius: var(--space-3);
 
-    background-size: cover;
-    background-position: center;
+    .avatar-entry {
+      position: absolute;
 
-    box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
+      border-radius: var(--space-3);
+      box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
+
+      background-size: cover;
+      background-position: center;
+    }
   }
 
   .avatar-label {

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

@@ -1,27 +1,50 @@
-import { useGameStrings } from "../../hooks/useGameStrings";
 import type { Avatar } from "../../protos/avatar";
 import type { SkeletonProps } from "../../types/SkeletonProps";
 import { Text } from "../Text";
 import "./index.css";
 
-export function AvatarCard(props: SkeletonProps<Avatar>) {
-  const profileAvatarEntityStrings = useGameStrings("ProfileAvatarEntity");
+interface Props {
+  name: string;
+  avatars: Avatar[];
+}
 
+const MAX_CARDS = 3;
+const CARD_TRIM = "var(--space-3)";
+
+export function AvatarCard(props: SkeletonProps<Props>) {
   return (
     <div className="avatar-card">
-      <div
-        className="avatar-image"
-        style={{
-          backgroundImage: props.skeleton
-            ? undefined
-            : `url(/api/avatars/${props.name}.webp)`,
-        }}
-      />
+      {!props.skeleton && <Series avatars={props.avatars} />}
+
       <Text align="center" className="avatar-label">
-        {props.skeleton
-          ? "LOADING"
-          : profileAvatarEntityStrings[props.stuff_ui!.display_name]}
+        {props.skeleton ? "LOADING" : props.name}
       </Text>
     </div>
   );
 }
+
+interface SeriesProps {
+  avatars: Avatar[];
+}
+
+function Series({ avatars }: SeriesProps) {
+  const count = Math.min(avatars.length, MAX_CARDS);
+
+  return (
+    <div className="avatar-series">
+      {avatars.slice(-MAX_CARDS).map((avatar, index) => (
+        <div
+          className="avatar-entry"
+          style={{
+            filter: `brightness(${(index + 1) / count})`,
+            top: `calc(${index} * ${CARD_TRIM})`,
+            left: `calc(${index} * ${CARD_TRIM})`,
+            width: `calc(100% - ${CARD_TRIM} * ${count - 1})`,
+            height: `calc(100% - ${CARD_TRIM} * ${count - 1})`,
+            backgroundImage: `url(/api/avatars/${avatar.name}.webp)`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}