toy and items layout

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

@@ -41,8 +41,30 @@
     }
 
     .content {
-      display: flex;
-      flex-direction: column;
+        --cell-width: 5rem;
+        --toy-span: 3;
+
+        display: grid;
+        grid-auto-rows: var(--cell-width);
+        grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
+        grid-auto-flow: row dense;
+        gap: var(--space-4);
+
+        .item {
+            background-color: red;
+            grid-row: span 1;
+            grid-column: span var(--toy-span);
+        }
+
+        .toy {
+            grid-row: span var(--toy-span);
+            grid-column: span var(--toy-span);
+
+            background-color: var(--gray-3);
+            border: var(--gray-5) solid var(--space-1);
+
+            border-radius: var(--space-3);
+        }
     }
   }
 }

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

@@ -50,9 +50,9 @@ interface ToyProps {
 }
 
 function Toy({ toy }: ToyProps) {
-  return <span>{toy}</span>;
+  return <span className={styles.toy}></span>;
 }
 
 function Item({ name }: CharacteristicRenderConfig) {
-  return <span>{name}</span>;
+  return <span className={styles.item}></span>;
 }

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

@@ -8,5 +8,9 @@
     left: 0;
     width: 100%;
     height: 100%;
+
+    .canvas {
+        background-color: black;
+    }
   }
 }

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

@@ -1,5 +1,6 @@
 import { OrbitControls } from "@react-three/drei";
 import { Canvas, useLoader } from "@react-three/fiber";
+import { FogExp2 } from "three";
 import { GLTFLoader } from "three-stdlib";
 import styles from "./index.module.css";
 
@@ -8,7 +9,7 @@ export function TankopediaSandbox() {
     <div className={styles.wrapper}>
       <div className={styles.sandbox}>
         <Canvas
-          // scene={{ fog: new Fog("black", 15, 40) }}
+          scene={{ fog: new FogExp2("black", 0.05) }}
           shadows
           className={styles.canvas}
           frameloop="demand"
@@ -23,6 +24,11 @@ export function TankopediaSandbox() {
 function Content() {
   const gltf = useLoader(GLTFLoader, "/amogos.glb");
 
+  gltf.scene.traverse(child =>
+  {
+    child.castShadow = true;
+    })
+
   return (
     <>
       <group scale={4}>