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: equipment popover

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-05 17:52:41 -05:00
1 parent 9d1e059ea5
commit 2f2996a40c
2 files changed
+144 -78
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/page.tsx
+144 -17
View File
@@ -6,13 +6,15 @@ import {
Dialog,
Flex,
Heading,
Popover,
SegmentedControl,
Table,
Text,
} from '@radix-ui/themes';
import { times } from 'lodash';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { EquipmentMatrixCompact } from '../../../components/EquipmentMatrixCompact';
import { EquipmentButton } from '../../../components/ModuleButtons/EquipmentButton';
import PageWrapper from '../../../components/PageWrapper';
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
@@ -343,22 +345,147 @@ export default function Page() {
<Table.Row>
<Table.Cell />
{members.map(({ equipmentMatrix }) => (
<Table.Cell>
<Flex
align="center"
justify="between"
style={{
width: '100%',
height: '100%',
}}
>
<EquipmentMatrixCompact
equipmentMatrix={equipmentMatrix}
/>
</Flex>
</Table.Cell>
))}
{members.map(({ equipmentMatrix, tank }) => {
const equipmentRows =
awaitedEquipmentDefinitions.presets[tank.equipment];
return (
<Table.Cell>
<Flex
align="center"
justify="between"
style={{
width: '100%',
height: '100%',
}}
>
<Popover.Root>
<Popover.Trigger>
<Button variant="ghost" radius="large">
<Flex gap="1" direction="column">
{times(3, (y) => (
<Flex
style={{
gap: 6,
}}
>
{times(3, (x) => {
const equipment = equipmentMatrix[y][x];
return (
<Flex
style={{
gap: 2,
}}
>
<div
style={{
width: 4,
height: 8,
backgroundColor:
equipment === -1
? theme.colors
.textLowContrast_green
: theme.colors
.textLowContrast,
borderRadius: 2,
}}
/>
<div
style={{
width: 4,
height: 8,
backgroundColor:
equipment === 1
? theme.colors
.textLowContrast_green
: theme.colors
.textLowContrast,
borderRadius: 2,
}}
/>
</Flex>
);
})}
</Flex>
))}
</Flex>
</Button>
</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={() => {
// 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>
</Popover.Content>
</Popover.Root>
</Flex>
</Table.Cell>
);
})}
</Table.Row>
</Table.Body>
src/components/EquipmentMatrixCompact.tsx
-61
View File
@@ -1,61 +0,0 @@
import { Button, Flex } from '@radix-ui/themes';
import { times } from 'lodash';
import { theme } from '../stitches.config';
import { EquipmentMatrix } from '../stores/duel';
interface EquipmentMatrixCompactProps {
equipmentMatrix: EquipmentMatrix;
}
export function EquipmentMatrixCompact({
equipmentMatrix,
}: EquipmentMatrixCompactProps) {
return (
<Button variant="ghost">
<Flex gap="1" direction="column">
{times(3, (y) => (
<Flex
style={{
gap: 6,
}}
>
{times(3, (x) => {
const equipment = equipmentMatrix[y][x];
return (
<Flex
style={{
gap: 2,
}}
>
<div
style={{
width: 4,
height: 8,
backgroundColor:
equipment === -1
? theme.colors.textLowContrast_green
: theme.colors.textLowContrast,
borderRadius: 2,
}}
/>
<div
style={{
width: 4,
height: 8,
backgroundColor:
equipment === 1
? theme.colors.textLowContrast_green
: theme.colors.textLowContrast,
borderRadius: 2,
}}
/>
</Flex>
);
})}
</Flex>
))}
</Flex>
</Button>
);
}