diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 9aa912961..c8a7e0c70 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -24,6 +24,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { ConsumablesManager } from '../../../components/ConsumablesManager';
import { EquipmentManager } from '../../../components/EquipmentManager';
+import { ModuleManager } from '../../../components/ModuleManager';
import PageWrapper from '../../../components/PageWrapper';
import { ProvisionsManager } from '../../../components/ProvisionsManager';
import { asset } from '../../../core/blitzkrieg/asset';
@@ -462,6 +463,10 @@ export default function Page() {
key,
provisions,
gun,
+ shell,
+ turret,
+ engine,
+ track,
consumables,
},
index,
@@ -482,6 +487,7 @@ export default function Page() {
gun,
),
);
+ const modules = { turret, gun, engine, chassis: track };
return (
@@ -489,7 +495,7 @@ export default function Page() {
align="center"
justify="center"
direction="column"
- gap="3"
+ gap="2"
style={{
width: '100%',
height: '100%',
@@ -765,22 +771,52 @@ export default function Page() {
-
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
index 780b66ac8..3a2fd22be 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
@@ -1,7 +1,5 @@
-import { Button, DropdownMenu, Flex, Heading } from '@radix-ui/themes';
-import { useState } from 'react';
-import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions/constants';
+import { Button, Flex, Heading } from '@radix-ui/themes';
+import { ModuleManager } from '../../../../../../../components/ModuleManager';
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
import { mutateTankopediaTemporary } from '../../../../../../../stores/tankopedia';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -13,10 +11,6 @@ export function Modules() {
protagonist.tank.turrets[0].guns.length > 1 ||
protagonist.tank.engines.length > 1 ||
protagonist.tank.tracks.length > 1;
- const [turretMenuOpen, setTurretMenuOpen] = useState(false);
- const [gunMenuOpen, setGunMenuOpen] = useState(false);
- const [engineMenuOpen, setEngineMenuOpen] = useState(false);
- const [trackMenuOpen, setTrackMenuOpen] = useState(false);
return (
@@ -64,181 +58,22 @@ export function Modules() {
)}
-
- setTurretMenuOpen(true)}
- />
-
-
-
-
-
-
-
-
- {[...protagonist.tank.turrets].reverse().map((turret) => {
- return (
- {
- mutateDuel((draft) => {
- draft.protagonist!.turret = turret;
- draft.protagonist!.gun = turret.guns.at(-1)!;
- draft.protagonist!.shell =
- turret.guns.at(-1)!.shells[0];
- });
- mutateTankopediaTemporary((draft) => {
- draft.shot = undefined;
- });
- setTurretMenuOpen(false);
- }}
- >
- {' '}
- {turret.name}
-
- );
- })}
-
-
-
-
- setGunMenuOpen(true)}
- />
-
-
-
-
-
-
-
-
- {[...protagonist.turret.guns].reverse().map((gun) => {
- return (
- {
- mutateDuel((draft) => {
- draft.protagonist!.gun = gun;
- draft.protagonist!.shell = gun.shells[0];
- });
- }}
- >
- {' '}
- {gun.name}
-
- );
- })}
-
-
-
-
- setEngineMenuOpen(true)}
- />
-
-
-
-
-
-
-
-
- {[...protagonist.tank.engines].reverse().map((engine) => {
- return (
- {
- mutateDuel((draft) => {
- draft.protagonist!.engine = engine;
- });
- }}
- >
- {' '}
- {engine.name}
-
- );
- })}
-
-
-
-
- setTrackMenuOpen(true)}
- />
-
-
-
-
-
-
-
-
- {[...protagonist.tank.tracks].reverse().map((track) => {
- return (
- {
- mutateDuel((draft) => {
- draft.protagonist!.track = track;
- });
- }}
- >
- {' '}
- {track.name}
-
- );
- })}
-
-
-
-
+ {
+ mutateDuel((draft) => {
+ draft.protagonist = { ...draft.protagonist!, ...modules };
+ });
+ mutateTankopediaTemporary((draft) => {
+ draft.shot = undefined;
+ });
+ }}
+ />
);
}
diff --git a/src/components/ModuleManager.tsx b/src/components/ModuleManager.tsx
new file mode 100644
index 000000000..b8d40093b
--- /dev/null
+++ b/src/components/ModuleManager.tsx
@@ -0,0 +1,213 @@
+import { DropdownMenu, Flex } from '@radix-ui/themes';
+import { useState } from 'react';
+import {
+ EngineDefinition,
+ GunDefinition,
+ ShellDefinition,
+ TankDefinition,
+ TrackDefinition,
+ TurretDefinition,
+} from '../core/blitzkrieg/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../core/blitzkrieg/tankDefinitions/constants';
+import { ModuleButton } from './ModuleButtons/ModuleButton';
+
+interface ModuleManagerProps {
+ tank: TankDefinition;
+ turret: TurretDefinition;
+ gun: GunDefinition;
+ shell: ShellDefinition;
+ engine: EngineDefinition;
+ track: TrackDefinition;
+ onChange?: (modules: {
+ turret: TurretDefinition;
+ gun: GunDefinition;
+ engine: EngineDefinition;
+ track: TrackDefinition;
+ }) => void;
+}
+
+export function ModuleManager({
+ tank,
+ onChange,
+ ...modules
+}: ModuleManagerProps) {
+ const [turretMenuOpen, setTurretMenuOpen] = useState(false);
+ const [gunMenuOpen, setGunMenuOpen] = useState(false);
+ const [engineMenuOpen, setEngineMenuOpen] = useState(false);
+ const [trackMenuOpen, setTrackMenuOpen] = useState(false);
+
+ return (
+
+ setTurretMenuOpen(true)}
+ />
+
+
+
+
+
+
+
+
+ {[...tank.turrets].reverse().map((turret) => {
+ return (
+ {
+ const draft = { ...modules };
+ draft.turret = turret;
+ draft.gun = draft.turret.guns.at(-1)!;
+ draft.shell = draft.gun.shells.at(-1)!;
+
+ onChange?.(draft);
+ setTurretMenuOpen(false);
+ }}
+ >
+ {' '}
+ {turret.name}
+
+ );
+ })}
+
+
+
+
+ setGunMenuOpen(true)}
+ />
+
+
+
+
+
+
+
+
+ {[...modules.turret.guns].reverse().map((gun) => {
+ return (
+ {
+ const draft = { ...modules };
+ draft.gun = gun;
+ draft.shell = draft.gun.shells.at(-1)!;
+
+ onChange?.(draft);
+ setGunMenuOpen(false);
+ }}
+ >
+ {' '}
+ {gun.name}
+
+ );
+ })}
+
+
+
+
+ setEngineMenuOpen(true)}
+ />
+
+
+
+
+
+
+
+
+ {[...tank.engines].reverse().map((engine) => {
+ return (
+ {
+ const draft = { ...modules };
+ draft.engine = engine;
+
+ onChange?.(draft);
+ setEngineMenuOpen(false);
+ }}
+ >
+ {' '}
+ {engine.name}
+
+ );
+ })}
+
+
+
+
+ setTrackMenuOpen(true)}
+ />
+
+
+
+
+
+
+
+
+ {[...tank.tracks].reverse().map((track) => {
+ return (
+ {
+ const draft = { ...modules };
+ draft.track = track;
+
+ onChange?.(draft);
+ setTrackMenuOpen(false);
+ }}
+ >
+ {' '}
+ {track.name}
+
+ );
+ })}
+
+
+
+
+ );
+}