exclusive alternate guns

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

@@ -39,7 +39,7 @@ function PriceEntry({ entry }: PriceEntryProps) {
   const [, iconName] = entry.currency_price.currency_catalog_id.split(".");
 
   return (
-    <Text size="minor" lowContrast className={styles.entry}>
+    <Text weight="light" size="minor" lowContrast className={styles.entry}>
       <div className={styles.wrapper}>
         <img className={styles.icon} src={`/api/currencies/${iconName}.webp`} />
         {formatCompact(locale, entry.currency_price.amount)}

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

@@ -21,7 +21,7 @@
         width: 1em;
         height: 1em;
 
-        padding: var(--space-4) 0;
+        padding: var(--space-3) 0;
 
         transform: translate(var(--space-1), calc(-1 * var(--space-1)));
       }

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

@@ -7,6 +7,7 @@ import { useMemo } from "react";
 import {
   alternativeLines,
   isAlternativeLine,
+  originalLineName,
 } from "../../config/alternativeLines";
 import { useProtagonist } from "../../hooks/useProtagonist";
 import { useStrings } from "../../hooks/useStrings";
@@ -90,6 +91,7 @@ interface LineElementProps {
 
 function LineElement({ index, lineName, stage }: LineElementProps) {
   const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
+  const alternates = Tankopedia.use((state) => state.protagonist.alternates);
   const tank = useProtagonist();
   const strings = useStrings();
   const upgradePreset = useUpgradePreset(tank.tank!.tank_upgrade_preset);
@@ -119,7 +121,18 @@ function LineElement({ index, lineName, stage }: LineElementProps) {
     price = override.price;
   }
 
-  const isSelected = upgrades[lineName] === index;
+  let isSelected: boolean;
+
+  if (isAlternativeLine(lineName)) {
+    const originalLine = originalLineName(lineName);
+    isSelected = alternates[originalLine!];
+  } else {
+    if (alternates[lineName]) {
+      isSelected = false;
+    } else {
+      isSelected = upgrades[lineName] === index;
+    }
+  }
 
   return (
     <Button
@@ -129,14 +142,24 @@ function LineElement({ index, lineName, stage }: LineElementProps) {
       className={styles.stage}
       onClick={() => {
         Tankopedia.mutate((draft) => {
-          draft.protagonist.upgrades[lineName] = index;
+          const tankData = tank.tank!;
+
+          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;
+          }
 
           for (const required of stage.required_upgrades) {
-            for (const line of tank.tank!.upgrade_lines) {
+            for (const line of tankData.upgrade_lines) {
               let i = 0;
 
-              for (const stage of line.stages) {
-                if (stage.tech_name === required) {
+              for (const candidateStage of line.stages) {
+                if (candidateStage.tech_name === required) {
                   draft.protagonist.upgrades[line.name] = Math.max(
                     draft.protagonist.upgrades[line.name],
                     i,
@@ -148,16 +171,21 @@ function LineElement({ index, lineName, stage }: LineElementProps) {
             }
           }
 
-          for (const line of tank.tank!.upgrade_lines) {
+          for (const line of tankData.upgrade_lines) {
+            if (draft.protagonist.alternates[line.name]) {
+              continue;
+            }
+
             let i = draft.protagonist.upgrades[line.name];
 
             while (i > 0) {
               const currentStage = line.stages[i];
-              const valid = currentStage.required_upgrades.every((required) => {
-                for (const line of tank.tank!.upgrade_lines) {
-                  const idx = draft.protagonist.upgrades[line.name];
 
-                  if (line.stages[idx]?.tech_name === required) {
+              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;
                   }
                 }
@@ -181,7 +209,7 @@ function LineElement({ index, lineName, stage }: LineElementProps) {
       />
       {/* {stage.display_name} */}
 
-      <Text lowContrast size="minor" className={styles.tier}>
+      <Text weight="light" lowContrast size="minor" className={styles.tier}>
         {isAlternativeLine(lineName)
           ? strings.tanks.loadout.alternative
           : romanize(stage.number)}

packages/website-ue/src/config/alternativeLines.ts

@@ -11,3 +11,11 @@ export function isAlternativeLine(line: string) {
 
   return false;
 }
+
+export function originalLineName(line: string) {
+  for (const key in alternativeLines) {
+    if (alternativeLines[key] === line) {
+      return key;
+    }
+  }
+}

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

@@ -14,6 +14,10 @@ import {
   TankAttributeChange_Modifier,
   VisualChanges,
 } from "@protos/game/proto/legacy/blitz_static_tank_upgrade_single_stage";
+import {
+  isAlternativeLine,
+  originalLineName,
+} from "../config/alternativeLines";
 
 function patch(stage0: StageParameters, stage1: StageParameters) {
   if (stage1.number !== ++stage0.number) {
@@ -239,11 +243,28 @@ function patch(stage0: StageParameters, stage1: StageParameters) {
 export function aggregateParameters(
   tank: TankCatalogComponent,
   upgrades: Record<string, number>,
+  alternates: Record<string, boolean>,
 ) {
   const stage0 = StageParameters.create({});
 
   for (const line of tank.upgrade_lines) {
-    const stage = upgrades[line.name];
+    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;
 

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

@@ -17,7 +17,11 @@ export type ComputedCharacteristics = Record<
 >;
 
 export function computeCharacteristics(tank: Tank, state: TankState) {
-  const parameters = aggregateParameters(tank.tank!, state.upgrades);
+  const parameters = aggregateParameters(
+    tank.tank!,
+    state.upgrades,
+    state.alternates,
+  );
 
   const computed: Partial<ComputedCharacteristics> = {};
 

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

@@ -1,17 +1,29 @@
 import type { Tank } from "@protos/blitzkit/tank";
+import { alternativeLines } from "../config/alternativeLines";
 import { TerrainHardness, type TankState } from "./tankState";
 
 export function createTankState({ tank, id }: Tank) {
   const upgrades: Record<string, number> = {};
+  const alternates: Record<string, boolean> = {};
 
   for (const upgradeLine of tank!.upgrade_lines) {
     upgrades[upgradeLine.name] = upgradeLine.stages.length - 1;
+
+    if (
+      upgradeLine.name in alternativeLines &&
+      tank!.upgrade_lines.some(
+        (line) => line.name === alternativeLines[upgradeLine.name],
+      )
+    ) {
+      alternates[upgradeLine.name] = true;
+    }
   }
 
   return {
     id,
 
     upgrades,
+    alternates,
 
     shell: 0,
     speed: 0,

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

@@ -8,6 +8,7 @@ export interface TankState {
   id: string;
 
   upgrades: Record<string, number>;
+  alternates: Record<string, boolean>;
 
   shell: number;
   speed: number;