diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 8c625aa5e..3c57664e8 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -199,7 +199,8 @@
"tanks": {
"loadout": {
- "modules": "Modules"
+ "modules": "Modules",
+ "alternative": "Alt"
},
"search": {
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css
index ec8441172..294d96371 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css
+++ b/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;
- }
}
}
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx
index 73da9ca12..54ab550a4 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx
+++ b/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() {
{tank.tank!.upgrade_lines.map((line) => (
-
+
))}
@@ -31,94 +35,114 @@ export function TankopediaLoadout() {
}
interface LineProps {
- line: UpgradeLine;
+ line: string;
+ lines: UpgradeLine[];
}
-function Line({ line }: LineProps) {
- const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
- const id = Tankopedia.use((state) => state.protagonist.id);
- const tank = useAwait(() => api.tank(id), `tank-${id}`);
+const mergeLines = {
+ alternative_guns: "guns",
+} as Record;
+
+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 (
- {line.name}
-
- {line.stages.map((stage, index) => {
- const isSelected = upgrades[line.name] === index;
-
- return (
-
- {/* {index !== 0 && (
-
-
-
- )} */}
-
- {
- Tankopedia.mutate((draft) => {
- draft.protagonist.upgrades[line.name] = index;
-
- for (const required of stage.required_upgrades) {
- for (const line of tank.tank!.upgrade_lines) {
- let i = 0;
-
- for (const stage of line.stages) {
- if (stage.tech_name === required) {
- draft.protagonist.upgrades[line.name] = Math.max(
- draft.protagonist.upgrades[line.name],
- i,
- );
- }
-
- i++;
- }
- }
- }
-
- for (const line of tank.tank!.upgrade_lines) {
- 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) {
- return true;
- }
- }
-
- return false;
- },
- );
-
- if (valid) break;
-
- i--;
- }
-
- draft.protagonist.upgrades[line.name] = i;
- }
- });
- }}
- >
-
- {/* {stage.display_name} */}
- {/* {stage.grade} */}
-
-
- {romanize(stage.number)}
-
-
-
- );
- })}
+ {!(line in mergeLines) &&
+ combinedLines.map((line) =>
)}
);
}
+
+function LineInner({ line, lines }: LineProps) {
+ 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 (
+
+ {
+ Tankopedia.mutate((draft) => {
+ draft.protagonist.upgrades[line] = index;
+
+ for (const required of stage.required_upgrades) {
+ for (const line of tank.tank!.upgrade_lines) {
+ let i = 0;
+
+ for (const stage of line.stages) {
+ if (stage.tech_name === required) {
+ draft.protagonist.upgrades[line.name] = Math.max(
+ draft.protagonist.upgrades[line.name],
+ i,
+ );
+ }
+
+ i++;
+ }
+ }
+ }
+
+ for (const line of tank.tank!.upgrade_lines) {
+ 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) {
+ return true;
+ }
+ }
+
+ return false;
+ },
+ );
+
+ if (valid) break;
+
+ i--;
+ }
+
+ draft.protagonist.upgrades[line.name] = i;
+ }
+ });
+ }}
+ >
+
+ {/* {stage.display_name} */}
+ {/* {stage.grade} */}
+
+
+ {line in mergeLines
+ ? strings.tanks.loadout.alternative
+ : romanize(stage.number)}
+
+
+
+ );
+ });
+}