mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
TankopediaLoadout
This commit is contained in:
tresabhi committed
1 parent
558a02b6ae
commit
488451d71f
9 files changed
+309
-299
No files matched your search
@@ -1,30 +1,38 @@
|
||||
import type { Consumable } from "@blitzkit/core";
|
||||
import { TrashIcon } from "@radix-ui/react-icons";
|
||||
import type { Consumable, EquipmentSlot } from "@blitzkit/protos";
|
||||
import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons";
|
||||
import { chunk } from "lodash-es";
|
||||
import { api } from "../../api/dynamic";
|
||||
import { equipmentColumns } from "../../config/equipment";
|
||||
import { useConsumables } from "../../hooks/useConsumables";
|
||||
import { useProtagonistGun } from "../../hooks/useProtagonistGun";
|
||||
import { useProtagonistTank } from "../../hooks/useProtagonistTank";
|
||||
import { DuelModule, useDuel } from "../../hooks/useDuel";
|
||||
import { useEquipmentPreset } from "../../hooks/useEquipmentPreset";
|
||||
import { useStrings } from "../../hooks/useStrings";
|
||||
import { useTankCompatibility } from "../../hooks/useTankCompatibility";
|
||||
import { useUnwrapper } from "../../hooks/useUnwrapper";
|
||||
import { Tankopedia } from "../../stores/tankopedia";
|
||||
import { hasUpgrades } from "../../tankopedia/hasUpgrades";
|
||||
import { vehicleStatusKeys } from "../../tankopedia/tankState";
|
||||
import type { ComputedCharacteristics } from "../../types/characteristics";
|
||||
import { Button } from "../Button";
|
||||
import { Heading } from "../Heading";
|
||||
import { IconButton } from "../IconButton";
|
||||
import { Text } from "../Text";
|
||||
import { Tooltip } from "../Tooltip";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
const equipment = await api.equipment();
|
||||
|
||||
interface TankopediaLoadoutProps {
|
||||
characteristics: ComputedCharacteristics;
|
||||
}
|
||||
|
||||
export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
|
||||
const tank = useProtagonistTank();
|
||||
const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
const showModules = hasUpgrades(tank);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModules && <Modules />}
|
||||
{/* {showModules && <Modules />} */}
|
||||
<Equipment />
|
||||
<Consumables characteristics={characteristics} />
|
||||
<State />
|
||||
@@ -120,8 +128,8 @@ interface ConsumablesProps {
|
||||
function Consumables({ characteristics }: ConsumablesProps) {
|
||||
const strings = useStrings();
|
||||
const consumables = useConsumables();
|
||||
const tank = useProtagonistTank();
|
||||
const gun = useProtagonistGun();
|
||||
const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
const gun = useDuel("protagonist", DuelModule.Gun);
|
||||
const isCompatible = useTankCompatibility(tank, gun);
|
||||
|
||||
return (
|
||||
@@ -148,7 +156,7 @@ function Consumables({ characteristics }: ConsumablesProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Consumable key={id} id={Number(id)} consumable={consumable} />
|
||||
<ConsumableEntry key={id} id={Number(id)} consumable={consumable} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@@ -161,12 +169,12 @@ interface ConsumableProps {
|
||||
consumable: Consumable;
|
||||
}
|
||||
|
||||
function Consumable({ id, consumable }: ConsumableProps) {
|
||||
function ConsumableEntry({ id, consumable }: ConsumableProps) {
|
||||
const isSelected = Tankopedia.use((state) =>
|
||||
state.protagonist.consumables.includes(id),
|
||||
);
|
||||
const tank = useProtagonistTank();
|
||||
const unwrap = useUnwrap();
|
||||
const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
const unwrap = useUnwrapper();
|
||||
|
||||
return (
|
||||
<div className={styles["consumable-wrapper"]}>
|
||||
@@ -207,15 +215,15 @@ function Consumable({ id, consumable }: ConsumableProps) {
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Price price={price} />
|
||||
{/* <Price price={price} /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Equipment() {
|
||||
const strings = useStrings();
|
||||
const tank = useProtagonistTank();
|
||||
const equipment = useEquipment(tank.tank!);
|
||||
const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
const equipment = useEquipmentPreset(tank.equipment_preset);
|
||||
|
||||
return (
|
||||
<div className={styles.section}>
|
||||
@@ -237,7 +245,7 @@ function Equipment() {
|
||||
</div>
|
||||
|
||||
<div className={styles.equipment}>
|
||||
{chunk(equipment.preset.slots, equipmentColumns).map((chunk, index) => (
|
||||
{chunk(equipment.slots, equipmentColumns).map((chunk, index) => (
|
||||
<EquipmentRow key={index} chunk={chunk} rowIndex={index} />
|
||||
))}
|
||||
</div>
|
||||
@@ -246,7 +254,7 @@ function Equipment() {
|
||||
}
|
||||
|
||||
interface EquipmentRowProps {
|
||||
chunk: BlitzStaticEquipmentPresetComponent_EquipmentSlot[];
|
||||
chunk: EquipmentSlot[];
|
||||
rowIndex: number;
|
||||
}
|
||||
|
||||
@@ -254,7 +262,7 @@ function EquipmentRow({ chunk, rowIndex }: EquipmentRowProps) {
|
||||
return (
|
||||
<div className={styles.row}>
|
||||
{chunk.map((slot, index) => (
|
||||
<EquipmentSlot
|
||||
<EquipmentSlotEntry
|
||||
key={index}
|
||||
slot={slot}
|
||||
rowIndex={rowIndex}
|
||||
@@ -266,21 +274,25 @@ function EquipmentRow({ chunk, rowIndex }: EquipmentRowProps) {
|
||||
}
|
||||
|
||||
interface EquipmentSlotProps {
|
||||
slot: BlitzStaticEquipmentPresetComponent_EquipmentSlot;
|
||||
slot: EquipmentSlot;
|
||||
rowIndex: number;
|
||||
columnIndex: number;
|
||||
}
|
||||
|
||||
function EquipmentSlot({ slot, rowIndex, columnIndex }: EquipmentSlotProps) {
|
||||
function EquipmentSlotEntry({
|
||||
slot,
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
}: EquipmentSlotProps) {
|
||||
const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
|
||||
const tank = useProtagonistTank();
|
||||
const equipment = useEquipment(tank.tank!);
|
||||
const { price } = equipment.price.unlock_slot_prices[equipmentIndex];
|
||||
const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
const equipment = useEquipmentPreset(tank.equipment_preset);
|
||||
// const { price } = equipment.price.unlock_slot_prices[equipmentIndex];
|
||||
|
||||
return (
|
||||
<div className={styles.slots}>
|
||||
<div className={styles.options}>
|
||||
{slot.options_catalog_i_ds.map((id, index) => (
|
||||
{slot.options.map((id, index) => (
|
||||
<EquipmentOption
|
||||
key={id}
|
||||
optionIndex={index}
|
||||
@@ -290,7 +302,7 @@ function EquipmentSlot({ slot, rowIndex, columnIndex }: EquipmentSlotProps) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Price price={price!} />
|
||||
{/* <Price price={price!} /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -307,11 +319,14 @@ function EquipmentOption({
|
||||
columnIndex,
|
||||
}: EquipmentOptionProps) {
|
||||
const equipmentIndex = rowIndex * equipmentColumns + columnIndex;
|
||||
const tank = useProtagonistTank();
|
||||
const equipment = useEquipment(tank.tank!);
|
||||
const slot = equipment.preset.slots[equipmentIndex];
|
||||
const id = slot.options_catalog_i_ds[optionIndex];
|
||||
const gameStrings = useGameStrings("EquipmentEntity");
|
||||
|
||||
const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
const equipmentPreset = useEquipmentPreset(tank.equipment_preset);
|
||||
const unwrap = useUnwrapper();
|
||||
|
||||
const slot = equipmentPreset.slots[equipmentIndex];
|
||||
const id = slot.options[optionIndex];
|
||||
const specificEquipment = equipment.equipments[id];
|
||||
|
||||
const isSelected = Tankopedia.use(
|
||||
(state) =>
|
||||
@@ -320,13 +335,13 @@ function EquipmentOption({
|
||||
);
|
||||
|
||||
return (
|
||||
<Tooltip tooltip={gameStrings[equipment.equipments[id].equipment_name]}>
|
||||
<Tooltip tooltip={unwrap(specificEquipment.name)}>
|
||||
<Button
|
||||
color={isSelected ? undefined : "gray"}
|
||||
variant={isSelected ? "surface" : "soft"}
|
||||
data-selected={isSelected}
|
||||
radius="1"
|
||||
parentArray
|
||||
listChild
|
||||
className={styles.slot}
|
||||
onClick={() => {
|
||||
Tankopedia.mutate((draft) => {
|
||||
@@ -344,292 +359,292 @@ function EquipmentOption({
|
||||
);
|
||||
}
|
||||
|
||||
function Modules() {
|
||||
const strings = useStrings();
|
||||
const tank = useProtagonistTank();
|
||||
const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
|
||||
const alternates = Tankopedia.use((state) => state.protagonist.alternates);
|
||||
const isStock = useMemo(() => {
|
||||
return tank.tank!.upgrade_lines.every((line) => {
|
||||
if (isAlternativeLine(line.name)) return true;
|
||||
return upgrades[line.name] === 0;
|
||||
});
|
||||
}, [upgrades]);
|
||||
const isUpgraded = useMemo(() => {
|
||||
return tank.tank!.upgrade_lines.every((line) => {
|
||||
if (isAlternativeLine(line.name)) return true;
|
||||
// function Modules() {
|
||||
// const strings = useStrings();
|
||||
// const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
// const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
|
||||
// const alternates = Tankopedia.use((state) => state.protagonist.alternates);
|
||||
// const isStock = useMemo(() => {
|
||||
// return tank.tank!.upgrade_lines.every((line) => {
|
||||
// if (isAlternativeLine(line.name)) return true;
|
||||
// return upgrades[line.name] === 0;
|
||||
// });
|
||||
// }, [upgrades]);
|
||||
// const isUpgraded = useMemo(() => {
|
||||
// return tank.tank!.upgrade_lines.every((line) => {
|
||||
// if (isAlternativeLine(line.name)) return true;
|
||||
|
||||
return (
|
||||
upgrades[line.name] === line.stages.length - 1 ||
|
||||
(line.name in alternates && alternates[line.name])
|
||||
);
|
||||
});
|
||||
}, [upgrades]);
|
||||
// return (
|
||||
// upgrades[line.name] === line.stages.length - 1 ||
|
||||
// (line.name in alternates && alternates[line.name])
|
||||
// );
|
||||
// });
|
||||
// }, [upgrades]);
|
||||
|
||||
return (
|
||||
<div className={styles.section}>
|
||||
<div className={styles.header}>
|
||||
<Heading size="4">{strings.tanks.loadout.modules}</Heading>
|
||||
// return (
|
||||
// <div className={styles.section}>
|
||||
// <div className={styles.header}>
|
||||
// <Heading size="4">{strings.tanks.loadout.modules}</Heading>
|
||||
|
||||
<div className={styles["upgrade-buttons"]}>
|
||||
<IconButton
|
||||
variant={isStock ? "solid" : "soft"}
|
||||
size="minor"
|
||||
array
|
||||
onClick={() => {
|
||||
Tankopedia.mutate((draft) => {
|
||||
for (const line of tank.tank!.upgrade_lines) {
|
||||
if (isAlternativeLine(line.name)) continue;
|
||||
// <div className={styles["upgrade-buttons"]}>
|
||||
// <IconButton
|
||||
// variant={isStock ? "solid" : "soft"}
|
||||
// size="minor"
|
||||
// array
|
||||
// onClick={() => {
|
||||
// Tankopedia.mutate((draft) => {
|
||||
// for (const line of tank.tank!.upgrade_lines) {
|
||||
// if (isAlternativeLine(line.name)) continue;
|
||||
|
||||
draft.protagonist.upgrades[line.name] = 0;
|
||||
draft.protagonist.alternates[line.name] = false;
|
||||
}
|
||||
});
|
||||
}}
|
||||
color="gray"
|
||||
>
|
||||
<DoubleArrowLeftIcon />
|
||||
</IconButton>
|
||||
// draft.protagonist.upgrades[line.name] = 0;
|
||||
// draft.protagonist.alternates[line.name] = false;
|
||||
// }
|
||||
// });
|
||||
// }}
|
||||
// color="gray"
|
||||
// >
|
||||
// <DoubleArrowLeftIcon />
|
||||
// </IconButton>
|
||||
|
||||
<IconButton
|
||||
variant={isUpgraded ? "solid" : "soft"}
|
||||
size="minor"
|
||||
array
|
||||
onClick={() => {
|
||||
Tankopedia.mutate((draft) => {
|
||||
for (const line of tank.tank!.upgrade_lines) {
|
||||
draft.protagonist.upgrades[line.name] =
|
||||
line.stages.length - 1;
|
||||
// <IconButton
|
||||
// variant={isUpgraded ? "solid" : "soft"}
|
||||
// size="minor"
|
||||
// array
|
||||
// onClick={() => {
|
||||
// Tankopedia.mutate((draft) => {
|
||||
// for (const line of tank.tank!.upgrade_lines) {
|
||||
// draft.protagonist.upgrades[line.name] =
|
||||
// line.stages.length - 1;
|
||||
|
||||
if (isAlternativeLine(line.name)) {
|
||||
const original = originalLineName(line.name)!;
|
||||
draft.protagonist.alternates[original] = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
color="gray"
|
||||
>
|
||||
<DoubleArrowRightIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
// if (isAlternativeLine(line.name)) {
|
||||
// const original = originalLineName(line.name)!;
|
||||
// draft.protagonist.alternates[original] = true;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }}
|
||||
// color="gray"
|
||||
// >
|
||||
// <DoubleArrowRightIcon />
|
||||
// </IconButton>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
<div className={styles.lines}>
|
||||
{/* TODO: hide lines with 1 module except for alts */}
|
||||
{tank.tank!.upgrade_lines.map((line) => (
|
||||
<Line
|
||||
key={line.name}
|
||||
name={line.name}
|
||||
lines={tank.tank!.upgrade_lines}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// <div className={styles.lines}>
|
||||
// {/* TODO: hide lines with 1 module except for alts */}
|
||||
// {tank.tank!.upgrade_lines.map((line) => (
|
||||
// <Line
|
||||
// key={line.name}
|
||||
// name={line.name}
|
||||
// lines={tank.tank!.upgrade_lines}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
interface LineProps {
|
||||
name: string;
|
||||
lines: UpgradeLine[];
|
||||
}
|
||||
// interface LineProps {
|
||||
// name: string;
|
||||
// lines: UpgradeLine[];
|
||||
// }
|
||||
|
||||
function Line({ name, lines }: LineProps) {
|
||||
const combinedLines = useMemo(() => {
|
||||
const names: string[] = [name];
|
||||
// function Line({ name, lines }: LineProps) {
|
||||
// const combinedLines = useMemo(() => {
|
||||
// const names: string[] = [name];
|
||||
|
||||
for (const originalLine in alternativeLines) {
|
||||
const alternativeLine = alternativeLines[originalLine];
|
||||
// for (const originalLine in alternativeLines) {
|
||||
// const alternativeLine = alternativeLines[originalLine];
|
||||
|
||||
if (
|
||||
originalLine === name &&
|
||||
lines.some((line) => line.name === alternativeLine)
|
||||
) {
|
||||
names.push(alternativeLine);
|
||||
}
|
||||
}
|
||||
// if (
|
||||
// originalLine === name &&
|
||||
// lines.some((line) => line.name === alternativeLine)
|
||||
// ) {
|
||||
// names.push(alternativeLine);
|
||||
// }
|
||||
// }
|
||||
|
||||
return names;
|
||||
}, [name]);
|
||||
// return names;
|
||||
// }, [name]);
|
||||
|
||||
return (
|
||||
<div className={styles.line}>
|
||||
{!isAlternativeLine(name) &&
|
||||
combinedLines.map((name) => (
|
||||
<div className={styles["chunks-wrapper"]}>
|
||||
<LineInner key={name} name={name} lines={lines} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// return (
|
||||
// <div className={styles.line}>
|
||||
// {!isAlternativeLine(name) &&
|
||||
// combinedLines.map((name) => (
|
||||
// <div className={styles["chunks-wrapper"]}>
|
||||
// <LineInner key={name} name={name} lines={lines} />
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
function LineInner({ name, lines }: LineProps) {
|
||||
const line = lines.find((line) => line.name === name)!;
|
||||
// function LineInner({ name, lines }: LineProps) {
|
||||
// const line = lines.find((line) => line.name === name)!;
|
||||
|
||||
return chunk(line.stages, maxModulesPerRow).map((chunk, wrapIndex) => (
|
||||
<div className={styles["line-wrap"]}>
|
||||
{wrapIndex > 0 && (
|
||||
<Text size="minor" className={styles["wrap-marker"]} lowContrast>
|
||||
<CornerBottomLeftIcon />
|
||||
</Text>
|
||||
)}
|
||||
// return chunk(line.stages, maxModulesPerRow).map((chunk, wrapIndex) => (
|
||||
// <div className={styles["line-wrap"]}>
|
||||
// {wrapIndex > 0 && (
|
||||
// <Text size="minor" className={styles["wrap-marker"]} lowContrast>
|
||||
// <CornerBottomLeftIcon />
|
||||
// </Text>
|
||||
// )}
|
||||
|
||||
{chunk.map((stage, elementIndex) => (
|
||||
<LineElement
|
||||
key={elementIndex}
|
||||
index={wrapIndex * maxModulesPerRow + elementIndex}
|
||||
lineName={name}
|
||||
stage={stage}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
));
|
||||
}
|
||||
// {chunk.map((stage, elementIndex) => (
|
||||
// <LineElement
|
||||
// key={elementIndex}
|
||||
// index={wrapIndex * maxModulesPerRow + elementIndex}
|
||||
// lineName={name}
|
||||
// stage={stage}
|
||||
// />
|
||||
// ))}
|
||||
// </div>
|
||||
// ));
|
||||
// }
|
||||
|
||||
interface LineElementProps {
|
||||
index: number;
|
||||
lineName: string;
|
||||
stage: StageParameters;
|
||||
}
|
||||
// interface LineElementProps {
|
||||
// index: number;
|
||||
// lineName: string;
|
||||
// stage: StageParameters;
|
||||
// }
|
||||
|
||||
function LineElement({ index, lineName, stage }: LineElementProps) {
|
||||
const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
|
||||
const alternates = Tankopedia.use((state) => state.protagonist.alternates);
|
||||
const tank = useProtagonistTank();
|
||||
const strings = useStrings();
|
||||
const gameStrings = useGameStrings("TankEntity");
|
||||
const upgradePreset = useUpgradePreset(tank.tank!.tank_upgrade_preset);
|
||||
// function LineElement({ index, lineName, stage }: LineElementProps) {
|
||||
// const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
|
||||
// const alternates = Tankopedia.use((state) => state.protagonist.alternates);
|
||||
// const tank = useDuel("protagonist", DuelModule.Tank);
|
||||
// const strings = useStrings();
|
||||
// const gameStrings = useGameStrings("TankEntity");
|
||||
// const upgradePreset = useUpgradePreset(tank.tank!.tank_upgrade_preset);
|
||||
|
||||
let price: StandardPrice | undefined;
|
||||
// let price: StandardPrice | undefined;
|
||||
|
||||
switch (stage.grade) {
|
||||
case Grade.GRADE_COMMON:
|
||||
price = upgradePreset.common_grade_price;
|
||||
break;
|
||||
// switch (stage.grade) {
|
||||
// case Grade.GRADE_COMMON:
|
||||
// price = upgradePreset.common_grade_price;
|
||||
// break;
|
||||
|
||||
case Grade.GRADE_RARE:
|
||||
price = upgradePreset.rare_grade_price;
|
||||
break;
|
||||
// case Grade.GRADE_RARE:
|
||||
// price = upgradePreset.rare_grade_price;
|
||||
// break;
|
||||
|
||||
case Grade.GRADE_EPIC:
|
||||
price = upgradePreset.unique_grade_price;
|
||||
break;
|
||||
// case Grade.GRADE_EPIC:
|
||||
// price = upgradePreset.unique_grade_price;
|
||||
// break;
|
||||
|
||||
case Grade.GRADE_LEGENDARY:
|
||||
price = upgradePreset.legendary_grade_price;
|
||||
break;
|
||||
}
|
||||
// case Grade.GRADE_LEGENDARY:
|
||||
// price = upgradePreset.legendary_grade_price;
|
||||
// break;
|
||||
// }
|
||||
|
||||
for (const override of upgradePreset.prices_overrides) {
|
||||
if (override.stage_tech_name !== stage.tech_name) continue;
|
||||
price = override.price;
|
||||
}
|
||||
// for (const override of upgradePreset.prices_overrides) {
|
||||
// if (override.stage_tech_name !== stage.tech_name) continue;
|
||||
// price = override.price;
|
||||
// }
|
||||
|
||||
price ??= StandardPrice.create();
|
||||
// price ??= StandardPrice.create();
|
||||
|
||||
let isSelected: boolean;
|
||||
// let isSelected: boolean;
|
||||
|
||||
if (isAlternativeLine(lineName)) {
|
||||
const originalLine = originalLineName(lineName);
|
||||
isSelected = alternates[originalLine!];
|
||||
} else {
|
||||
if (alternates[lineName]) {
|
||||
isSelected = false;
|
||||
} else {
|
||||
isSelected = upgrades[lineName] === index;
|
||||
}
|
||||
}
|
||||
// if (isAlternativeLine(lineName)) {
|
||||
// const originalLine = originalLineName(lineName);
|
||||
// isSelected = alternates[originalLine!];
|
||||
// } else {
|
||||
// if (alternates[lineName]) {
|
||||
// isSelected = false;
|
||||
// } else {
|
||||
// isSelected = upgrades[lineName] === index;
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<Tooltip tooltip={gameStrings[stage.display_name]}>
|
||||
<Button
|
||||
className={styles.stage}
|
||||
color={isSelected ? undefined : "gray"}
|
||||
variant={isSelected ? "surface" : "soft"}
|
||||
radius="1"
|
||||
onClick={() => {
|
||||
// TODO: make minimum selectable upgrade the last free module for tanks like the destiny
|
||||
// return (
|
||||
// <div className={styles.wrapper}>
|
||||
// <Tooltip tooltip={gameStrings[stage.display_name]}>
|
||||
// <Button
|
||||
// className={styles.stage}
|
||||
// color={isSelected ? undefined : "gray"}
|
||||
// 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!;
|
||||
// Tankopedia.mutate((draft) => {
|
||||
// const tankData = tank.tank!;
|
||||
|
||||
if (isAlternativeLine(lineName)) {
|
||||
const originalLine = originalLineName(lineName)!;
|
||||
// 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;
|
||||
}
|
||||
// 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 tankData.upgrade_lines) {
|
||||
let i = 0;
|
||||
// for (const required of stage.required_upgrades) {
|
||||
// for (const line of tankData.upgrade_lines) {
|
||||
// let i = 0;
|
||||
|
||||
for (const candidateStage of line.stages) {
|
||||
if (candidateStage.tech_name === required) {
|
||||
draft.protagonist.upgrades[line.name] = Math.max(
|
||||
draft.protagonist.upgrades[line.name],
|
||||
i,
|
||||
);
|
||||
}
|
||||
// for (const candidateStage of line.stages) {
|
||||
// if (candidateStage.tech_name === required) {
|
||||
// draft.protagonist.upgrades[line.name] = Math.max(
|
||||
// draft.protagonist.upgrades[line.name],
|
||||
// i,
|
||||
// );
|
||||
// }
|
||||
|
||||
i++;
|
||||
}
|
||||
}
|
||||
}
|
||||
// i++;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
for (const line of tankData.upgrade_lines) {
|
||||
if (draft.protagonist.alternates[line.name]) {
|
||||
continue;
|
||||
}
|
||||
// for (const line of tankData.upgrade_lines) {
|
||||
// if (draft.protagonist.alternates[line.name]) {
|
||||
// continue;
|
||||
// }
|
||||
|
||||
let i = draft.protagonist.upgrades[line.name];
|
||||
// let i = draft.protagonist.upgrades[line.name];
|
||||
|
||||
while (i > 0) {
|
||||
const currentStage = line.stages[i];
|
||||
// while (i > 0) {
|
||||
// const currentStage = line.stages[i];
|
||||
|
||||
const valid = currentStage.required_upgrades.every(
|
||||
(required) => {
|
||||
for (const otherLine of tankData.upgrade_lines) {
|
||||
const idx = draft.protagonist.upgrades[otherLine.name];
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// if (otherLine.stages[idx]?.tech_name === required) {
|
||||
// return true;
|
||||
// }
|
||||
// }
|
||||
|
||||
return false;
|
||||
},
|
||||
);
|
||||
// return false;
|
||||
// },
|
||||
// );
|
||||
|
||||
if (valid) break;
|
||||
// if (valid) break;
|
||||
|
||||
i--;
|
||||
}
|
||||
// i--;
|
||||
// }
|
||||
|
||||
draft.protagonist.upgrades[line.name] = i;
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className={styles.icon}
|
||||
src={`/media/modules/${stage.stage_type}.webp`}
|
||||
/>
|
||||
// draft.protagonist.upgrades[line.name] = i;
|
||||
// }
|
||||
// });
|
||||
// }}
|
||||
// >
|
||||
// <img
|
||||
// className={styles.icon}
|
||||
// src={`/media/modules/${stage.stage_type}.webp`}
|
||||
// />
|
||||
|
||||
<Text weight="light" lowContrast size="minor" className={styles.tier}>
|
||||
{isAlternativeLine(lineName)
|
||||
? strings.tanks.loadout.alternative
|
||||
: romanize(stage.number)}
|
||||
</Text>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
// <Text weight="light" lowContrast size="minor" className={styles.tier}>
|
||||
// {isAlternativeLine(lineName)
|
||||
// ? strings.tanks.loadout.alternative
|
||||
// : romanize(stage.number)}
|
||||
// </Text>
|
||||
// </Button>
|
||||
// </Tooltip>
|
||||
|
||||
{<Price className={styles.price} price={price} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// {<Price className={styles.price} price={price} />}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
Reference in new issue
Block a user