mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 10:47:04 +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