TankopediaLoadout

packages/i18n/src/unwrapper.ts

@@ -2,7 +2,11 @@ import locales from "@blitzkit/i18n/locales.json";
 import { I18nString } from "@blitzkit/protos";
 
 export function unwrapper(locale: string) {
-  return function (i18nString: I18nString) {
+  return function (i18nString?: I18nString) {
+    if (i18nString === undefined) {
+      throw new Error("i18nString is undefined");
+    }
+
     if (locale in i18nString.locales) {
       return i18nString.locales[locale];
     }

packages/protos/src/blitzkit/equipment_definitions.proto

@@ -1,4 +1,4 @@
-syntax = "proto2";
+syntax = "proto3";
 
 package blitzkit;
 
@@ -10,8 +10,8 @@ message EquipmentDefinitions {
 }
 
 message Equipment {
-  required I18nString name        = 1;
-  required I18nString description = 2;
+  I18nString name        = 1;
+  I18nString description = 2;
 }
 
 message EquipmentPreset {
@@ -19,6 +19,5 @@ message EquipmentPreset {
 }
 
 message EquipmentSlot {
-  required uint32 left  = 1;
-  required uint32 right = 2;
+  repeated uint32 options = 1;
 }

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

@@ -1,30 +1,38 @@
-import type { Consumable } from "@blitzkit/core";
-import { TrashIcon } from "@radix-ui/react-icons";
+import type { Consumable, EquipmentSlot } from "@blitzkit/protos";
+import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons";
+import { chunk } from "lodash-es";
+import { api } from "../../api/dynamic";
+import { equipmentColumns } from "../../config/equipment";
 import { useConsumables } from "../../hooks/useConsumables";
-import { useProtagonistGun } from "../../hooks/useProtagonistGun";
-import { useProtagonistTank } from "../../hooks/useProtagonistTank";
+import { DuelModule, useDuel } from "../../hooks/useDuel";
+import { useEquipmentPreset } from "../../hooks/useEquipmentPreset";
 import { useStrings } from "../../hooks/useStrings";
 import { useTankCompatibility } from "../../hooks/useTankCompatibility";
+import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { Tankopedia } from "../../stores/tankopedia";
 import { hasUpgrades } from "../../tankopedia/hasUpgrades";
 import { vehicleStatusKeys } from "../../tankopedia/tankState";
 import type { ComputedCharacteristics } from "../../types/characteristics";
+import { Button } from "../Button";
 import { Heading } from "../Heading";
 import { IconButton } from "../IconButton";
+import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import styles from "./index.module.css";
 
+const equipment = await api.equipment();
+
 interface TankopediaLoadoutProps {
   characteristics: ComputedCharacteristics;
 }
 
 export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
-  const tank = useProtagonistTank();
+  const tank = useDuel("protagonist", DuelModule.Tank);
   const showModules = hasUpgrades(tank);
 
   return (
     <>
-      {showModules && <Modules />}
+      {/* {showModules && <Modules />} */}
       <Equipment />
       <Consumables characteristics={characteristics} />
       <State />
@@ -120,8 +128,8 @@ interface ConsumablesProps {
 function Consumables({ characteristics }: ConsumablesProps) {
   const strings = useStrings();
   const consumables = useConsumables();
-  const tank = useProtagonistTank();
-  const gun = useProtagonistGun();
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const gun = useDuel("protagonist", DuelModule.Gun);
   const isCompatible = useTankCompatibility(tank, gun);
 
   return (
@@ -148,7 +156,7 @@ function Consumables({ characteristics }: ConsumablesProps) {
           }
 
           return (
-            <Consumable key={id} id={Number(id)} consumable={consumable} />
+            <ConsumableEntry key={id} id={Number(id)} consumable={consumable} />
           );
         })}
       </div>
@@ -161,12 +169,12 @@ interface ConsumableProps {
   consumable: Consumable;
 }
 
-function Consumable({ id, consumable }: ConsumableProps) {
+function ConsumableEntry({ id, consumable }: ConsumableProps) {
   const isSelected = Tankopedia.use((state) =>
     state.protagonist.consumables.includes(id),
   );
-  const tank = useProtagonistTank();
-  const unwrap = useUnwrap();
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const unwrap = useUnwrapper();
 
   return (
     <div className={styles["consumable-wrapper"]}>
@@ -207,15 +215,15 @@ function Consumable({ id, consumable }: ConsumableProps) {
         </Button>
       </Tooltip>
 
-      <Price price={price} />
+      {/* <Price price={price} /> */}
     </div>
   );
 }
 
 function Equipment() {
   const strings = useStrings();
-  const tank = useProtagonistTank();
-  const equipment = useEquipment(tank.tank!);
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const equipment = useEquipmentPreset(tank.equipment_preset);
 
   return (
     <div className={styles.section}>
@@ -237,7 +245,7 @@ function Equipment() {
       </div>
 
       <div className={styles.equipment}>
-        {chunk(equipment.preset.slots, equipmentColumns).map((chunk, index) => (
+        {chunk(equipment.slots, equipmentColumns).map((chunk, index) => (
           <EquipmentRow key={index} chunk={chunk} rowIndex={index} />
         ))}
       </div>
@@ -246,7 +254,7 @@ function Equipment() {
 }
 
 interface EquipmentRowProps {
-  chunk: BlitzStaticEquipmentPresetComponent_EquipmentSlot[];
+  chunk: EquipmentSlot[];
   rowIndex: number;
 }
 
@@ -254,7 +262,7 @@ function EquipmentRow({ chunk, rowIndex }: EquipmentRowProps) {
   return (
     <div className={styles.row}>
       {chunk.map((slot, index) => (
-        <EquipmentSlot
+        <EquipmentSlotEntry
           key={index}
           slot={slot}
           rowIndex={rowIndex}
@@ -266,21 +274,25 @@ function EquipmentRow({ chunk, rowIndex }: EquipmentRowProps) {
 }
 
 interface EquipmentSlotProps {
-  slot: BlitzStaticEquipmentPresetComponent_EquipmentSlot;
+  slot: EquipmentSlot;
   rowIndex: number;
   columnIndex: number;
 }
 
-function EquipmentSlot({ slot, rowIndex, columnIndex }: EquipmentSlotProps) {
+function EquipmentSlotEntry({
+  slot,
+  rowIndex,
+  columnIndex,
+}: EquipmentSlotProps) {
   const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
-  const tank = useProtagonistTank();
-  const equipment = useEquipment(tank.tank!);
-  const { price } = equipment.price.unlock_slot_prices[equipmentIndex];
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const equipment = useEquipmentPreset(tank.equipment_preset);
+  // const { price } = equipment.price.unlock_slot_prices[equipmentIndex];
 
   return (
     <div className={styles.slots}>
       <div className={styles.options}>
-        {slot.options_catalog_i_ds.map((id, index) => (
+        {slot.options.map((id, index) => (
           <EquipmentOption
             key={id}
             optionIndex={index}
@@ -290,7 +302,7 @@ function EquipmentSlot({ slot, rowIndex, columnIndex }: EquipmentSlotProps) {
         ))}
       </div>
 
-      <Price price={price!} />
+      {/* <Price price={price!} /> */}
     </div>
   );
 }
@@ -307,11 +319,14 @@ function EquipmentOption({
   columnIndex,
 }: EquipmentOptionProps) {
   const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
-  const tank = useProtagonistTank();
-  const equipment = useEquipment(tank.tank!);
-  const slot = equipment.preset.slots[equipmentIndex];
-  const id = slot.options_catalog_i_ds[optionIndex];
-  const gameStrings = useGameStrings("EquipmentEntity");
+
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const equipmentPreset = useEquipmentPreset(tank.equipment_preset);
+  const unwrap = useUnwrapper();
+
+  const slot = equipmentPreset.slots[equipmentIndex];
+  const id = slot.options[optionIndex];
+  const specificEquipment = equipment.equipments[id];
 
   const isSelected = Tankopedia.use(
     (state) =>
@@ -320,13 +335,13 @@ function EquipmentOption({
   );
 
   return (
-    <Tooltip tooltip={gameStrings[equipment.equipments[id].equipment_name]}>
+    <Tooltip tooltip={unwrap(specificEquipment.name)}>
       <Button
         color={isSelected ? undefined : "gray"}
         variant={isSelected ? "surface" : "soft"}
         data-selected={isSelected}
         radius="1"
-        parentArray
+        listChild
         className={styles.slot}
         onClick={() => {
           Tankopedia.mutate((draft) => {
@@ -344,292 +359,292 @@ function EquipmentOption({
   );
 }
 
-function Modules() {
-  const strings = useStrings();
-  const tank = useProtagonistTank();
-  const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
-  const alternates = Tankopedia.use((state) => state.protagonist.alternates);
-  const isStock = useMemo(() => {
-    return tank.tank!.upgrade_lines.every((line) => {
-      if (isAlternativeLine(line.name)) return true;
-      return upgrades[line.name] === 0;
-    });
-  }, [upgrades]);
-  const isUpgraded = useMemo(() => {
-    return tank.tank!.upgrade_lines.every((line) => {
-      if (isAlternativeLine(line.name)) return true;
+// function Modules() {
+//   const strings = useStrings();
+//   const tank = useDuel("protagonist", DuelModule.Tank);
+//   const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
+//   const alternates = Tankopedia.use((state) => state.protagonist.alternates);
+//   const isStock = useMemo(() => {
+//     return tank.tank!.upgrade_lines.every((line) => {
+//       if (isAlternativeLine(line.name)) return true;
+//       return upgrades[line.name] === 0;
+//     });
+//   }, [upgrades]);
+//   const isUpgraded = useMemo(() => {
+//     return tank.tank!.upgrade_lines.every((line) => {
+//       if (isAlternativeLine(line.name)) return true;
 
-      return (
-        upgrades[line.name] === line.stages.length - 1 ||
-        (line.name in alternates && alternates[line.name])
-      );
-    });
-  }, [upgrades]);
+//       return (
+//         upgrades[line.name] === line.stages.length - 1 ||
+//         (line.name in alternates && alternates[line.name])
+//       );
+//     });
+//   }, [upgrades]);
 
-  return (
-    <div className={styles.section}>
-      <div className={styles.header}>
-        <Heading size="4">{strings.tanks.loadout.modules}</Heading>
+//   return (
+//     <div className={styles.section}>
+//       <div className={styles.header}>
+//         <Heading size="4">{strings.tanks.loadout.modules}</Heading>
 
-        <div className={styles["upgrade-buttons"]}>
-          <IconButton
-            variant={isStock ? "solid" : "soft"}
-            size="minor"
-            array
-            onClick={() => {
-              Tankopedia.mutate((draft) => {
-                for (const line of tank.tank!.upgrade_lines) {
-                  if (isAlternativeLine(line.name)) continue;
+//         <div className={styles["upgrade-buttons"]}>
+//           <IconButton
+//             variant={isStock ? "solid" : "soft"}
+//             size="minor"
+//             array
+//             onClick={() => {
+//               Tankopedia.mutate((draft) => {
+//                 for (const line of tank.tank!.upgrade_lines) {
+//                   if (isAlternativeLine(line.name)) continue;
 
-                  draft.protagonist.upgrades[line.name] = 0;
-                  draft.protagonist.alternates[line.name] = false;
-                }
-              });
-            }}
-            color="gray"
-          >
-            <DoubleArrowLeftIcon />
-          </IconButton>
+//                   draft.protagonist.upgrades[line.name] = 0;
+//                   draft.protagonist.alternates[line.name] = false;
+//                 }
+//               });
+//             }}
+//             color="gray"
+//           >
+//             <DoubleArrowLeftIcon />
+//           </IconButton>
 
-          <IconButton
-            variant={isUpgraded ? "solid" : "soft"}
-            size="minor"
-            array
-            onClick={() => {
-              Tankopedia.mutate((draft) => {
-                for (const line of tank.tank!.upgrade_lines) {
-                  draft.protagonist.upgrades[line.name] =
-                    line.stages.length - 1;
+//           <IconButton
+//             variant={isUpgraded ? "solid" : "soft"}
+//             size="minor"
+//             array
+//             onClick={() => {
+//               Tankopedia.mutate((draft) => {
+//                 for (const line of tank.tank!.upgrade_lines) {
+//                   draft.protagonist.upgrades[line.name] =
+//                     line.stages.length - 1;
 
-                  if (isAlternativeLine(line.name)) {
-                    const original = originalLineName(line.name)!;
-                    draft.protagonist.alternates[original] = true;
-                  }
-                }
-              });
-            }}
-            color="gray"
-          >
-            <DoubleArrowRightIcon />
-          </IconButton>
-        </div>
-      </div>
+//                   if (isAlternativeLine(line.name)) {
+//                     const original = originalLineName(line.name)!;
+//                     draft.protagonist.alternates[original] = true;
+//                   }
+//                 }
+//               });
+//             }}
+//             color="gray"
+//           >
+//             <DoubleArrowRightIcon />
+//           </IconButton>
+//         </div>
+//       </div>
 
-      <div className={styles.lines}>
-        {/* TODO: hide lines with 1 module except for alts */}
-        {tank.tank!.upgrade_lines.map((line) => (
-          <Line
-            key={line.name}
-            name={line.name}
-            lines={tank.tank!.upgrade_lines}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
+//       <div className={styles.lines}>
+//         {/* TODO: hide lines with 1 module except for alts */}
+//         {tank.tank!.upgrade_lines.map((line) => (
+//           <Line
+//             key={line.name}
+//             name={line.name}
+//             lines={tank.tank!.upgrade_lines}
+//           />
+//         ))}
+//       </div>
+//     </div>
+//   );
+// }
 
-interface LineProps {
-  name: string;
-  lines: UpgradeLine[];
-}
+// interface LineProps {
+//   name: string;
+//   lines: UpgradeLine[];
+// }
 
-function Line({ name, lines }: LineProps) {
-  const combinedLines = useMemo(() => {
-    const names: string[] = [name];
+// function Line({ name, lines }: LineProps) {
+//   const combinedLines = useMemo(() => {
+//     const names: string[] = [name];
 
-    for (const originalLine in alternativeLines) {
-      const alternativeLine = alternativeLines[originalLine];
+//     for (const originalLine in alternativeLines) {
+//       const alternativeLine = alternativeLines[originalLine];
 
-      if (
-        originalLine === name &&
-        lines.some((line) => line.name === alternativeLine)
-      ) {
-        names.push(alternativeLine);
-      }
-    }
+//       if (
+//         originalLine === name &&
+//         lines.some((line) => line.name === alternativeLine)
+//       ) {
+//         names.push(alternativeLine);
+//       }
+//     }
 
-    return names;
-  }, [name]);
+//     return names;
+//   }, [name]);
 
-  return (
-    <div className={styles.line}>
-      {!isAlternativeLine(name) &&
-        combinedLines.map((name) => (
-          <div className={styles["chunks-wrapper"]}>
-            <LineInner key={name} name={name} lines={lines} />
-          </div>
-        ))}
-    </div>
-  );
-}
+//   return (
+//     <div className={styles.line}>
+//       {!isAlternativeLine(name) &&
+//         combinedLines.map((name) => (
+//           <div className={styles["chunks-wrapper"]}>
+//             <LineInner key={name} name={name} lines={lines} />
+//           </div>
+//         ))}
+//     </div>
+//   );
+// }
 
-function LineInner({ name, lines }: LineProps) {
-  const line = lines.find((line) => line.name === name)!;
+// function LineInner({ name, lines }: LineProps) {
+//   const line = lines.find((line) => line.name === name)!;
 
-  return chunk(line.stages, maxModulesPerRow).map((chunk, wrapIndex) => (
-    <div className={styles["line-wrap"]}>
-      {wrapIndex > 0 && (
-        <Text size="minor" className={styles["wrap-marker"]} lowContrast>
-          <CornerBottomLeftIcon />
-        </Text>
-      )}
+//   return chunk(line.stages, maxModulesPerRow).map((chunk, wrapIndex) => (
+//     <div className={styles["line-wrap"]}>
+//       {wrapIndex > 0 && (
+//         <Text size="minor" className={styles["wrap-marker"]} lowContrast>
+//           <CornerBottomLeftIcon />
+//         </Text>
+//       )}
 
-      {chunk.map((stage, elementIndex) => (
-        <LineElement
-          key={elementIndex}
-          index={wrapIndex * maxModulesPerRow + elementIndex}
-          lineName={name}
-          stage={stage}
-        />
-      ))}
-    </div>
-  ));
-}
+//       {chunk.map((stage, elementIndex) => (
+//         <LineElement
+//           key={elementIndex}
+//           index={wrapIndex * maxModulesPerRow + elementIndex}
+//           lineName={name}
+//           stage={stage}
+//         />
+//       ))}
+//     </div>
+//   ));
+// }
 
-interface LineElementProps {
-  index: number;
-  lineName: string;
-  stage: StageParameters;
-}
+// interface LineElementProps {
+//   index: number;
+//   lineName: string;
+//   stage: StageParameters;
+// }
 
-function LineElement({ index, lineName, stage }: LineElementProps) {
-  const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
-  const alternates = Tankopedia.use((state) => state.protagonist.alternates);
-  const tank = useProtagonistTank();
-  const strings = useStrings();
-  const gameStrings = useGameStrings("TankEntity");
-  const upgradePreset = useUpgradePreset(tank.tank!.tank_upgrade_preset);
+// function LineElement({ index, lineName, stage }: LineElementProps) {
+//   const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
+//   const alternates = Tankopedia.use((state) => state.protagonist.alternates);
+//   const tank = useDuel("protagonist", DuelModule.Tank);
+//   const strings = useStrings();
+//   const gameStrings = useGameStrings("TankEntity");
+//   const upgradePreset = useUpgradePreset(tank.tank!.tank_upgrade_preset);
 
-  let price: StandardPrice | undefined;
+//   let price: StandardPrice | undefined;
 
-  switch (stage.grade) {
-    case Grade.GRADE_COMMON:
-      price = upgradePreset.common_grade_price;
-      break;
+//   switch (stage.grade) {
+//     case Grade.GRADE_COMMON:
+//       price = upgradePreset.common_grade_price;
+//       break;
 
-    case Grade.GRADE_RARE:
-      price = upgradePreset.rare_grade_price;
-      break;
+//     case Grade.GRADE_RARE:
+//       price = upgradePreset.rare_grade_price;
+//       break;
 
-    case Grade.GRADE_EPIC:
-      price = upgradePreset.unique_grade_price;
-      break;
+//     case Grade.GRADE_EPIC:
+//       price = upgradePreset.unique_grade_price;
+//       break;
 
-    case Grade.GRADE_LEGENDARY:
-      price = upgradePreset.legendary_grade_price;
-      break;
-  }
+//     case Grade.GRADE_LEGENDARY:
+//       price = upgradePreset.legendary_grade_price;
+//       break;
+//   }
 
-  for (const override of upgradePreset.prices_overrides) {
-    if (override.stage_tech_name !== stage.tech_name) continue;
-    price = override.price;
-  }
+//   for (const override of upgradePreset.prices_overrides) {
+//     if (override.stage_tech_name !== stage.tech_name) continue;
+//     price = override.price;
+//   }
 
-  price ??= StandardPrice.create();
+//   price ??= StandardPrice.create();
 
-  let isSelected: boolean;
+//   let isSelected: boolean;
 
-  if (isAlternativeLine(lineName)) {
-    const originalLine = originalLineName(lineName);
-    isSelected = alternates[originalLine!];
-  } else {
-    if (alternates[lineName]) {
-      isSelected = false;
-    } else {
-      isSelected = upgrades[lineName] === index;
-    }
-  }
+//   if (isAlternativeLine(lineName)) {
+//     const originalLine = originalLineName(lineName);
+//     isSelected = alternates[originalLine!];
+//   } else {
+//     if (alternates[lineName]) {
+//       isSelected = false;
+//     } else {
+//       isSelected = upgrades[lineName] === index;
+//     }
+//   }
 
-  return (
-    <div className={styles.wrapper}>
-      <Tooltip tooltip={gameStrings[stage.display_name]}>
-        <Button
-          className={styles.stage}
-          color={isSelected ? undefined : "gray"}
-          variant={isSelected ? "surface" : "soft"}
-          radius="1"
-          onClick={() => {
-            // TODO: make minimum selectable upgrade the last free module for tanks like the destiny
+//   return (
+//     <div className={styles.wrapper}>
+//       <Tooltip tooltip={gameStrings[stage.display_name]}>
+//         <Button
+//           className={styles.stage}
+//           color={isSelected ? undefined : "gray"}
+//           variant={isSelected ? "surface" : "soft"}
+//           radius="1"
+//           onClick={() => {
+//             // TODO: make minimum selectable upgrade the last free module for tanks like the destiny
 
-            Tankopedia.mutate((draft) => {
-              const tankData = tank.tank!;
+//             Tankopedia.mutate((draft) => {
+//               const tankData = tank.tank!;
 
-              if (isAlternativeLine(lineName)) {
-                const originalLine = originalLineName(lineName)!;
+//               if (isAlternativeLine(lineName)) {
+//                 const originalLine = originalLineName(lineName)!;
 
-                draft.protagonist.alternates[originalLine] = true;
-                draft.protagonist.upgrades[lineName] = index;
-              } else {
-                draft.protagonist.alternates[lineName] = false;
-                draft.protagonist.upgrades[lineName] = index;
-              }
+//                 draft.protagonist.alternates[originalLine] = true;
+//                 draft.protagonist.upgrades[lineName] = index;
+//               } else {
+//                 draft.protagonist.alternates[lineName] = false;
+//                 draft.protagonist.upgrades[lineName] = index;
+//               }
 
-              for (const required of stage.required_upgrades) {
-                for (const line of tankData.upgrade_lines) {
-                  let i = 0;
+//               for (const required of stage.required_upgrades) {
+//                 for (const line of tankData.upgrade_lines) {
+//                   let i = 0;
 
-                  for (const candidateStage of line.stages) {
-                    if (candidateStage.tech_name === required) {
-                      draft.protagonist.upgrades[line.name] = Math.max(
-                        draft.protagonist.upgrades[line.name],
-                        i,
-                      );
-                    }
+//                   for (const candidateStage of line.stages) {
+//                     if (candidateStage.tech_name === required) {
+//                       draft.protagonist.upgrades[line.name] = Math.max(
+//                         draft.protagonist.upgrades[line.name],
+//                         i,
+//                       );
+//                     }
 
-                    i++;
-                  }
-                }
-              }
+//                     i++;
+//                   }
+//                 }
+//               }
 
-              for (const line of tankData.upgrade_lines) {
-                if (draft.protagonist.alternates[line.name]) {
-                  continue;
-                }
+//               for (const line of tankData.upgrade_lines) {
+//                 if (draft.protagonist.alternates[line.name]) {
+//                   continue;
+//                 }
 
-                let i = draft.protagonist.upgrades[line.name];
+//                 let i = draft.protagonist.upgrades[line.name];
 
-                while (i > 0) {
-                  const currentStage = line.stages[i];
+//                 while (i > 0) {
+//                   const currentStage = line.stages[i];
 
-                  const valid = currentStage.required_upgrades.every(
-                    (required) => {
-                      for (const otherLine of tankData.upgrade_lines) {
-                        const idx = draft.protagonist.upgrades[otherLine.name];
+//                   const valid = currentStage.required_upgrades.every(
+//                     (required) => {
+//                       for (const otherLine of tankData.upgrade_lines) {
+//                         const idx = draft.protagonist.upgrades[otherLine.name];
 
-                        if (otherLine.stages[idx]?.tech_name === required) {
-                          return true;
-                        }
-                      }
+//                         if (otherLine.stages[idx]?.tech_name === required) {
+//                           return true;
+//                         }
+//                       }
 
-                      return false;
-                    },
-                  );
+//                       return false;
+//                     },
+//                   );
 
-                  if (valid) break;
+//                   if (valid) break;
 
-                  i--;
-                }
+//                   i--;
+//                 }
 
-                draft.protagonist.upgrades[line.name] = i;
-              }
-            });
-          }}
-        >
-          <img
-            className={styles.icon}
-            src={`/media/modules/${stage.stage_type}.webp`}
-          />
+//                 draft.protagonist.upgrades[line.name] = i;
+//               }
+//             });
+//           }}
+//         >
+//           <img
+//             className={styles.icon}
+//             src={`/media/modules/${stage.stage_type}.webp`}
+//           />
 
-          <Text weight="light" lowContrast size="minor" className={styles.tier}>
-            {isAlternativeLine(lineName)
-              ? strings.tanks.loadout.alternative
-              : romanize(stage.number)}
-          </Text>
-        </Button>
-      </Tooltip>
+//           <Text weight="light" lowContrast size="minor" className={styles.tier}>
+//             {isAlternativeLine(lineName)
+//               ? strings.tanks.loadout.alternative
+//               : romanize(stage.number)}
+//           </Text>
+//         </Button>
+//       </Tooltip>
 
-      {<Price className={styles.price} price={price} />}
-    </div>
-  );
-}
+//       {<Price className={styles.price} price={price} />}
+//     </div>
+//   );
+// }

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

@@ -10,8 +10,6 @@ import { modelTransformEvent } from "../../core/blitzkit/modelTransform";
 import { Pose, poseEvent } from "../../core/blitzkit/pose";
 import { useEquipment } from "../../hooks/useEquipment";
 import { useModel } from "../../hooks/useModel";
-import { useProtagonistGun } from "../../hooks/useProtagonistGun";
-import { useProtagonistTank } from "../../hooks/useProtagonistTank";
 import { useProtagonistTurret } from "../../hooks/useProtagonistTurret";
 import { Tankopedia } from "../../stores/tankopedia";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
@@ -44,8 +42,8 @@ export const TankopediaSandbox = forwardRef<
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const hasDownImprovedVerticalStabilizer = useEquipment(124);
 
-  const tank = useProtagonistTank();
-  const gun = useProtagonistGun();
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const gun = useDuel("protagonist", DuelModule.Gun);
   const turret = useProtagonistTurret();
 
   const model = Tankopedia.use((state) => state.protagonist.model);

packages/website/src/config/equipment.ts

@@ -0,0 +1 @@
+export const equipmentColumns = 3;

packages/website/src/hooks/useEquipment.ts

@@ -7,7 +7,7 @@ const tanks = await api.tanks();
 
 export type DuelSide = "protagonist" | "antagonist";
 
-export function useEquipment(id: number, side: DuelSide) {
+export function useEquipment(side: DuelSide, id: number) {
   const member = Tankopedia.use((state) => state[side]);
   const tank = tanks.tanks[member.tank];
   const preset = equipment.presets[tank.equipment_preset];

packages/website/src/hooks/useEquipmentPreset.ts

@@ -1,7 +1,7 @@
 import { api } from "../api/dynamic";
 
-const equipmentDefinitions = await api.equipment();
+const equipment = await api.equipment();
 
 export function useEquipmentPreset(preset: string) {
-  return equipmentDefinitions.presets[preset];
+  return equipment.presets[preset];
 }

packages/website/src/tankopedia/createTankState.ts

@@ -13,12 +13,6 @@ const models = await api.models();
 const provisions = await api.provisions();
 const scripts = await api.scripts();
 
-export const genericDefaultEquipmentMatrix: EquipmentMatrix = [
-  [-1, 1, -1],
-  [0, 0, 0],
-  [0, 0, 0],
-];
-
 export function createTankState(tank: TankDefinition) {
   const turret = tank.turrets.at(-1)!;
   const gun = turret.guns.at(-1)!;
@@ -35,7 +29,7 @@ export function createTankState(tank: TankDefinition) {
     assault_distance: (gun.assault_ranges?.ranges[0].distance ?? 0) / 2,
     speed: 0,
 
-    equipment_matrix: genericDefaultEquipmentMatrix,
+    equipment: {},
     status: createTankStatus(),
 
     model: models.models[turret.id],

packages/website/src/tankopedia/tankState.ts

@@ -1,5 +1,4 @@
-import type { ModelDefinition } from "@blitzkit/core";
-import type { EquipmentMatrix } from "./createTankState";
+import type { ModelDefinition } from "@blitzkit/protos";
 
 export interface TankState {
   tank: number;
@@ -13,7 +12,7 @@ export interface TankState {
   assault_distance: number;
   speed: number;
 
-  equipment_matrix: EquipmentMatrix;
+  equipment: Record<number, number>;
   status: Record<VehicleStatusKey, boolean>;
 
   model: ModelDefinition;