loaders

packages/website/src/components/Lighting.tsx

@@ -45,7 +45,9 @@ export function Lighting({ hasPbr }: Props) {
   const wrapper = useRef<Group>(null);
 
   const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
-  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
+  const requestedDisplay = Tankopedia.use(
+    (state) => state.loaders.display.requested,
+  );
   const revealed = Tankopedia.use((state) => state.revealed);
   const skinPending = Tankopedia.use(
     (state) =>
@@ -64,6 +66,7 @@ export function Lighting({ hasPbr }: Props) {
 
   useEffect(() => {
     Tankopedia.mutate((draft) => {
+      draft.showControls = true;
       draft.revealed = true;
       draft.loaders.model.loaded = true;
     });
@@ -200,8 +203,10 @@ function Animator({
   wrapper,
   hasPbr,
 }: AnimatorProps) {
-  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
-  const display = Tankopedia.use((state) => state.display);
+  const requestedDisplay = Tankopedia.use(
+    (state) => state.loaders.display.requested,
+  );
+  const display = Tankopedia.use((state) => state.loaders.display.loaded);
 
   const factor =
     !hasPbr && display !== TankopediaDisplay.StaticArmor ? NON_PBR_FACTOR : 1;
@@ -248,9 +253,12 @@ function Animator({
 
     invalidate();
 
-    if (x >= 1 && Tankopedia.state.display !== requestedDisplay) {
+    if (
+      x >= 1 &&
+      Tankopedia.state.loaders.display.loaded !== requestedDisplay
+    ) {
       Tankopedia.mutate((draft) => {
-        draft.display = requestedDisplay;
+        draft.loaders.display.loaded = requestedDisplay;
       });
     }
   });

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

@@ -1,47 +1,16 @@
-import { uniqueGuns } from "@blitzkit/core";
-import { useState } from "react";
-import { DuelModule, useDuel } from "../../hooks/useDuel";
-import { useEquipment } from "../../hooks/useEquipment";
-import { useFullScreen } from "../../hooks/useFullScreen";
-import { useFullscreenAvailability } from "../../hooks/useFullscreenAvailability";
-import { useStrings } from "../../hooks/useStrings";
-import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { Tankopedia } from "../../stores/tankopedia";
-import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
 import { SegmentedControl } from "../SegmentedControl";
 import styles from "./index.module.css";
 
 export function TankopediaOptions() {
-  const strings = useStrings();
-  const unwrap = useUnwrapper();
-
-  const hasCustomShell = Tankopedia.use(
-    (state) => state.customShell !== undefined,
+  const requestedDisplay = Tankopedia.use(
+    (state) => state.loaders.display.requested,
   );
-  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
-  const isFullScreen = useFullScreen();
-  const advancedHighlighting = TankopediaPersistent.use(
-    (state) => state.advancedHighlighting,
-  );
-  const fullScreenAvailable = useFullscreenAvailability(true);
-  const protagonistTank = useDuel("protagonist", DuelModule.Tank);
-  const antagonistGun = useDuel("antagonist", DuelModule.Gun);
-  const antagonistShell = useDuel("antagonist", DuelModule.Shell);
-  const [antagonistSelectorOpen, setAntagonistSelectorOpen] = useState(false);
-  const antagonistTank = useDuel("antagonist", DuelModule.Tank);
-  const hasCalibratedShells = useEquipment("protagonist", 103);
-  const [tab, setTab] = useState("search");
-  const hasEnhancedArmor = useEquipment("protagonist", 110);
-  const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
-  const revealed = Tankopedia.use((state) => state.revealed);
-  const disturbed = Tankopedia.use((state) => state.disturbed);
-  const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
-  const modelRequested = Tankopedia.use((state) => state.modelRequested);
-  const equalize = Tankopedia.use((state) => state.environment.equalize);
+  const isVisible = Tankopedia.use((state) => state.showControls);
 
   return (
-    <div className={styles.options} data-visible={revealed}>
+    <div className={styles.options} data-visible={isVisible}>
       {/* <div className={styles.controls}>
         {disturbed && (
           <>
@@ -140,11 +109,11 @@ export function TankopediaOptions() {
         )}
       </div> */}
 
-      <div gap="3" align="center" mt="2">
+      <div>
         <SegmentedControl
           onValueChange={(value) => {
             Tankopedia.mutate((draft) => {
-              draft.requestedDisplay = Number(value);
+              draft.loaders.display.requested = Number(value);
             });
           }}
           value={`${requestedDisplay}`}

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

@@ -18,10 +18,8 @@ export function TankopediaSkinSwitcher() {
   const tank = useDuel("protagonist", DuelModule.Tank);
 
   const skin = Tankopedia.use((state) => state.loaders.skin.requested);
-  const requestedDisplay = Tankopedia.use(
-    (state) => state.loaders.display.requested,
-  );
-  const revealed = Tankopedia.use((state) => state.revealed);
+  const showControls = Tankopedia.use((state) => state.showControls);
+  const display = Tankopedia.use((state) => state.loaders.display.loaded);
 
   const skins = uniqBy(
     Object.values(camouflageDefinitions.camouflages).filter(
@@ -37,11 +35,10 @@ export function TankopediaSkinSwitcher() {
     skins.filter((camouflage) => camouflage.attachment),
   ].filter((group) => group.length > 0);
 
+  const isVisible = showControls && display === TankopediaDisplay.Model;
+
   return (
-    <div
-      className={styles["skin-switcher"]}
-      data-visible={revealed && requestedDisplay === TankopediaDisplay.Model}
-    >
+    <div className={styles["skin-switcher"]} data-visible={isVisible}>
       {groups.map((group, index) => (
         <div className={styles.group} key={index}>
           {group.map((camouflage) => {

packages/website/src/stores/tankopedia.ts

@@ -99,6 +99,7 @@ type HighlightArmor = {
 interface Tankopedia {
   disturbed: boolean;
   revealed: boolean;
+  showControls: boolean;
 
   protagonist: TankState;
   antagonist: TankState;
@@ -129,6 +130,7 @@ export const Tankopedia = new Soapstone<Tankopedia, [TankDefinition]>(
   (tank) => ({
     disturbed: false,
     revealed: false,
+    showControls: false,
 
     protagonist: createTankState(tank),
     antagonist: createTankState(tank),