alts and batch alignemnt

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

@@ -60,56 +60,61 @@
 
     .line {
       display: flex;
-      flex-direction: column;
 
       gap: var(--space-3);
 
-      .line-wrap {
+      .chunks-wrapper {
         display: flex;
-        align-items: center;
+        flex-direction: column;
-
         gap: var(--space-3);
 
-        .wrap-marker {
+        .line-wrap {
-          padding-bottom: var(--font-size-minor);
-
-          svg {
-            width: 1em;
-            height: 1em;
-          }
-        }
-
-        .wrapper {
           display: flex;
-          flex-direction: column;
           align-items: center;
-          gap: var(--space-2);
 
-          .stage {
+          gap: var(--space-3);
-            position: relative;
 
-            padding: var(--space-3);
+          .wrap-marker {
+            padding-bottom: var(--font-size-minor);
 
-            font-size: 2em;
+            svg {
-
-            .icon {
               width: 1em;
               height: 1em;
-
-              transform: translate(var(--space-1), var(--space-1));
             }
+          }
 
-            .tier {
+          .wrapper {
-              position: absolute;
+            display: flex;
-              left: var(--space-2);
+            flex-direction: column;
-              top: var(--space-2);
+            align-items: center;
-            }
+            gap: var(--space-2);
 
-            .price {
+            .stage {
-              position: absolute;
+              position: relative;
-              left: 50%;
+
-              bottom: var(--space-2);
+              padding: var(--space-3);
-              transform: translateX(-50%);
+
+              font-size: 2em;
+
+              .icon {
+                width: 1em;
+                height: 1em;
+
+                transform: translate(var(--space-1), var(--space-1));
+              }
+
+              .tier {
+                position: absolute;
+                left: var(--space-2);
+                top: var(--space-2);
+              }
+
+              .price {
+                position: absolute;
+                left: 50%;
+                bottom: var(--space-2);
+                transform: translateX(-50%);
+              }
             }
           }
         }

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

@@ -130,16 +130,11 @@ function EquipmentOption({
 }: EquipmentOptionProps) {
   const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
 
-  const tank = useProtagonist();
-  const equipment = useEquipment(tank.tank!);
   const isSelected = Tankopedia.use(
     (state) =>
       equipmentIndex in state.protagonist.equipment &&
       state.protagonist.equipment[equipmentIndex] === optionIndex,
   );
-  const name =
-    equipment.preset.slots[equipmentIndex].options_catalog_i_ds[optionIndex];
-  const equipmentData = equipment.equipments[name];
 
   return (
     <Button
@@ -248,7 +243,9 @@ function Line({ name, lines }: LineProps) {
     <div className={styles.line}>
       {!isAlternativeLine(name) &&
         combinedLines.map((name) => (
-          <LineInner key={name} name={name} lines={lines} />
+          <div className={styles["chunks-wrapper"]}>
+            <LineInner key={name} name={name} lines={lines} />
+          </div>
         ))}
     </div>
   );
@@ -338,6 +335,8 @@ function LineElement({ index, lineName, stage }: LineElementProps) {
         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!;
 

packages/website-ue/src/tankopedia/aggregateParameters.ts

@@ -1,5 +1,4 @@
 import { StandardSinglePrice } from "@protos/blitz_static_standard_single_price";
-import type { TankCatalogComponent } from "@protos/blitz_static_tank_component";
 import { PenetrationGroup } from "@protos/blitz_static_tank_penetration_group";
 import {
   ModuleUpgrade,
@@ -14,9 +13,11 @@ import {
   TankAttributeChange_Modifier,
   VisualChanges,
 } from "@protos/blitz_static_tank_upgrade_single_stage";
-import { isAlternativeLine, originalLineName } from "../config/modules";
 
-function patch(stage0: StageParameters, stage1: StageParameters) {
+export function aggregateParameters(
+  stage0: StageParameters,
+  stage1: StageParameters,
+) {
   if (stage1.number !== ++stage0.number) {
     throw new Error("Change stage number must be 1 greater than base");
   }
@@ -236,45 +237,3 @@ function patch(stage0: StageParameters, stage1: StageParameters) {
     }
   }
 }
-
-export function aggregateParameters(
-  tank: TankCatalogComponent,
-  upgrades: Record<string, number>,
-  alternates: Record<string, boolean>,
-  equipmentParameters: StageParameters[],
-) {
-  const stage0 = StageParameters.create({});
-
-  for (const line of tank.upgrade_lines) {
-    let stage: number;
-
-    if (isAlternativeLine(line.name)) {
-      const originalLine = originalLineName(line.name)!;
-
-      if (alternates[originalLine]) {
-        stage = 0;
-      } else {
-        continue;
-      }
-    } else {
-      if (alternates[line.name]) {
-        stage = line.stages.length - 2;
-      } else {
-        stage = upgrades[line.name];
-      }
-    }
-
-    stage0.number = 0;
-
-    for (let i = 0; i <= stage; i++) {
-      patch(stage0, line.stages[i]);
-    }
-  }
-
-  for (const equipmentParameter of equipmentParameters) {
-    stage0.number = -1;
-    patch(stage0, equipmentParameter);
-  }
-
-  return stage0;
-}

packages/website-ue/src/tankopedia/characteristics.ts

@@ -38,11 +38,11 @@ export const characteristics = {
 
     if (isPump === 1) return GunType.AutoReloader;
 
-    const clipSize = attribute(
+    const clipSize = attributeSafe(
       TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE,
     );
 
-    if (clipSize === 1) return GunType.Regular;
+    if (clipSize === null || clipSize === 1) return GunType.Regular;
 
     return GunType.AutoLoader;
   },

packages/website-ue/src/tankopedia/computeCharacteristics.ts

@@ -1,9 +1,10 @@
-import type { StageParameters } from "@protos/blitz_static_tank_upgrade_single_stage";
 import {
   ShellUpgradeSingleChange_AttributeName,
+  StageParameters,
   TankAttributeChange_AttributeName,
 } from "@protos/blitz_static_tank_upgrade_single_stage";
 import type { Tank } from "@protos/tank";
+import { isAlternativeLine, originalLineName } from "../config/modules";
 import { useEquipment } from "../hooks/useEquipment";
 import { aggregateParameters } from "./aggregateParameters";
 import {
@@ -34,12 +35,38 @@ export function computeCharacteristics(
     equipmentParameters.push(data.upgrade_level!);
   }
 
-  const parameters = aggregateParameters(
+  const parameters = StageParameters.create();
-    tank.tank!,
+
-    state.upgrades,
+  for (const line of tank.tank!.upgrade_lines) {
-    state.alternates,
+    let stage: number;
-    equipmentParameters,
+
-  );
+    if (isAlternativeLine(line.name)) {
+      const originalLine = originalLineName(line.name)!;
+
+      if (state.alternates[originalLine]) {
+        stage = 0;
+      } else {
+        continue;
+      }
+    } else {
+      if (state.alternates[line.name]) {
+        stage = line.stages.length - 2;
+      } else {
+        stage = state.upgrades[line.name];
+      }
+    }
+
+    parameters.number = 0;
+
+    for (let i = 0; i <= stage; i++) {
+      aggregateParameters(parameters, line.stages[i]);
+    }
+  }
+
+  for (const equipmentParameter of equipmentParameters) {
+    parameters.number = -1;
+    aggregateParameters(parameters, equipmentParameter);
+  }
 
   const computed: Partial<ComputedCharacteristics> = {};
 
@@ -73,7 +100,7 @@ export function computeCharacteristics(
       (shell) => shell.shell_id === state.shell,
     );
 
-    if (!shell) {
+    if (shell === undefined) {
       throw new Error(
         `Shell ${ShellUpgradeSingleChange_AttributeName[name]} (${name}) not found`,
       );