feat: start of stats

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

@@ -0,0 +1,48 @@
+import {
+  TankAttributeChange_AttributeName,
+  TankAttributeChange_Modifier,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import { use } from "react";
+import { api } from "../../../core/api/dynamic";
+import { Tankopedia } from "../../../stores/tankopedia";
+
+interface Props {
+  id: string;
+}
+
+export function Page({ id }: Props) {
+  const tank = use(api.tank(id));
+
+  const stage = Tankopedia.use((state) => state.stage);
+
+  return (
+    <>
+      <h1>{tank.name?.value}</h1>
+
+      <h2>Base stats</h2>
+
+      {tank.base_stats!.attributes.map((attribute) => (
+        <p>
+          {TankAttributeChange_AttributeName[attribute.attribute_name]}:{" "}
+          {attribute.value} ({TankAttributeChange_Modifier[attribute.modifier]})
+        </p>
+      ))}
+
+      <h2>Upgrades</h2>
+
+      {tank.upgrade_stages.map((stage, index) => (
+        <>
+          <h3>Stage {index}</h3>
+
+          {stage.attributes.map((attribute) => (
+            <p>
+              {TankAttributeChange_AttributeName[attribute.attribute_name]}:{" "}
+              {attribute.value} (
+              {TankAttributeChange_Modifier[attribute.modifier]})
+            </p>
+          ))}
+        </>
+      ))}
+    </>
+  );
+}

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

@@ -1,6 +1,7 @@
 ---
 import type { GetStaticPaths } from "astro";
 import { api } from "../../../core/api/dynamic";
+import { Page } from "./_index";
 
 export const getStaticPaths = (async () => {
   const { tanks } = await api.tanks();
@@ -14,9 +15,4 @@ export const getStaticPaths = (async () => {
 const { id } = Astro.props;
 ---
 
-<h1>Tank {id}</h1>
-
-<code>
-  <pre>{JSON.stringify(await api.tank(id) , null, 2)}</pre>
-</code>
-
+<Page {id} />