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)} + + + + ); + }); +}