TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-11-12 12:16:11 +01: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>
);