feat: the thing

packages/core/src/blitzkit/index.ts

@@ -47,6 +47,7 @@ export * from './createDefaultProvisions';
 export * from './metaSortTank';
 export * from './romanize';
 export * from './tank';
+export * from './tankArmor';
 export * from './tanks';
 export * from './tanksFull';
 export * from './youtubers';

packages/core/src/blitzkit/tankArmor.ts

@@ -0,0 +1,7 @@
+import { fetchPB } from '../protobuf';
+import { TankArmor } from '../protos';
+import { asset } from './asset';
+
+export function fetchTankArmor(id: string) {
+  return fetchPB(asset(`tanks/${id}/armor.pb`), TankArmor);
+}

packages/core/src/protos/tank_armor.proto

@@ -3,10 +3,8 @@ syntax = "proto2";
 package blitzkit;
 
 message TankArmor {
-  // tank id
-  required string id = 1;
   // key can only ever be "chassis", "hull", "turret", or "gun"
-  map<string, PenetrationGroup> groups = 4;
+  map<string, PenetrationGroup> groups = 1;
 }
 
 message PenetrationGroup {

packages/core/src/protos/tank_armor.ts

@@ -10,8 +10,6 @@ import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
 export const protobufPackage = "blitzkit";
 
 export interface TankArmor {
-  /** tank id */
-  id: string;
   /** key can only ever be "chassis", "hull", "turret", or "gun" */
   groups: { [key: string]: PenetrationGroup };
 }
@@ -42,16 +40,13 @@ export interface ArmorPlate {
 }
 
 function createBaseTankArmor(): TankArmor {
-  return { id: "", groups: {} };
+  return { groups: {} };
 }
 
 export const TankArmor: MessageFns<TankArmor> = {
   encode(message: TankArmor, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
-    if (message.id !== "") {
-      writer.uint32(10).string(message.id);
-    }
     Object.entries(message.groups).forEach(([key, value]) => {
-      TankArmor_GroupsEntry.encode({ key: key as any, value }, writer.uint32(34).fork()).join();
+      TankArmor_GroupsEntry.encode({ key: key as any, value }, writer.uint32(10).fork()).join();
     });
     return writer;
   },
@@ -68,17 +63,9 @@ export const TankArmor: MessageFns<TankArmor> = {
             break;
           }
 
-          message.id = reader.string();
-          continue;
-        }
-        case 4: {
-          if (tag !== 34) {
-            break;
-          }
-
-          const entry4 = TankArmor_GroupsEntry.decode(reader, reader.uint32());
-          if (entry4.value !== undefined) {
-            message.groups[entry4.key] = entry4.value;
+          const entry1 = TankArmor_GroupsEntry.decode(reader, reader.uint32());
+          if (entry1.value !== undefined) {
+            message.groups[entry1.key] = entry1.value;
           }
           continue;
         }
@@ -93,7 +80,6 @@ export const TankArmor: MessageFns<TankArmor> = {
 
   fromJSON(object: any): TankArmor {
     return {
-      id: globalThis.String(assertSet("TankArmor.id", object.id)),
       groups: isObject(object.groups)
         ? Object.entries(object.groups).reduce<{ [key: string]: PenetrationGroup }>((acc, [key, value]) => {
           acc[key] = PenetrationGroup.fromJSON(value);
@@ -105,9 +91,6 @@ export const TankArmor: MessageFns<TankArmor> = {
 
   toJSON(message: TankArmor): unknown {
     const obj: any = {};
-    if (message.id !== "") {
-      obj.id = message.id;
-    }
     if (message.groups) {
       const entries = Object.entries(message.groups);
       if (entries.length > 0) {
@@ -125,7 +108,6 @@ export const TankArmor: MessageFns<TankArmor> = {
   },
   fromPartial<I extends Exact<DeepPartial<TankArmor>, I>>(object: I): TankArmor {
     const message = createBaseTankArmor();
-    message.id = object.id ?? "";
     message.groups = Object.entries(object.groups ?? {}).reduce<{ [key: string]: PenetrationGroup }>(
       (acc, [key, value]) => {
         if (value !== undefined) {

packages/website/src/components/ArmorGroup.tsx

@@ -1,4 +1,4 @@
-import { asset, type Tank } from '@blitzkit/core';
+import { asset, TankArmor, type Tank } from '@blitzkit/core';
 import { useLoader } from '@react-three/fiber';
 import { Material, MeshBasicMaterial } from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -7,10 +7,11 @@ import { jsxTree } from '../core/blitzkit/jsxTree';
 
 interface ArmorGroupProps {
   tank: Tank;
+  armor: TankArmor;
   group: string;
 }
 
-export function ArmorGroup({ tank, group }: ArmorGroupProps) {
+export function ArmorGroup({ tank, armor, group }: ArmorGroupProps) {
   const gltf = useLoader(
     GLTFLoader,
     asset(`/tanks/${tank.id}/collision/hull.glb`),
@@ -31,7 +32,7 @@ export function ArmorGroup({ tank, group }: ArmorGroupProps) {
           event.stopPropagation();
 
           const armorName = mesh.material.name;
-          const penetrationGroup = tank.penetration_groups[group];
+          const penetrationGroup = armor.groups[group];
           const thickness = penetrationGroup.armors[armorName];
 
           console.log(tank.id, armorName, penetrationGroup, thickness);

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

@@ -1,22 +1,26 @@
-import { Tank } from '@blitzkit/core';
+import { Tank, TankArmor } from '@blitzkit/core';
+import { Box } from '@radix-ui/themes';
 import { OrbitControls } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { ArmorGroup } from '../../../../components/ArmorGroup';
+import { PageWrapper } from '../../../../components/PageWrapper';
 
 interface PageProps {
   tank: Tank;
+  armor: TankArmor;
 }
 
-export function Page({ tank }: PageProps) {
+export function Page({ tank, armor }: PageProps) {
   return (
-    <Canvas
-      style={{
-        width: 640,
-        height: 640,
-      }}
-    >
-      <OrbitControls />
-      <ArmorGroup group="hull" tank={tank} />
-    </Canvas>
+    <PageWrapper p="0" maxWidth="unset">
+      <Box height="100%" width="100%" flexGrow="1" position="relative">
+        <Box position="absolute" top="0" left="0" width="100%" height="100%">
+          <Canvas>
+            <OrbitControls />
+            <ArmorGroup group="hull" tank={tank} armor={armor} />
+          </Canvas>
+        </Box>
+      </Box>
+    </PageWrapper>
   );
 }

packages/website/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -1,5 +1,5 @@
 ---
-import { fetchTank } from '@blitzkit/core';
+import { fetchTank, fetchTankArmor } from '@blitzkit/core';
 import type { GetStaticPaths } from 'astro';
 import { awaitableTanksFull } from '../../../../core/awaitables/tanksFull';
 import BaseLayout from '../../../../layouts/BaseLayout.astro';
@@ -22,8 +22,9 @@ export const getStaticPaths = (async () => {
 
 const { id } = Astro.props;
 const tank = await fetchTank(id);
+const armor = await fetchTankArmor(id);
 ---
 
 <BaseLayout>
-  <Page {tank} client:load />
+  <Page {tank} {armor} client:load />
 </BaseLayout>

packages/website/src/pages/api/tanks/[id]/armor.json.ts

@@ -0,0 +1,16 @@
+import { fetchTankArmor } from '@blitzkit/core';
+import type { APIRoute } from 'astro';
+
+export { getStaticPaths } from './meta.json';
+
+/**
+ * Returns the thicknesses and types of all armor plates on a tank chunked into
+ * groups.
+ *
+ * @param id The tank id.
+ * @returns JSON.
+ */
+export const GET: APIRoute<{}, { id: string }> = async ({ params }) => {
+  const tank = await fetchTankArmor(params.id);
+  return Response.json(tank);
+};