basic tankopedia layout

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -50,11 +50,11 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
   );
 
   return (
-    <Section>
+    <>
       {showModules && <Modules />}
       <Equipment />
-      <Consumables characteristics={characteristics} />
-    </Section>
+      {/*<Consumables characteristics={characteristics} />*/}
+    </>
   );
 }
 

packages/website-ue/src/components/TankopediaSandbox/index.module.css

@@ -0,0 +1,7 @@
+.sandbox {
+  position: relative;
+  height: 100%;
+
+  .canvas {
+  }
+}

packages/website-ue/src/components/TankopediaSandbox/index.tsx

@@ -0,0 +1,36 @@
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import styles from "./index.module.css";
+import { GLTFLoader } from "three-stdlib";
+
+export function TankopediaSandbox() {
+  return (
+    <div className={styles.sandbox}>
+      <Canvas shadows className={styles.canvas}>
+        {!import.meta.env.SSR && <Content />}
+      </Canvas>
+    </div>
+  );
+}
+
+function Content() {
+  const gltf = useLoader(GLTFLoader, "/amogos.glb");
+
+  return (
+    <>
+      <group scale={4}>
+        <primitive object={gltf.scene} />
+      </group>
+
+      <ambientLight />
+      <pointLight castShadow position={[3, 10, 5]} intensity={1000} />
+
+      <mesh receiveShadow position={[0, -1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[30, 30]} />
+        <meshStandardMaterial color="green" />
+      </mesh>
+
+      <OrbitControls />
+    </>
+  );
+}

packages/website-ue/src/layouts/BaseLayout.astro

@@ -77,6 +77,6 @@ const { accent, locale } = Astro.props;
       <slot />
     </div>
 
-    <Footer {locale} />
+    <!-- <Footer {locale} /> -->
   </body>
 </html>

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css

@@ -0,0 +1,17 @@
+.page {
+  flex-grow: 1;
+  display: flex;
+
+  .sandbox {
+    flex-grow: 1;
+    background-color: black;
+  }
+
+  .stats {
+    display: flex;
+    flex-direction: column;
+
+    gap: var(--space-5);
+    padding: var(--space-5);
+  }
+}

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

@@ -9,12 +9,48 @@ import { useEquipment } from "../../../../hooks/useEquipment";
 import { Tankopedia } from "../../../../stores/tankopedia";
 import { characteristicsOrder } from "../../../../tankopedia/characteristicsOrder";
 import { computeCharacteristics } from "../../../../tankopedia/computeCharacteristics";
+import styles from "./_index.module.css";
+import { TankopediaSandbox } from "../../../../components/TankopediaSandbox";
 
 interface PageProps {
   id: string;
 }
 
 export const Page = withErrorWrapper(
+  withLocale<PageProps>(({ id }) => {
+    const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
+
+    Tankopedia.useInitialization(protagonistTank);
+
+    // const renderCharacteristic = useCharacteristicRenderer();
+
+    const protagonist = Tankopedia.use((state) => state.protagonist);
+    const protagonistEquipment = useEquipment(protagonistTank.tank!);
+
+    const { characteristics } = useMemo(
+      () =>
+        computeCharacteristics(
+          protagonistTank,
+          protagonistEquipment,
+          protagonist,
+        ),
+      [protagonist],
+    );
+
+    return (
+      <div className={styles.page}>
+        <div className={styles.sandbox}>
+          <TankopediaSandbox />
+        </div>
+        <div className={styles.stats}>
+          <TankopediaLoadout characteristics={characteristics} />
+        </div>
+      </div>
+    );
+  }),
+);
+
+export const _Page = withErrorWrapper(
   withLocale<PageProps>(({ id }) => {
     const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
 

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

@@ -20,7 +20,6 @@ const { id, locale } = Astro.props;
 ---
 
 <BaseLayout {locale} accent="violet">
-    <ColorScale color="red" />
-
+  <ColorScale color="red" />
   <Page {locale} {id} client:load />
 </BaseLayout>