oh shit i forgot to commit... uhh i added state icons

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

@@ -41,8 +41,8 @@
     }
 
     .content {
-      --cell-width: 3rem;
-      --toy-span: 5;
+      --cell-width: 2rem;
+      --toy-span: 6;
 
       display: grid;
       grid-auto-rows: var(--cell-width);
@@ -71,14 +71,14 @@
 
           .bar-wrapper {
             flex: 1;
-            height: var(--space-2);
+            height: var(--space-1);
 
             background-color: var(--gray-3);
             border-radius: var(--radius-max);
             overflow: hidden;
 
             .bar {
-              background-color: green;
+              background-color: var(--jade-9);
               width: 75%;
               height: 100%;
             }

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

@@ -13,13 +13,25 @@
     }
   }
 
-  .state {
+  .states {
     display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-3);
+    flex-direction: column;
+    gap: var(--space-2);
 
-    .toggle {
-      font-size: 2em;
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-2);
+
+      .state {
+        font-size: 1.25em;
+
+        &[data-selected="true"] {
+          img {
+            filter: sepia(1) saturate(10);
+          }
+        }
+      }
     }
   }
 

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

@@ -84,22 +84,28 @@ function State() {
         </IconButton>
       </div>
 
-      <div className={styles.state}>
-        {vehicleStatusKeys.map((key) => (
-          <IconButton
-            key={key}
-            radius="1"
-            className={styles.toggle}
-            color={status[key] ? undefined : "gray"}
-            variant={status[key] ? "surface" : "soft"}
-            onClick={() => {
-              Tankopedia.mutate((draft) => {
-                draft.protagonist.status[key] = !draft.protagonist.status[key];
-              });
-            }}
-          >
-            <img src={`/media/status/${key}.svg`} />
-          </IconButton>
+      <div className={styles.states}>
+        {vehicleStatusKeys.map((group, index) => (
+          <div key={index} className={styles.group}>
+            {group.map((key) => (
+              <IconButton
+                key={key}
+                radius="1"
+                className={styles.state}
+                data-selected={status[key]}
+                color={status[key] ? "amber" : "gray"}
+                variant={status[key] ? "surface" : "soft"}
+                onClick={() => {
+                  Tankopedia.mutate((draft) => {
+                    draft.protagonist.status[key] =
+                      !draft.protagonist.status[key];
+                  });
+                }}
+              >
+                <img src={`/media/status/${key}.png`} />
+              </IconButton>
+            ))}
+          </div>
         ))}
       </div>
     </div>

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

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