attachments

packages/website/src/components/GuessRenderer.tsx

@@ -1,6 +1,5 @@
 import { useModel } from "../hooks/useModel";
 import { Guess, GuessState } from "../stores/guess";
-import { Controls } from "./CanvasControl";
 import { Lighting } from "./Lighting";
 import { SmartCanvas } from "./SmartCanvas";
 import { TankModel } from "./TankModel";

packages/website/src/components/TankModel.tsx

@@ -103,7 +103,10 @@ export function TankModel() {
         }
 
         function onPointerDown(event: ThreeEvent<PointerEvent>) {
-          if (isTrack && Tankopedia.state.display === TankopediaDisplay.Model) {
+          if (
+            isTrack &&
+            Tankopedia.state.loaders.display.loaded === TankopediaDisplay.Model
+          ) {
             position.set(event.clientX, event.clientY);
             event.stopPropagation();
 

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

@@ -49,7 +49,7 @@ export function TankopediaSandbox({
   const model = Tankopedia.use((state) => state.protagonist.model);
   const turretModelDefinition = model.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];
-  const display = Tankopedia.use((state) => state.display);
+  const display = Tankopedia.use((state) => state.loaders.display.loaded);
 
   function handlePointerDown() {
     window.addEventListener("pointermove", handlePointerMove);
@@ -185,7 +185,7 @@ export function TankopediaSandbox({
 }
 
 function Content({ thicknessRange }: { thicknessRange: ThicknessRange }) {
-  const display = Tankopedia.use((state) => state.display);
+  const display = Tankopedia.use((state) => state.loaders.display.loaded);
   const tank = useDuel("protagonist", DuelModule.Tank);
 
   const { hasPbr } = useModel(tank.id);

packages/website/src/components/TankopediaSkinSwitcher/index.module.css

@@ -12,10 +12,17 @@
 
   transform: translate(calc(100% + var(--space-4)), -50%);
 
+  gap: var(--space-3);
+
   &[data-visible="true"] {
     transform: translate(0, -50%);
   }
 
+  .group {
+    display: flex;
+    flex-direction: column;
+  }
+
   .camouflage-icon {
     border-radius: 50%;
   }

packages/website/src/components/TankopediaSkinSwitcher/index.tsx

@@ -32,12 +32,19 @@ export function TankopediaSkinSwitcher() {
 
   if (skins.length === 0) return null;
 
+  const groups = [
+    skins.filter((camouflage) => !camouflage.attachment),
+    skins.filter((camouflage) => camouflage.attachment),
+  ].filter((group) => group.length > 0);
+
   return (
     <div
       className={styles["skin-switcher"]}
       data-visible={revealed && requestedDisplay === TankopediaDisplay.Model}
     >
-      {skins.map((camouflage) => {
+      {groups.map((group, index) => (
+        <div className={styles.group} key={index}>
+          {group.map((camouflage) => {
             const name = unwrap(camouflage.name!).replace(
               "%(camo_num)",
               SKIN_NUMBER,
@@ -65,12 +72,17 @@ export function TankopediaSkinSwitcher() {
                   <img
                     className={styles["camouflage-icon"]}
                     alt={name}
-                src={alias("api", `/icons/camouflages/${camouflage.id}.webp`)}
+                    src={alias(
+                      "api",
+                      `/icons/camouflages/${camouflage.id}.webp`,
+                    )}
                   />
                 </IconButton>
               </Tooltip>
             );
           })}
         </div>
+      ))}
+    </div>
   );
 }

packages/website/src/stores/tankopedia.ts

@@ -81,6 +81,21 @@ interface LoaderState<Type> {
   loaded: Type;
 }
 
+type HighlightArmor = {
+  editingPlate: boolean;
+  name: string;
+  point: Vector3;
+  thickness: number;
+  color: string;
+} & (
+  | {
+      type: ArmorType.Primary | ArmorType.Spaced;
+      thicknessAngled: number;
+      angle: number;
+    }
+  | { type: ArmorType.External }
+);
+
 interface Tankopedia {
   disturbed: boolean;
   revealed: boolean;
@@ -98,22 +113,11 @@ interface Tankopedia {
     attachment: LoaderState<number | undefined>;
   };
 
-  // shot?: Shot;
+  shot?: Shot;
+  highlightArmor?: HighlightArmor;
+
   // editStatic: boolean;
-  // highlightArmor?: {
+
-  //   editingPlate: boolean;
-  //   name: string;
-  //   point: Vector3;
-  //   thickness: number;
-  //   color: string;
-  // } & (
-  //   | {
-  //       type: ArmorType.Primary | ArmorType.Spaced;
-  //       thicknessAngled: number;
-  //       angle: number;
-  //     }
-  //   | { type: ArmorType.External }
-  // );
   // xpMultiplier: (typeof XP_MULTIPLIERS)[number];
   // customShell?: ShellDefinition;
   // statSearch?: string;