feat: remote and socket metadata and gallery

README.md

@@ -11,3 +11,12 @@ Your premier source for all things Blitz.
 Go to [application directory for BlitzKit](https://discord.com/application-directory/1097673957865443370) and click "Add to Server." Voila! You're ready to go.
 
 ![BlitzKit application directory](https://i.imgur.com/YWCtOuJ.png)
+
+## Naming Guide
+
+| Type      | Style          | Example                                                          |
+| --------- | -------------- | ---------------------------------------------------------------- |
+| In-text   | CamelCase      | BlitzKit                                                         |
+| Code      | lowerCamelCase | `let blitzkit = { ... }`, `function fetchBlitzkitData() { ... }` |
+| URLs      | kebab-case     | `https://example.com/blitzkit/`                                  |
+| Constants | SNAKE_CASE     | `const BLITZKIT_VERSION = "1.0.0"`                               |

packages/core/src/blitz/index.ts

@@ -1,5 +1,4 @@
 export * from './canSplash';
-export * from './catalogAccessor';
 export * from './clans';
 export * from './classes';
 export * from './constants';
@@ -19,6 +18,9 @@ export * from './getTankStats';
 export * from './idToRegion';
 export * from './isOnGoingRatingSeason';
 export * from './isValidBlitzId';
+export * from './metadata';
+export * from './metadata.remote';
+export * from './metadata.socket';
 export * from './nations';
 export * from './normalizeExtra';
 export * from './normalizeIds';

packages/core/src/blitz/legacy_metadata.ts

@@ -1,10 +1,5 @@
-import { CatalogItem } from '@protos/blitz_items';
-import { CatalogItemsComponent } from '@protos/blitz_static_catalog_items_group_component';
-import { BlitzkitAllTanksComponent } from '@protos/blitzkit_static_all_tanks_component';
-import { BlitzKitTankCatalogComponent } from '@protos/blitzkit_static_tank_component';
-import { CatalogItemAccessor } from './catalogItemAccessor';
-
-export class CatalogAccessor {
+/*
+export class SocketMetadataAccessor {
   items: Record<string, CatalogItemAccessor> = {};
 
   constructor(catalogItems: CatalogItem[]) {
@@ -77,7 +72,7 @@ export class CatalogAccessor {
   }
 }
 
-export class RemoteCatalogAccessor {
+export class RemoteMetadataAccessor {
   constructor(private base: string) {}
 
   async get(item: string) {
@@ -91,3 +86,4 @@ export class RemoteCatalogAccessor {
     return new CatalogItemAccessor(catalogItem);
   }
 }
+*/

packages/core/src/blitz/metadata.remote.ts

@@ -0,0 +1,30 @@
+import { CatalogItem } from '@protos/blitz_items';
+import { CatalogItemAccessor } from './catalogItemAccessor';
+import { MetadataAccessor } from './metadata';
+
+export class RemoteMetadataAccessor extends MetadataAccessor {
+  constructor(private base: string) {
+    super();
+  }
+
+  async get(item: string) {
+    const response = await fetch(`${this.base}/${item}.pb`);
+
+    if (!response.ok) {
+      throw new Error(`Item ${item} does not exist in remote metadata`);
+    }
+
+    const buffer = new Uint8Array(await response.arrayBuffer());
+    const catalogItem = CatalogItem.decode(buffer);
+
+    return new CatalogItemAccessor(catalogItem);
+  }
+
+  add() {
+    throw new Error('Cannot add items to remote metadata');
+  }
+
+  filter(): CatalogItemAccessor[] {
+    throw new Error('Cannot filter remote metadata');
+  }
+}

packages/core/src/blitz/metadata.socket.ts

@@ -0,0 +1,37 @@
+import { CatalogItem } from '@protos/blitz_items';
+import { Metadata } from '@protos/blitz_metadata';
+import { CatalogItemAccessor } from './catalogItemAccessor';
+import { MetadataAccessor } from './metadata';
+
+export class SocketMetadataAccessor extends MetadataAccessor {
+  private items: Record<string, CatalogItem> = {};
+
+  constructor(metadata: Metadata) {
+    super();
+
+    for (const item of metadata.catalog_items) {
+      this.items[item.catalog_id] = item;
+    }
+  }
+
+  async get(item: string) {
+    if (item in this.items) return new CatalogItemAccessor(this.items[item]);
+    throw new Error(`Item ${item} does not exist in socket metadata`);
+  }
+
+  add(item: CatalogItemAccessor) {
+    this.items[item.id] = item.pack();
+  }
+
+  filter(predicate: (item: string) => boolean) {
+    const items: CatalogItemAccessor[] = [];
+
+    for (const item in this.items) {
+      if (predicate(item)) {
+        items.push(new CatalogItemAccessor(this.items[item]));
+      }
+    }
+
+    return items;
+  }
+}

packages/core/src/blitz/metadata.ts

@@ -0,0 +1,35 @@
+import { BlitzkitAllAvatarsComponent } from '@protos/blitzkit_static_all_avatars_component';
+import { CatalogItemAccessor } from './catalogItemAccessor';
+
+export abstract class MetadataAccessor {
+  abstract get(item: string): Promise<CatalogItemAccessor>;
+
+  abstract add(item: CatalogItemAccessor): void;
+
+  abstract filter(predicate: (item: string) => boolean): CatalogItemAccessor[];
+
+  injectBlitzkit() {
+    this.injectBlitzkitProfileAvatars();
+
+    return this;
+  }
+
+  injectBlitzkitProfileAvatars() {
+    const allAvatars: BlitzkitAllAvatarsComponent = {
+      avatars: this.filter((item) =>
+        item.startsWith('ProfileAvatarEntity.'),
+      ).map((avatar) => avatar.pack()),
+    };
+
+    this.add(
+      CatalogItemAccessor.fromComponent(
+        'BlitzkitAllAvatarsEntity.blitzkit_all_avatars',
+        {
+          type_url:
+            './blitzkit_static_all_avatars_component.BlitzkitAllAvatarsComponent',
+          value: BlitzkitAllAvatarsComponent.encode(allAvatars).finish(),
+        },
+      ),
+    );
+  }
+}

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[] = [];