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 ui

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-01-16 17:47:41 -06:00
1 parent a1f6bbdf1f
commit 3530e8d0f0
2 files changed
+100 -78
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/[id]/components/Configure.tsx
+94 -77
View File
@@ -3,6 +3,9 @@ import { produce } from 'immer';
import { Dispatch, SetStateAction, use } from 'react';
import { ModuleButton } from '../../../../../components/ModuleButton';
import { equipmentDefinitions } from '../../../../../core/blitzkrieg/equipmentDefinitions';
import mutateTankopedia, {
useTankopedia,
} from '../../../../../stores/tankopedia';
import { Duel } from '../page';
interface ConfigureProps {
@@ -14,66 +17,107 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
const equipmentRows =
awaitedEquipmentDefinitions.presets[duel.protagonist.tank.equipment];
const equipmentMatrix = useTankopedia((state) => state.equipmentMatrix);
return (
<Flex gap="6" direction="column">
<Flex gap="4" direction="column">
<Heading>Configure</Heading>
<Flex gap="4" direction="column">
<Heading size="5">Modules</Heading>
<Flex gap="2">
<Flex>
{duel.protagonist.tank.turrets.map((thisTurret, index) => {
return (
<ModuleButton
key={thisTurret.id}
selected={duel.protagonist.turret.id === thisTurret.id}
type="module"
module="turret"
tier={thisTurret.tier}
first={index === 0}
last={index === duel.protagonist.tank.turrets.length - 1}
rowChild
onClick={() => {
setDuel(
produce<Duel>((draft) => {
draft.protagonist.turret = thisTurret;
draft.protagonist.gun = thisTurret.guns.at(-1)!;
draft.protagonist.shell =
thisTurret.guns.at(-1)!.shells[0];
}),
);
}}
/>
);
})}
</Flex>
<Heading size="4">Modules</Heading>
<Flex>
{duel.protagonist.turret.guns.map((thisGun, index) => {
return (
<Flex gap="2">
<Flex>
{duel.protagonist.tank.turrets.map((thisTurret, index) => {
return (
<ModuleButton
key={thisTurret.id}
selected={duel.protagonist.turret.id === thisTurret.id}
type="module"
module="turret"
tier={thisTurret.tier}
first={index === 0}
last={index === duel.protagonist.tank.turrets.length - 1}
rowChild
onClick={() => {
setDuel(
produce<Duel>((draft) => {
draft.protagonist.turret = thisTurret;
draft.protagonist.gun = thisTurret.guns.at(-1)!;
draft.protagonist.shell =
thisTurret.guns.at(-1)!.shells[0];
}),
);
}}
/>
);
})}
</Flex>
<Flex>
{duel.protagonist.turret.guns.map((thisGun, index) => {
return (
<ModuleButton
key={thisGun.id}
type="module"
module="gun"
tier={thisGun.tier}
selected={duel.protagonist.gun.id === thisGun.id}
first={index === 0}
last={index === duel.protagonist.turret.guns.length - 1}
rowChild
onClick={() => {
setDuel(
produce<Duel>((draft) => {
draft.protagonist.gun = thisGun;
draft.protagonist.shell = thisGun.shells[0];
}),
);
}}
/>
);
})}
</Flex>
</Flex>
<Heading size="4">Equipment</Heading>
<Flex direction="column" gap="2">
{equipmentRows.map((equipmentRow, rowIndex) => (
<Flex gap="2">
{equipmentRow.map((equipment, columnIndex) => (
<Flex>
<ModuleButton
key={thisGun.id}
type="module"
module="gun"
tier={thisGun.tier}
selected={duel.protagonist.gun.id === thisGun.id}
first={index === 0}
last={index === duel.protagonist.turret.guns.length - 1}
type="equipment"
equipment={equipment[0]}
first
rowChild
selected={equipmentMatrix[rowIndex][columnIndex] === 0}
onClick={() => {
setDuel(
produce<Duel>((draft) => {
draft.protagonist.gun = thisGun;
draft.protagonist.shell = thisGun.shells[0];
}),
);
mutateTankopedia((draft) => {
draft.equipmentMatrix[rowIndex][columnIndex] = 0;
});
}}
/>
);
})}
<ModuleButton
type="equipment"
equipment={equipment[1]}
last
rowChild
selected={equipmentMatrix[rowIndex][columnIndex] === 1}
onClick={() => {
mutateTankopedia((draft) => {
draft.equipmentMatrix[rowIndex][columnIndex] = 1;
});
}}
/>
</Flex>
))}
</Flex>
</Flex>
))}
</Flex>
{/* <Flex gap="4" direction="column">
<Heading size="5">Modules</Heading>
</Flex>
<Flex gap="4" direction="column">
@@ -86,34 +130,7 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
<Flex gap="4" direction="column">
<Heading size="5">Provisions</Heading>
</Flex>
<Flex gap="4" direction="column">
<Heading size="5">Equipment</Heading>
<Flex direction="column" gap="2">
{equipmentRows.map((equipmentRow) => (
<Flex gap="2">
{equipmentRow.map((equipment) => (
<Flex>
<ModuleButton
type="equipment"
equipment={equipment[0]}
first
rowChild
/>
<ModuleButton
type="equipment"
equipment={equipment[1]}
last
rowChild
/>
</Flex>
))}
</Flex>
))}
</Flex>
</Flex>
</Flex> */}
</Flex>
);
}
src/stores/tankopedia.ts
+6 -1
View File
@@ -43,6 +43,7 @@ interface Tankopedia {
greenPenetration: boolean;
};
};
equipmentMatrix: (0 | 1)[][];
mode: TankopediaMode;
}
@@ -70,7 +71,11 @@ export const useTankopedia = create<Tankopedia>()(
greenPenetration: false,
},
},
areTanksAssigned: false,
equipmentMatrix: [
[1, 0, 0],
[0, 1, 1],
[0, 1, 0],
],
mode: 'model',
})),
);