TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 02:37:05 +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 { usePathname, useRouter, useSearchParams } from 'next/navigation';
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 { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
@@ -32,6 +32,7 @@ import {
useComparePersistent,
useCompareTemporary,
} from '../../../stores/compare';
import { EquipmentMatrix } from '../../../stores/duel';
import { TankSearch } from '../tankopedia/components/TankSearch';
import { TankControl } from './components/TankControl';
@@ -346,7 +347,7 @@ export default function Page() {
<Table.Cell />
{members.map(({ equipmentMatrix, tank }, index) => {
const equipmentRows =
const equipmentPreset =
awaitedEquipmentDefinitions.presets[tank.equipment];
return (
@@ -414,81 +415,45 @@ export default function Page() {
</Popover.Trigger>
<Popover.Content>
<Flex direction="column" gap="2">
{equipmentRows.map((equipmentRow, rowIndex) => (
<Flex gap="2" key={rowIndex}>
{equipmentRow.map(
(equipment, columnIndex) => (
<Flex key={columnIndex}>
<EquipmentButton
equipment={equipment[0]}
first
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;
}
});
}}
/>
<EquipmentButton
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 direction="column" gap="4">
<EquipmentManager
matrix={equipmentMatrix}
preset={equipmentPreset}
onChange={(matrix) => {
mutateCompareTemporary((draft) => {
draft.members[index].equipmentMatrix =
matrix;
});
}}
/>
<Flex justify="end" gap="2">
<Button
color="red"
onClick={() => {
mutateCompareTemporary((draft) => {
draft.members[index].equipmentMatrix =
times(3, () =>
times(3, () => 0),
) as EquipmentMatrix;
});
}}
>
Reset
</Button>
<Button
onClick={() => {
mutateCompareTemporary((draft) => {
draft.members.forEach((member) => {
member.equipmentMatrix =
draft.members[index].equipmentMatrix;
});
});
}}
>
Apply to all
</Button>
</Flex>
</Flex>
</Popover.Content>
</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 { use } from 'react';
import { EquipmentButton } from '../../../../../../../components/ModuleButtons/EquipmentButton';
import { EquipmentManager } from '../../../../../../../components/EquipmentManager';
import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
@@ -8,7 +8,7 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
export function Equipment() {
const protagonist = useDuel((state) => state.protagonist!);
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
const equipmentRows =
const equipmentPreset =
awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
const equipmentMatrix = useDuel(
(state) => state.protagonist!.equipmentMatrix,
@@ -35,54 +35,15 @@ export function Equipment() {
</Button>
</Flex>
<Flex direction="column" gap="2">
{equipmentRows.map((equipmentRow, rowIndex) => (
<Flex gap="2" key={rowIndex}>
{equipmentRow.map((equipment, columnIndex) => (
<Flex key={columnIndex}>
<EquipmentButton
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>
<EquipmentManager
matrix={equipmentMatrix}
preset={equipmentPreset}
onChange={(matrix) => {
mutateDuel((draft) => {
draft.protagonist!.equipmentMatrix = matrix;
});
}}
/>
</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>
);
}