TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 12:09:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: generalized equipment matrix manager

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-06 10:06:59 -05:00
1 parent ac3f2ea93a
commit 9f07d910b8
3 files changed
+117 -127
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/page.tsx
+42 -77
View File
@@ -14,7 +14,7 @@ import {
import { times } from 'lodash'; import { times } from 'lodash';
import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react'; import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { EquipmentButton } from '../../../components/ModuleButtons/EquipmentButton'; import { EquipmentManager } from '../../../components/EquipmentManager';
import PageWrapper from '../../../components/PageWrapper'; import PageWrapper from '../../../components/PageWrapper';
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions'; import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions'; import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
@@ -32,6 +32,7 @@ import {
useComparePersistent, useComparePersistent,
useCompareTemporary, useCompareTemporary,
} from '../../../stores/compare'; } from '../../../stores/compare';
import { EquipmentMatrix } from '../../../stores/duel';
import { TankSearch } from '../tankopedia/components/TankSearch'; import { TankSearch } from '../tankopedia/components/TankSearch';
import { TankControl } from './components/TankControl'; import { TankControl } from './components/TankControl';
@@ -346,7 +347,7 @@ export default function Page() {
<Table.Cell /> <Table.Cell />
{members.map(({ equipmentMatrix, tank }, index) => { {members.map(({ equipmentMatrix, tank }, index) => {
const equipmentRows = const equipmentPreset =
awaitedEquipmentDefinitions.presets[tank.equipment]; awaitedEquipmentDefinitions.presets[tank.equipment];
return ( return (
@@ -414,81 +415,45 @@ export default function Page() {
</Popover.Trigger> </Popover.Trigger>
<Popover.Content> <Popover.Content>
<Flex direction="column" gap="2"> <Flex direction="column" gap="4">
{equipmentRows.map((equipmentRow, rowIndex) => ( <EquipmentManager
<Flex gap="2" key={rowIndex}> matrix={equipmentMatrix}
{equipmentRow.map( preset={equipmentPreset}
(equipment, columnIndex) => ( onChange={(matrix) => {
<Flex key={columnIndex}> mutateCompareTemporary((draft) => {
<EquipmentButton draft.members[index].equipmentMatrix =
equipment={equipment[0]} matrix;
first });
rowChild }}
selected={ />
equipmentMatrix[rowIndex][
columnIndex <Flex justify="end" gap="2">
] === -1 <Button
} color="red"
onClick={() => { onClick={() => {
mutateCompareTemporary((draft) => { mutateCompareTemporary((draft) => {
if ( draft.members[index].equipmentMatrix =
draft.members[index] times(3, () =>
.equipmentMatrix[rowIndex][ times(3, () => 0),
columnIndex ) as EquipmentMatrix;
] === -1 });
) { }}
draft.members[ >
index Reset
].equipmentMatrix[rowIndex][ </Button>
columnIndex <Button
] = 0; onClick={() => {
} else { mutateCompareTemporary((draft) => {
draft.members[ draft.members.forEach((member) => {
index member.equipmentMatrix =
].equipmentMatrix[rowIndex][ draft.members[index].equipmentMatrix;
columnIndex });
] = -1; });
} }}
}); >
}} Apply to all
/> </Button>
<EquipmentButton </Flex>
equipment={equipment[1]}
last
rowChild
selected={
equipmentMatrix[rowIndex][
columnIndex
] === 1
}
onClick={() => {
mutateCompareTemporary((draft) => {
if (
draft.members[index]
.equipmentMatrix[rowIndex][
columnIndex
] === 1
) {
draft.members[
index
].equipmentMatrix[rowIndex][
columnIndex
] = 0;
} else {
draft.members[
index
].equipmentMatrix[rowIndex][
columnIndex
] = 1;
}
});
}}
/>
</Flex>
),
)}
</Flex>
))}
</Flex> </Flex>
</Popover.Content> </Popover.Content>
</Popover.Root> </Popover.Root>
src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx
+11 -50
View File
@@ -1,6 +1,6 @@
import { Button, Flex, Heading } from '@radix-ui/themes'; import { Button, Flex, Heading } from '@radix-ui/themes';
import { use } from 'react'; import { use } from 'react';
import { EquipmentButton } from '../../../../../../../components/ModuleButtons/EquipmentButton'; import { EquipmentManager } from '../../../../../../../components/EquipmentManager';
import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions'; import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
import { mutateDuel, useDuel } from '../../../../../../../stores/duel'; import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper'; import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -8,7 +8,7 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
export function Equipment() { export function Equipment() {
const protagonist = useDuel((state) => state.protagonist!); const protagonist = useDuel((state) => state.protagonist!);
const awaitedEquipmentDefinitions = use(equipmentDefinitions); const awaitedEquipmentDefinitions = use(equipmentDefinitions);
const equipmentRows = const equipmentPreset =
awaitedEquipmentDefinitions.presets[protagonist.tank.equipment]; awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
const equipmentMatrix = useDuel( const equipmentMatrix = useDuel(
(state) => state.protagonist!.equipmentMatrix, (state) => state.protagonist!.equipmentMatrix,
@@ -35,54 +35,15 @@ export function Equipment() {
</Button> </Button>
</Flex> </Flex>
<Flex direction="column" gap="2"> <EquipmentManager
{equipmentRows.map((equipmentRow, rowIndex) => ( matrix={equipmentMatrix}
<Flex gap="2" key={rowIndex}> preset={equipmentPreset}
{equipmentRow.map((equipment, columnIndex) => ( onChange={(matrix) => {
<Flex key={columnIndex}> mutateDuel((draft) => {
<EquipmentButton draft.protagonist!.equipmentMatrix = matrix;
equipment={equipment[0]} });
first }}
rowChild />
selected={equipmentMatrix[rowIndex][columnIndex] === -1}
onClick={() => {
mutateDuel((draft) => {
if (equipmentMatrix[rowIndex][columnIndex] === -1) {
draft.protagonist!.equipmentMatrix[rowIndex][
columnIndex
] = 0;
} else {
draft.protagonist!.equipmentMatrix[rowIndex][
columnIndex
] = -1;
}
});
}}
/>
<EquipmentButton
equipment={equipment[1]}
last
rowChild
selected={equipmentMatrix[rowIndex][columnIndex] === 1}
onClick={() => {
mutateDuel((draft) => {
if (equipmentMatrix[rowIndex][columnIndex] === 1) {
draft.protagonist!.equipmentMatrix[rowIndex][
columnIndex
] = 0;
} else {
draft.protagonist!.equipmentMatrix[rowIndex][
columnIndex
] = 1;
}
});
}}
/>
</Flex>
))}
</Flex>
))}
</Flex>
</ConfigurationChildWrapper> </ConfigurationChildWrapper>
); );
} }
src/components/EquipmentManager.tsx
+64
View File
@@ -0,0 +1,64 @@
import { Flex } from '@radix-ui/themes';
import { cloneDeep } from 'lodash';
import { EquipmentPreset } from '../core/blitzkrieg/equipmentDefinitions';
import { EquipmentMatrix } from '../stores/duel';
import { EquipmentButton } from './ModuleButtons/EquipmentButton';
interface EquipmentManagerProps {
preset: EquipmentPreset;
matrix: EquipmentMatrix;
onChange: (matrix: EquipmentMatrix) => void;
}
export function EquipmentManager({
preset,
matrix,
onChange,
}: EquipmentManagerProps) {
return (
<Flex direction="column" gap="2">
{preset.map((equipmentRow, rowIndex) => (
<Flex gap="2" key={rowIndex}>
{equipmentRow.map((equipment, columnIndex) => (
<Flex key={columnIndex}>
<EquipmentButton
equipment={equipment[0]}
first
rowChild
selected={matrix[rowIndex][columnIndex] === -1}
onClick={() => {
const draft = cloneDeep(matrix);
if (draft[rowIndex][columnIndex] === -1) {
draft[rowIndex][columnIndex] = 0;
} else {
draft[rowIndex][columnIndex] = -1;
}
onChange(draft);
}}
/>
<EquipmentButton
equipment={equipment[1]}
last
rowChild
selected={matrix[rowIndex][columnIndex] === 1}
onClick={() => {
const draft = cloneDeep(matrix);
if (draft[rowIndex][columnIndex] === 1) {
draft[rowIndex][columnIndex] = 0;
} else {
draft[rowIndex][columnIndex] = 1;
}
onChange(draft);
}}
/>
</Flex>
))}
</Flex>
))}
</Flex>
);
}