feat: the thing

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