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}>

packages/website-ue/src/tankopedia/characteristicsOrder.tsx

@@ -88,6 +88,7 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
   {
     group: "firepower",
     order: [
+      { toy: "reload" },
       {
         name: "gun_type",
         render({ output }) {
@@ -97,39 +98,36 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
       { name: "dpm", decimals: 0, units: "hp_min" },
       { name: "reload", decimals: 2, units: "s" },
       { name: "reloads", decimals: 2, units: "s" },
+
       { name: "damage", units: "hp" },
       { name: "module_damage", units: "hp" },
-      { name: "penetration", units: "mm" },
       { name: "clip_size" },
       { name: "intra_clip", decimals: 2, units: "s" },
 
-      { toy: "reload" },
-
+      { toy: "ricochet" },
+      { name: "penetration", units: "mm" },
       { name: "caliber", units: "mm" },
       { name: "normalization", units: "deg" },
       { name: "ricochet", units: "deg" },
 
-      { toy: "ricochet" },
-
       { name: "shell_velocity", units: "m_s" },
       { name: "shell_range", units: "m" },
       { name: "shell_capacity" },
 
-      { name: "aim_time", decimals: 1, units: "s" },
-
       { toy: "aim_time" },
-
+      { name: "aim_time", decimals: 1, units: "s" },
       { name: "dispersion", decimals: 3, units: "m" },
 
+      { toy: "flexibility" },
       { name: "gun_depression", decimals: 0, units: "deg" },
       { name: "gun_elevation", decimals: 0, units: "deg" },
 
-      { toy: "flexibility" },
     ],
   },
   {
     group: "maneuverability",
     order: [
+      { toy: "traverse" },
       { name: "speed_forward", units: "km_h" },
       { name: "speed_backward", units: "km_h" },
 
@@ -140,8 +138,6 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
       { name: "power_to_weight", decimals: 1, units: "bhp_t" },
       { name: "hull_traverse_speed", units: "deg_s" },
       { name: "turret_traverse_speed", units: "deg_s" },
-
-      { toy: "traverse" },
     ],
   },
   {
@@ -149,10 +145,9 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
     order: [
       { name: "health", units: "hp" },
       { name: "fire_chance", units: "%" },
-      { name: "view_range", units: "m" },
 
       { toy: "view_range" },
-
+      { name: "view_range", units: "m" },
       { name: "camouflage", decimals: 0, units: "%" },
 
       { name: "height", units: "m" },