combined alternative modules

packages/i18n/strings/en.json

@@ -199,7 +199,8 @@
 
   "tanks": {
     "loadout": {
-      "modules": "Modules"
+      "modules": "Modules",
+      "alternative": "Alt"
     },
 
     "search": {

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

@@ -16,6 +16,8 @@
       img {
         width: 1em;
         height: 1em;
+
+        transform: translate(var(--space-1), var(--space-1));
       }
 
       .tier {
@@ -24,9 +26,5 @@
         top: var(--space-2);
       }
     }
-
-    .arrow {
-      display: contents;
-    }
   }
 }

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

@@ -1,6 +1,6 @@
 import type { UpgradeLine } from "@blitzkit/closed/protos/game/proto/legacy/blitz_static_tank_upgrade_line";
 import { romanize } from "@blitzkit/core";
-import { Fragment } from "react";
+import { Fragment, useMemo } from "react";
 import { api } from "../../core/api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
 import { useStrings } from "../../hooks/useStrings";
@@ -23,7 +23,11 @@ export function TankopediaLoadout() {
 
       <div className={styles.lines}>
         {tank.tank!.upgrade_lines.map((line) => (
-          <Line key={line.name} line={line} />
+          <Line
+            key={line.name}
+            line={line.name}
+            lines={tank.tank!.upgrade_lines}
+          />
         ))}
       </div>
     </Section>
@@ -31,36 +35,56 @@ export function TankopediaLoadout() {
 }
 
 interface LineProps {
-  line: UpgradeLine;
+  line: string;
+  lines: UpgradeLine[];
 }
 
-function Line({ line }: LineProps) {
+const mergeLines = {
-  const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
+  alternative_guns: "guns",
-  const id = Tankopedia.use((state) => state.protagonist.id);
+} as Record<string, string>;
-  const tank = useAwait(() => api.tank(id), `tank-${id}`);
+
+function Line({ line, lines }: LineProps) {
+  const combinedLines = useMemo(() => {
+    const lines: string[] = [line];
+
+    for (const key in mergeLines) {
+      if (mergeLines[key] === line) {
+        lines.push(key);
+      }
+    }
+
+    return lines;
+  }, [line]);
 
   return (
     <div className={styles.line}>
-      {line.name}
+      {!(line in mergeLines) &&
+        combinedLines.map((line) => <LineInner line={line} lines={lines} />)}
+    </div>
+  );
+}
 
-      {line.stages.map((stage, index) => {
+function LineInner({ line, lines }: LineProps) {
-        const isSelected = upgrades[line.name] === index;
+  const id = Tankopedia.use((state) => state.protagonist.id);
+  const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
+  const tank = useAwait(() => api.tank(id), `tank-${id}`);
+
+  const strings = useStrings();
+
+  return lines
+    .find((l) => l.name === line)!
+    .stages.map((stage, index) => {
+      const isSelected = upgrades[line] === index;
 
       return (
         <Fragment key={stage.tech_name}>
-            {/* {index !== 0 && (
-              <Text lowContrast className={styles.arrow}>
-                <CaretRightIcon width="1em" height="1em" />
-              </Text>
-            )} */}
-
           <IconButton
             variant={isSelected ? "solid" : "surface"}
             radius="1"
             className={styles.stage}
             onClick={() => {
               Tankopedia.mutate((draft) => {
-                  draft.protagonist.upgrades[line.name] = index;
+                draft.protagonist.upgrades[line] = index;
 
                 for (const required of stage.required_upgrades) {
                   for (const line of tank.tank!.upgrade_lines) {
@@ -113,12 +137,12 @@ function Line({ line }: LineProps) {
             {/* {stage.grade} */}
 
             <Text lowContrast size="minor" className={styles.tier}>
-                {romanize(stage.number)}
+              {line in mergeLines
+                ? strings.tanks.loadout.alternative
+                : romanize(stage.number)}
             </Text>
           </IconButton>
         </Fragment>
       );
-      })}
+    });
-    </div>
-  );
 }