feat: remote and socket metadata and gallery

packages/website-ue/src/core/blitz/catalog.ts

@@ -1,6 +0,0 @@
-import { fetchMetadata } from '@blitzkit/closed';
-import { CatalogAccessor } from 'packages/core/src';
-
-export const catalog = new CatalogAccessor(
-  await fetchMetadata().then((data) => data.catalog_items),
-).injectBlitzkit();

packages/website-ue/src/core/blitz/metadata.remote.ts

@@ -0,0 +1,5 @@
+import { RemoteMetadataAccessor } from 'packages/core/src';
+
+export const remoteMetadata = new RemoteMetadataAccessor(
+  '/api/metadata/catalog',
+);

packages/website-ue/src/core/blitz/metadata.socket.ts

@@ -0,0 +1,6 @@
+import { fetchMetadata } from '@blitzkit/closed';
+import { SocketMetadataAccessor } from 'packages/core/src';
+
+export const socketMetadata = new SocketMetadataAccessor(
+  await fetchMetadata(),
+).injectBlitzkit();

packages/website-ue/src/core/blitz/metadata.ts

@@ -0,0 +1,13 @@
+import type { MetadataAccessor } from 'packages/core/src';
+import { remoteMetadata } from './metadata.remote';
+import { socketMetadata } from './metadata.socket';
+
+let accessor: MetadataAccessor;
+
+if (import.meta.env.SSR) {
+  accessor = socketMetadata;
+} else {
+  accessor = remoteMetadata;
+}
+
+export const metadata = accessor;

packages/website-ue/src/core/blitz/remoteCatalog.ts

@@ -1,4 +0,0 @@
-import { RemoteCatalogAccessor } from 'packages/core/src';
-import { api } from '../blitzkit/api';
-
-export const remoteCatalog = new RemoteCatalogAccessor(api('catalog'));

packages/website-ue/src/pages/[...locale]/gallery/_index.tsx

@@ -0,0 +1,55 @@
+import { ProfileAvatarComponent } from '@protos/blitz_static_profile_avatar_component';
+import { StuffUIComponent } from '@protos/blitz_static_stuff_ui_component';
+import { BlitzkitAllAvatarsComponent } from '@protos/blitzkit_static_all_avatars_component';
+import { Flex, Text } from '@radix-ui/themes';
+import { CatalogItemAccessor } from 'packages/core/src/blitz/catalogItemAccessor';
+import { metadata } from 'packages/website-ue/src/core/blitz/metadata';
+import { Var } from 'packages/website-ue/src/core/radix/var';
+
+const allAvatars = await metadata
+  .get('BlitzkitAllAvatarsEntity.blitzkit_all_avatars')
+  .then(
+    (entity) =>
+      entity.get(BlitzkitAllAvatarsComponent, 'blitzkitAllAvatarsComponent')
+        .avatars,
+  );
+
+export function Page() {
+  return (
+    <Flex wrap="wrap" gapX="4" gapY="6" justify="center" p="9">
+      {allAvatars.map((avatar) => {
+        const item = new CatalogItemAccessor(avatar);
+
+        const stuffComponent = item.get(StuffUIComponent, 'UIComponent');
+        const avatarComponent = item.get(
+          ProfileAvatarComponent,
+          'profileAvatarComponent',
+        );
+
+        return (
+          <Flex
+            direction="column"
+            gap="2"
+            key={avatar.catalog_id}
+            style={{
+              width: '8rem',
+            }}
+          >
+            <img
+              alt="apple sauce"
+              src={avatarComponent.avatar}
+              style={{
+                width: '100%',
+                aspectRatio: '1 / 1',
+                objectFit: 'fill',
+                borderRadius: Var('radius-1'),
+                boxShadow: Var('shadow-2'),
+              }}
+            />
+            <Text align="center">{stuffComponent.display_name}</Text>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}

packages/website-ue/src/pages/[...locale]/gallery/index.astro

@@ -0,0 +1,12 @@
+---
+import BaseLayout from 'packages/website-ue/src/layouts/BaseLayout.astro';
+import { Page } from './_index';
+
+export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.props;
+---
+
+<BaseLayout {locale}>
+  <Page client:load />
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/tanks/_index.tsx

@@ -1,6 +1,6 @@
 import { TankCatalogComponent } from '@protos/blitz_static_tank_component';
 import { BlitzkitAllTanksComponent } from '@protos/blitzkit_static_all_tanks_component';
-import { CatalogAccessor } from 'packages/core/src';
+import { SocketCatalogAccessor } from 'packages/core/src';
 import { remoteCatalog } from 'packages/website-ue/src/core/blitz/remoteCatalog';
 
 const data = await remoteCatalog
@@ -10,7 +10,7 @@ const data = await remoteCatalog
   );
 
 export function Page() {
-  const tankCatalog = new CatalogAccessor(data.tanks);
+  const tankCatalog = new SocketCatalogAccessor(data.tanks);
 
   const content = tankCatalog
     .get('TankEntity.A92_M60')

packages/website-ue/src/pages/api/metadata/catalog/[item].pb.ts

@@ -1,5 +1,5 @@
 import type { APIRoute, GetStaticPaths, GetStaticPathsItem } from 'astro';
-import { catalog } from 'packages/website-ue/src/core/blitz/catalog';
+import { catalog } from 'packages/website-ue/src/core/blitz/metadata';
 
 export const getStaticPaths: GetStaticPaths = () => {
   const paths: GetStaticPathsItem[] = [];