refine layout

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

@@ -1,19 +1,11 @@
 .characteristics {
   padding: var(--space-5);
-  padding-top: var(--space-6);
 
   display: flex;
   flex-direction: column;
   gap: var(--space-5);
   box-sizing: border-box;
 
-  max-height: 100%;
-  overflow-y: auto;
-
-  &[data-visible="false"] {
-    display: none;
-  }
-
   .group {
     display: flex;
     flex-direction: column;

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

@@ -1,21 +1,17 @@
 import { CaretDownIcon, CaretRightIcon } from "@radix-ui/react-icons";
+import { useStrings } from "../../hooks/useStrings";
+import { Tankopedia } from "../../stores/tankopedia";
 import {
   characteristicsOrder,
   type CharacteristicRenderConfig,
   type CharacteristicsGroup,
 } from "../../tankopedia/characteristicsOrder";
-import styles from "./index.module.css";
 import { Heading } from "../Heading";
-import { Tankopedia, TankopediaTab } from "../../stores/tankopedia";
-import { useStrings } from "../../hooks/useStrings";
+import styles from "./index.module.css";
 
 export function TankopediaCharacteristics() {
-  const isVisible = Tankopedia.use(
-    (state) => state.tab === TankopediaTab.Characteristics,
-  );
-
   return (
-    <div className={styles.characteristics} data-visible={isVisible}>
+    <div className={styles.characteristics}>
       {characteristicsOrder.map((group) => (
         <Group {...group} />
       ))}

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

@@ -1,5 +1,7 @@
 import { romanize } from "@blitzkit/core";
+import type { ConsumableComponent } from "@protos/blitz_static_consumable_component";
 import type { BlitzStaticEquipmentPresetComponent_EquipmentSlot } from "@protos/blitz_static_equipment_preset_component";
+import type { BlitzStaticPurchaseComponent } from "@protos/blitz_static_purchase_component";
 import { Grade } from "@protos/blitz_static_standard_grades_enum";
 import { StandardPrice } from "@protos/blitz_static_standard_price";
 import type { UpgradeLine } from "@protos/blitz_static_tank_upgrade_line";
@@ -24,26 +26,20 @@ import {
 import { useCompatibility } from "../../hooks/useCompatibility";
 import { useConsumables } from "../../hooks/useConsumables";
 import { useEquipment } from "../../hooks/useEquipment";
+import { useGameStrings } from "../../hooks/useGameStrings";
 import { useProtagonist } from "../../hooks/useProtagonist";
 import { useStrings } from "../../hooks/useStrings";
 import { useTierPrices } from "../../hooks/useTierPrices";
 import { useUpgradePreset } from "../../hooks/useUpgradePreset";
-import { Tankopedia, TankopediaCompare } from "../../stores/tankopedia";
+import { Tankopedia } from "../../stores/tankopedia";
+import type { ComputedCharacteristics } from "../../tankopedia/computeCharacteristics";
 import { Button } from "../Button";
 import { Heading } from "../Heading";
 import { IconButton } from "../IconButton";
 import { Price } from "../Price";
-import { Section } from "../Section";
 import { Text } from "../Text";
-import styles from "./index.module.css";
-import type { ComputedCharacteristics } from "../../tankopedia/computeCharacteristics";
 import { Tooltip } from "../Tooltip";
-import { useGameStrings } from "../../hooks/useGameStrings";
-import { TankopediaCollapsible } from "../TankopediaCollapsible";
-import type { ConsumableComponent } from "@protos/blitz_static_consumable_component";
-import { Tank } from "@protos/tank";
-import { select } from "three/src/nodes/math/ConditionalNode.js";
-import type { BlitzStaticPurchaseComponent } from "@protos/blitz_static_purchase_component";
+import styles from "./index.module.css";
 
 interface TankopediaLoadoutProps {
   characteristics: ComputedCharacteristics;

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

@@ -1,20 +0,0 @@
-.tabs {
-  display: flex;
-
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-
-  .tab {
-    padding: var(--space-3) var(--space-5);
-    border-top: var(--space-2) solid transparent;
-
-    cursor: pointer;
-
-    &[data-selected="true"] {
-      background: linear-gradient(var(--accent-a4), transparent);
-      border-top: var(--space-2) solid var(--accent-9);
-    }
-  }
-}

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

@@ -1,37 +0,0 @@
-import { useStrings } from "../../hooks/useStrings";
-import { Tankopedia, TankopediaTab } from "../../stores/tankopedia";
-import { Text } from "../Text";
-import styles from "./index.module.css";
-
-export function TankopediaNavigation() {
-  const strings = useStrings();
-  const tab = Tankopedia.use((state) => state.tab);
-
-  return (
-    <div className={styles.tabs}>
-      <div
-        className={styles.tab}
-        data-selected={tab === TankopediaTab.Tank}
-        onClick={() => {
-          Tankopedia.mutate((draft) => {
-            draft.tab = TankopediaTab.Tank;
-          });
-        }}
-      >
-        <Text>{strings.tanks.navigation.tank}</Text>
-      </div>
-
-      <div
-        className={styles.tab}
-        data-selected={tab === TankopediaTab.Characteristics}
-        onClick={() => {
-          Tankopedia.mutate((draft) => {
-            draft.tab = TankopediaTab.Characteristics;
-          });
-        }}
-      >
-        <Text>{strings.tanks.navigation.characteristics}</Text>
-      </div>
-    </div>
-  );
-}

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

@@ -1,11 +1,12 @@
-.sandbox {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.wrapper {
+  height: calc(100dvh - 16rem);
+  position: relative;
 
-  &[data-visible="false"] {
-    display: none;
+  .sandbox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
   }
 }

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

@@ -1,22 +1,21 @@
-import { Canvas, useLoader } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
-import styles from "./index.module.css";
+import { Canvas, useLoader } from "@react-three/fiber";
 import { GLTFLoader } from "three-stdlib";
-import { Tankopedia } from "../../stores/tankopedia";
-import { TankopediaTab } from "../../stores/tankopedia";
+import styles from "./index.module.css";
 
 export function TankopediaSandbox() {
-  const isVisible = Tankopedia.use((state) => state.tab === TankopediaTab.Tank);
-
   return (
-    <div className={styles.sandbox} data-visible={isVisible}>
-      <Canvas
-        shadows
-        className={styles.canvas}
-        frameloop={isVisible ? "always" : "never"}
-      >
-        {!import.meta.env.SSR && <Content />}
-      </Canvas>
+    <div className={styles.wrapper}>
+      <div className={styles.sandbox}>
+        <Canvas
+          // scene={{ fog: new Fog("black", 15, 40) }}
+          shadows
+          className={styles.canvas}
+          frameloop="demand"
+        >
+          {!import.meta.env.SSR && <Content />}
+        </Canvas>
+      </div>
     </div>
   );
 }
@@ -34,8 +33,8 @@ function Content() {
       <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" />
+        <planeGeometry args={[2 ** 8, 2 ** 8]} />
+        <meshStandardMaterial color="black" />
       </mesh>
 
       <OrbitControls />