mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 03:59:50 +02:00
feat: provision buttons
This commit is contained in:
TrèsAbhi committed
1 parent
850308b2ac
commit
5d0fe8726b
1 file changed
+156
-106
+156
-106
@@ -23,6 +23,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
|||||||
import { use, useCallback, useEffect, useMemo, useState } from 'react';
|
import { use, useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import { EquipmentManager } from '../../../components/EquipmentManager';
|
import { EquipmentManager } from '../../../components/EquipmentManager';
|
||||||
import PageWrapper from '../../../components/PageWrapper';
|
import PageWrapper from '../../../components/PageWrapper';
|
||||||
|
import { asset } from '../../../core/blitzkrieg/asset';
|
||||||
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
|
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
|
||||||
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
|
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
|
||||||
import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefinitions';
|
import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefinitions';
|
||||||
@@ -86,6 +87,7 @@ export default function Page() {
|
|||||||
[searchParams],
|
[searchParams],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const test = Object.keys(awaitedProvisionDefinitions).slice(0, 1);
|
||||||
const hasNonRegularGun = members.some(({ gun }) => gun.type !== 'regular');
|
const hasNonRegularGun = members.some(({ gun }) => gun.type !== 'regular');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -436,126 +438,174 @@ export default function Page() {
|
|||||||
<Table.Row>
|
<Table.Row>
|
||||||
<Table.Cell />
|
<Table.Cell />
|
||||||
|
|
||||||
{members.map(({ equipmentMatrix, tank, key }, index) => {
|
{members.map(
|
||||||
const equipmentPreset =
|
({ equipmentMatrix, tank, key, provisions }, index) => {
|
||||||
awaitedEquipmentDefinitions.presets[tank.equipment];
|
const equipmentPreset =
|
||||||
|
awaitedEquipmentDefinitions.presets[tank.equipment];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Table.Cell key={key}>
|
<Table.Cell key={key}>
|
||||||
<Flex
|
<Flex
|
||||||
align="center"
|
align="center"
|
||||||
justify="center"
|
justify="center"
|
||||||
style={{
|
gap="4"
|
||||||
width: '100%',
|
style={{
|
||||||
height: '100%',
|
width: '100%',
|
||||||
}}
|
height: '100%',
|
||||||
>
|
}}
|
||||||
<Popover.Root>
|
>
|
||||||
<Popover.Trigger>
|
<Popover.Root>
|
||||||
<Button variant="ghost" radius="large">
|
<Popover.Trigger>
|
||||||
<Flex gap="1" direction="column">
|
<Button variant="ghost" radius="large">
|
||||||
{times(3, (y) => (
|
<Flex gap="1" direction="column">
|
||||||
<Flex
|
{times(3, (y) => (
|
||||||
style={{
|
<Flex
|
||||||
gap: 6,
|
style={{
|
||||||
}}
|
gap: 6,
|
||||||
>
|
}}
|
||||||
{times(3, (x) => {
|
>
|
||||||
const equipment = equipmentMatrix[y][x];
|
{times(3, (x) => {
|
||||||
|
const equipment = equipmentMatrix[y][x];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
style={{
|
|
||||||
gap: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
style={{
|
||||||
width: 4,
|
gap: 2,
|
||||||
height: 8,
|
|
||||||
backgroundColor:
|
|
||||||
equipment === -1
|
|
||||||
? theme.colors
|
|
||||||
.textLowContrast_crimson
|
|
||||||
: theme.colors
|
|
||||||
.textLowContrast,
|
|
||||||
borderRadius: 2,
|
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 4,
|
width: 4,
|
||||||
height: 8,
|
height: 8,
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
equipment === 1
|
equipment === -1
|
||||||
? theme.colors
|
? theme.colors
|
||||||
.textLowContrast_crimson
|
.textLowContrast_crimson
|
||||||
: theme.colors
|
: theme.colors
|
||||||
.textLowContrast,
|
.textLowContrast,
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
<div
|
||||||
);
|
style={{
|
||||||
})}
|
width: 4,
|
||||||
</Flex>
|
height: 8,
|
||||||
))}
|
backgroundColor:
|
||||||
</Flex>
|
equipment === 1
|
||||||
</Button>
|
? theme.colors
|
||||||
</Popover.Trigger>
|
.textLowContrast_crimson
|
||||||
|
: theme.colors
|
||||||
|
.textLowContrast,
|
||||||
|
borderRadius: 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
<Popover.Content>
|
<Popover.Content>
|
||||||
<Flex direction="column" gap="4">
|
<Flex direction="column" gap="4">
|
||||||
<EquipmentManager
|
<EquipmentManager
|
||||||
matrix={equipmentMatrix}
|
matrix={equipmentMatrix}
|
||||||
preset={equipmentPreset}
|
preset={equipmentPreset}
|
||||||
onChange={(matrix) => {
|
onChange={(matrix) => {
|
||||||
mutateCompareTemporary((draft) => {
|
|
||||||
draft.members[index].equipmentMatrix =
|
|
||||||
matrix;
|
|
||||||
draft.sorting = undefined;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Flex justify="end" gap="4">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
color="red"
|
|
||||||
onClick={() => {
|
|
||||||
mutateCompareTemporary((draft) => {
|
mutateCompareTemporary((draft) => {
|
||||||
draft.members[index].equipmentMatrix =
|
draft.members[index].equipmentMatrix =
|
||||||
times(3, () =>
|
matrix;
|
||||||
times(3, () => 0),
|
|
||||||
) as EquipmentMatrix;
|
|
||||||
draft.sorting = undefined;
|
draft.sorting = undefined;
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
Clear
|
|
||||||
</Button>
|
<Flex justify="end" gap="4">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => {
|
color="red"
|
||||||
mutateCompareTemporary((draft) => {
|
onClick={() => {
|
||||||
draft.members.forEach((member) => {
|
mutateCompareTemporary((draft) => {
|
||||||
member.equipmentMatrix =
|
draft.members[index].equipmentMatrix =
|
||||||
draft.members[index].equipmentMatrix;
|
times(3, () =>
|
||||||
|
times(3, () => 0),
|
||||||
|
) as EquipmentMatrix;
|
||||||
draft.sorting = undefined;
|
draft.sorting = undefined;
|
||||||
});
|
});
|
||||||
});
|
}}
|
||||||
}}
|
>
|
||||||
>
|
Clear
|
||||||
Apply to all
|
</Button>
|
||||||
</Button>
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
mutateCompareTemporary((draft) => {
|
||||||
|
draft.members.forEach((member) => {
|
||||||
|
member.equipmentMatrix =
|
||||||
|
draft.members[
|
||||||
|
index
|
||||||
|
].equipmentMatrix;
|
||||||
|
draft.sorting = undefined;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Apply to all
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
radius="large"
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
width: 16,
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex direction="column">
|
||||||
|
{provisions.map((provision, index) => (
|
||||||
|
<img
|
||||||
|
key={provision}
|
||||||
|
src={asset(
|
||||||
|
`/icons/provisions/${provision}.webp`,
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
left: '50%',
|
||||||
|
/**
|
||||||
|
* max = 100% - 16px - 4px
|
||||||
|
* min = 4px
|
||||||
|
* diff = max - min
|
||||||
|
* = 100% - 16px - 4px - 4px
|
||||||
|
* = 100% - 24px
|
||||||
|
* coefficient = index / length - 1
|
||||||
|
* position = min + coefficient * diff
|
||||||
|
*/
|
||||||
|
top: `calc(4px + ${
|
||||||
|
provisions.length === 1
|
||||||
|
? 0.5
|
||||||
|
: index / (provisions.length - 1)
|
||||||
|
} * (100% - 24px))`,
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
position: 'absolute',
|
||||||
|
width: 16,
|
||||||
|
height: 16,
|
||||||
|
objectFit: 'contain',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</Flex>
|
</Flex>
|
||||||
</Popover.Content>
|
</Button>
|
||||||
</Popover.Root>
|
</Flex>
|
||||||
</Flex>
|
</Table.Cell>
|
||||||
</Table.Cell>
|
);
|
||||||
);
|
},
|
||||||
})}
|
)}
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
</Table.Body>
|
</Table.Body>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user