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: provisions

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-06 19:04:57 -05:00
1 parent 5d0fe8726b
commit 85d699dbfc
3 files changed
+132 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/page.tsx
+72 -43
View File
@@ -23,7 +23,9 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { EquipmentManager } from '../../../components/EquipmentManager';
import PageWrapper from '../../../components/PageWrapper';
import { ProvisionsManager } from '../../../components/ProvisionsManager';
import { asset } from '../../../core/blitzkrieg/asset';
import { availableProvisions } from '../../../core/blitzkrieg/availableProvisions';
import { equipmentDefinitions } from '../../../core/blitzkrieg/equipmentDefinitions';
import { modelDefinitions } from '../../../core/blitzkrieg/modelDefinitions';
import { provisionDefinitions } from '../../../core/blitzkrieg/provisionDefinitions';
@@ -439,9 +441,14 @@ export default function Page() {
<Table.Cell />
{members.map(
({ equipmentMatrix, tank, key, provisions }, index) => {
({ equipmentMatrix, tank, key, provisions, gun }, index) => {
const equipmentPreset =
awaitedEquipmentDefinitions.presets[tank.equipment];
const provisionsList = availableProvisions(
tank,
gun,
awaitedProvisionDefinitions,
);
return (
<Table.Cell key={key}>
@@ -559,48 +566,70 @@ export default function Page() {
</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>
</Button>
<Popover.Root>
<Popover.Trigger>
<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>
</Button>
</Popover.Trigger>
<Popover.Content>
<ProvisionsManager
provisions={provisionsList.map(
(provision) => provision.id,
)}
selected={provisions}
disabled={
tank.provisions === provisionsList.length
}
onChange={(provisions) => {
mutateCompareTemporary((draft) => {
draft.members[index].provisions =
provisions;
});
}}
/>
</Popover.Content>
</Popover.Root>
</Flex>
</Table.Cell>
);
src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx
+11 -30
View File
@@ -1,6 +1,6 @@
import { Button, Flex, Heading } from '@radix-ui/themes';
import { use } from 'react';
import { ProvisionButton } from '../../../../../../../components/ModuleButtons/ProvisionButton';
import { ProvisionsManager } from '../../../../../../../components/ProvisionsManager';
import { availableProvisions } from '../../../../../../../core/blitzkrieg/availableProvisions';
import { provisionDefinitions } from '../../../../../../../core/blitzkrieg/provisionDefinitions';
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
@@ -33,35 +33,16 @@ export function Provisions() {
</Button>
</Flex>
<Flex wrap="wrap">
{provisionsList.map((provision, index) => {
const selected = provisions.includes(provision.id);
return (
<ProvisionButton
key={provision.id}
first={index === 0}
last={index === provisionsList.length - 1}
rowChild
disabled={tank.provisions === provisions.length && !selected}
provision={provision.id}
selected={selected}
onClick={() => {
mutateDuel((draft) => {
if (selected) {
draft.protagonist!.provisions =
draft.protagonist!.provisions.filter(
(id) => id !== provision.id,
);
} else {
draft.protagonist!.provisions.push(provision.id);
}
});
}}
/>
);
})}
</Flex>
<ProvisionsManager
provisions={provisionsList.map((provision) => provision.id)}
selected={provisions}
disabled={tank.provisions === provisionsList.length}
onChange={(provisions) => {
mutateDuel((draft) => {
draft.protagonist!.provisions = provisions;
});
}}
/>
</ConfigurationChildWrapper>
);
}
src/components/ProvisionsManager.tsx
+49
View File
@@ -0,0 +1,49 @@
import { Flex } from '@radix-ui/themes';
import { ProvisionButton } from './ModuleButtons/ProvisionButton';
interface ProvisionsManagerProps {
provisions: number[];
selected: number[];
disabled?: boolean;
onChange?: (provisions: number[]) => void;
}
export function ProvisionsManager({
provisions,
selected,
onChange,
disabled,
}: ProvisionsManagerProps) {
return (
<Flex wrap="wrap">
{provisions.map((provision, index) => {
const isSelected = selected.includes(provision);
return (
<ProvisionButton
key={provision}
first={index === 0}
last={index === provisions.length - 1}
rowChild
disabled={disabled && !selected}
provision={provision}
selected={isSelected}
onClick={() => {
if (!onChange) return;
const draft = [...selected];
if (isSelected) {
draft.splice(draft.indexOf(provision), 1);
} else {
draft.push(provision);
}
onChange(draft);
}}
/>
);
})}
</Flex>
);
}