feat: consumable definitions

This commit is contained in:
TrèsAbhi committed 2024-01-16 21:49:15 -06:00
1 parent 3e3ed35fb0
commit d4e8ec125f
6 files changed
+247 -90

No files matched your search

@@ -23,103 +23,110 @@ export function Configure({ duel, setDuel }: ConfigureProps) {
<Flex gap="4" direction="column">
<Heading>Configure</Heading>
<Heading size="4">Modules</Heading>
<Flex gap="4" justify="between" wrap="wrap">
<Flex gap="2" direction="column">
<Heading size="4">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>
<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
type="equipment"
equipment={equipment[0]}
first
rowChild
selected={equipmentMatrix[rowIndex][columnIndex] === 0}
onClick={() => {
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>
{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>
</Flex>
<Flex gap="2" direction="column">
<Heading size="4">Equipment</Heading>
<Flex direction="column" gap="2">
{equipmentRows.map((equipmentRow, rowIndex) => (
<Flex gap="2" key={rowIndex}>
{equipmentRow.map((equipment, columnIndex) => (
<Flex key={columnIndex}>
<ModuleButton
type="equipment"
equipment={equipment[0]}
first
rowChild
selected={equipmentMatrix[rowIndex][columnIndex] === 0}
onClick={() => {
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>
{/* <Flex gap="4" direction="column">
<Heading size="5">Modules</Heading>
<Flex gap="2" direction="column">
<Heading size="4">Consumables</Heading>
</Flex>
</Flex>
{/*
<Flex gap="4" direction="column">
<Heading size="5">Camouflage</Heading>
</Flex>
+2 -1
View File
@@ -36,7 +36,8 @@ export function ModuleButton({
<Button
radius="medium"
color={selected ? undefined : 'gray'}
variant={selected ? 'solid' : 'soft'}
variant={selected ? 'surface' : 'soft'}
// variant="soft"
style={{
padding: 0,
width: 48,
@@ -0,0 +1,33 @@
import { asset } from './asset';
type ConsumableDefinitionFilter =
| {
type: 'tier';
min: number;
max: number;
}
| {
type: 'ids';
ids: number[];
}
| {
type: 'category';
categories: string[];
};
export interface ConsumableDefinitions {
[key: string]: {
id: number;
name: string;
effects?: Record<string, number>;
include: ConsumableDefinitionFilter[];
exclude?: ConsumableDefinitionFilter[];
};
}
export const consumableDefinitions = fetch(
asset('definitions/consumables.json'),
{
cache: 'no-cache',
},
).then(async (response) => response.json() as Promise<ConsumableDefinitions>);