mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
feat: code split
This commit is contained in:
TrèsAbhi committed
1 parent
cbe7b42fb8
commit
38870ca3f7
5 files changed
+223
-188
No files matched your search
@@ -1,188 +0,0 @@
|
||||
import { Flex, Heading } from '@radix-ui/themes';
|
||||
import { use } from 'react';
|
||||
import { ModuleButton } from '../../../../../components/ModuleButton';
|
||||
import { checkConsumableInclusivity } from '../../../../../core/blitzkrieg/checkConsumableInclusivity';
|
||||
import { consumableDefinitions } from '../../../../../core/blitzkrieg/consumablesDefinitions';
|
||||
import { equipmentDefinitions } from '../../../../../core/blitzkrieg/equipmentDefinitions';
|
||||
import { TIER_ROMAN_NUMERALS } from '../../../../../core/blitzkrieg/tankDefinitions';
|
||||
import { mutateDuel, useDuel } from '../../../../../stores/duel';
|
||||
import {
|
||||
mutateTankopediaTemporary,
|
||||
useTankopediaTemporary,
|
||||
} from '../../../../../stores/tankopedia';
|
||||
|
||||
export function Configure() {
|
||||
const protagonist = useDuel((state) => state.protagonist!);
|
||||
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
|
||||
const awaitedConsumableDefinitions = use(consumableDefinitions);
|
||||
const equipmentRows =
|
||||
awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
|
||||
const equipmentMatrix = useTankopediaTemporary(
|
||||
(state) => state.equipmentMatrix,
|
||||
);
|
||||
const consumables = useTankopediaTemporary((state) => state.consumables);
|
||||
const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
|
||||
(consumable) =>
|
||||
checkConsumableInclusivity(consumable, protagonist.tank, protagonist.gun),
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading>Configure</Heading>
|
||||
|
||||
<Flex gap="4" justify="between" wrap="wrap">
|
||||
<Flex gap="2" direction="column">
|
||||
<Heading size="4">Modules</Heading>
|
||||
|
||||
<Flex gap="2">
|
||||
<Flex>
|
||||
{protagonist.tank.turrets.map((thisTurret, index) => {
|
||||
return (
|
||||
<ModuleButton
|
||||
key={thisTurret.id}
|
||||
selected={protagonist.turret.id === thisTurret.id}
|
||||
type="module"
|
||||
module="turret"
|
||||
discriminator={TIER_ROMAN_NUMERALS[thisTurret.tier]}
|
||||
first={index === 0}
|
||||
last={index === protagonist.tank.turrets.length - 1}
|
||||
rowChild
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.protagonist!.turret = thisTurret;
|
||||
draft.protagonist!.gun = thisTurret.guns.at(-1)!;
|
||||
draft.protagonist!.shell =
|
||||
thisTurret.guns.at(-1)!.shells[0];
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Flex>
|
||||
{protagonist.turret.guns.map((thisGun, index) => {
|
||||
return (
|
||||
<ModuleButton
|
||||
key={thisGun.id}
|
||||
type="module"
|
||||
module="gun"
|
||||
discriminator={TIER_ROMAN_NUMERALS[thisGun.tier]}
|
||||
selected={protagonist.gun.id === thisGun.id}
|
||||
first={index === 0}
|
||||
last={index === protagonist.turret.guns.length - 1}
|
||||
rowChild
|
||||
onClick={() => {
|
||||
mutateDuel((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] === -1}
|
||||
onClick={() => {
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
if (equipmentMatrix[rowIndex][columnIndex] === -1) {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = 0;
|
||||
} else {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = -1;
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<ModuleButton
|
||||
type="equipment"
|
||||
equipment={equipment[1]}
|
||||
last
|
||||
rowChild
|
||||
selected={equipmentMatrix[rowIndex][columnIndex] === 1}
|
||||
onClick={() => {
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
if (equipmentMatrix[rowIndex][columnIndex] === 1) {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = 0;
|
||||
} else {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = 1;
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="2" direction="column">
|
||||
<Heading size="4">
|
||||
Consumables (max {protagonist.tank.consumables})
|
||||
</Heading>
|
||||
|
||||
<Flex>
|
||||
{consumablesList.map((consumable, index) => {
|
||||
const selected = consumables.includes(consumable.id);
|
||||
|
||||
return (
|
||||
<ModuleButton
|
||||
first={index === 0}
|
||||
last={index === consumablesList.length - 1}
|
||||
rowChild
|
||||
type="consumable"
|
||||
disabled={
|
||||
protagonist.tank.consumables === consumables.length &&
|
||||
!selected
|
||||
}
|
||||
consumable={consumable.id}
|
||||
selected={selected}
|
||||
onClick={() => {
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
if (selected) {
|
||||
draft.consumables = draft.consumables.filter(
|
||||
(id) => id !== consumable.id,
|
||||
);
|
||||
} else {
|
||||
draft.consumables.push(consumable.id);
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/*
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading size="5">Camouflage</Heading>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading size="5">Consumables</Heading>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading size="5">Provisions</Heading>
|
||||
</Flex> */}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { Flex, Heading, Text } from '@radix-ui/themes';
|
||||
import { use } from 'react';
|
||||
import { ModuleButton } from '../../../../../../../components/ModuleButton';
|
||||
import { checkConsumableInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableInclusivity';
|
||||
import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumablesDefinitions';
|
||||
import { useDuel } from '../../../../../../../stores/duel';
|
||||
import {
|
||||
mutateTankopediaTemporary,
|
||||
useTankopediaTemporary,
|
||||
} from '../../../../../../../stores/tankopedia';
|
||||
|
||||
export function Consumables() {
|
||||
const protagonist = useDuel((state) => state.protagonist!);
|
||||
const awaitedConsumableDefinitions = use(consumableDefinitions);
|
||||
const consumables = useTankopediaTemporary((state) => state.consumables);
|
||||
const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
|
||||
(consumable) =>
|
||||
checkConsumableInclusivity(consumable, protagonist.tank, protagonist.gun),
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex gap="2" direction="column">
|
||||
<Heading size="4">
|
||||
Consumables{' '}
|
||||
<Text color="gray">(max {protagonist.tank.consumables})</Text>
|
||||
</Heading>
|
||||
|
||||
<Flex>
|
||||
{consumablesList.map((consumable, index) => {
|
||||
const selected = consumables.includes(consumable.id);
|
||||
|
||||
return (
|
||||
<ModuleButton
|
||||
first={index === 0}
|
||||
last={index === consumablesList.length - 1}
|
||||
rowChild
|
||||
type="consumable"
|
||||
disabled={
|
||||
protagonist.tank.consumables === consumables.length && !selected
|
||||
}
|
||||
consumable={consumable.id}
|
||||
selected={selected}
|
||||
onClick={() => {
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
if (selected) {
|
||||
draft.consumables = draft.consumables.filter(
|
||||
(id) => id !== consumable.id,
|
||||
);
|
||||
} else {
|
||||
draft.consumables.push(consumable.id);
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Flex, Heading } from '@radix-ui/themes';
|
||||
import { use } from 'react';
|
||||
import { ModuleButton } from '../../../../../../../components/ModuleButton';
|
||||
import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
|
||||
import { useDuel } from '../../../../../../../stores/duel';
|
||||
import {
|
||||
mutateTankopediaTemporary,
|
||||
useTankopediaTemporary,
|
||||
} from '../../../../../../../stores/tankopedia';
|
||||
|
||||
export function Equipments() {
|
||||
const protagonist = useDuel((state) => state.protagonist!);
|
||||
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
|
||||
const equipmentRows =
|
||||
awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
|
||||
const equipmentMatrix = useTankopediaTemporary(
|
||||
(state) => state.equipmentMatrix,
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex gap="2" direction="column">
|
||||
<Heading size="4">Equipments</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] === -1}
|
||||
onClick={() => {
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
if (equipmentMatrix[rowIndex][columnIndex] === -1) {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = 0;
|
||||
} else {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = -1;
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<ModuleButton
|
||||
type="equipment"
|
||||
equipment={equipment[1]}
|
||||
last
|
||||
rowChild
|
||||
selected={equipmentMatrix[rowIndex][columnIndex] === 1}
|
||||
onClick={() => {
|
||||
mutateTankopediaTemporary((draft) => {
|
||||
if (equipmentMatrix[rowIndex][columnIndex] === 1) {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = 0;
|
||||
} else {
|
||||
draft.equipmentMatrix[rowIndex][columnIndex] = 1;
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Flex, Heading } from '@radix-ui/themes';
|
||||
import { ModuleButton } from '../../../../../../../components/ModuleButton';
|
||||
import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions';
|
||||
import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
|
||||
|
||||
export function Modules() {
|
||||
const protagonist = useDuel((state) => state.protagonist!);
|
||||
|
||||
return (
|
||||
<Flex gap="2" direction="column">
|
||||
<Heading size="4">Modules</Heading>
|
||||
|
||||
<Flex gap="2">
|
||||
<Flex>
|
||||
{protagonist.tank.turrets.map((thisTurret, index) => {
|
||||
return (
|
||||
<ModuleButton
|
||||
key={thisTurret.id}
|
||||
selected={protagonist.turret.id === thisTurret.id}
|
||||
type="module"
|
||||
module="turret"
|
||||
discriminator={TIER_ROMAN_NUMERALS[thisTurret.tier]}
|
||||
first={index === 0}
|
||||
last={index === protagonist.tank.turrets.length - 1}
|
||||
rowChild
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.protagonist!.turret = thisTurret;
|
||||
draft.protagonist!.gun = thisTurret.guns.at(-1)!;
|
||||
draft.protagonist!.shell =
|
||||
thisTurret.guns.at(-1)!.shells[0];
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Flex>
|
||||
{protagonist.turret.guns.map((thisGun, index) => {
|
||||
return (
|
||||
<ModuleButton
|
||||
key={thisGun.id}
|
||||
type="module"
|
||||
module="gun"
|
||||
discriminator={TIER_ROMAN_NUMERALS[thisGun.tier]}
|
||||
selected={protagonist.gun.id === thisGun.id}
|
||||
first={index === 0}
|
||||
last={index === protagonist.turret.guns.length - 1}
|
||||
rowChild
|
||||
onClick={() => {
|
||||
mutateDuel((draft) => {
|
||||
draft.protagonist!.gun = thisGun;
|
||||
draft.protagonist!.shell = thisGun.shells[0];
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Flex, Heading } from '@radix-ui/themes';
|
||||
import { Consumables } from './components/Consumables';
|
||||
import { Equipments } from './components/Equipments';
|
||||
import { Modules } from './components/Modules';
|
||||
|
||||
export function Configure() {
|
||||
return (
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading>Configure</Heading>
|
||||
|
||||
<Flex gap="4" direction="column" wrap="wrap">
|
||||
<Modules />
|
||||
<Equipments />
|
||||
<Consumables />
|
||||
</Flex>
|
||||
|
||||
{/*
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading size="5">Camouflage</Heading>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading size="5">Consumables</Heading>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction="column">
|
||||
<Heading size="5">Provisions</Heading>
|
||||
</Flex> */}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user