diff --git a/src/app/tools/tankopedia/[id]/components/Configure.tsx b/src/app/tools/tankopedia/[id]/components/Configure.tsx index 1f65e7ac4..4df99b767 100644 --- a/src/app/tools/tankopedia/[id]/components/Configure.tsx +++ b/src/app/tools/tankopedia/[id]/components/Configure.tsx @@ -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 ( - + Configure - - Modules - - - {duel.protagonist.tank.turrets.map((thisTurret, index) => { - return ( - { - setDuel( - produce((draft) => { - draft.protagonist.turret = thisTurret; - draft.protagonist.gun = thisTurret.guns.at(-1)!; - draft.protagonist.shell = - thisTurret.guns.at(-1)!.shells[0]; - }), - ); - }} - /> - ); - })} - + Modules - - {duel.protagonist.turret.guns.map((thisGun, index) => { - return ( + + + {duel.protagonist.tank.turrets.map((thisTurret, index) => { + return ( + { + setDuel( + produce((draft) => { + draft.protagonist.turret = thisTurret; + draft.protagonist.gun = thisTurret.guns.at(-1)!; + draft.protagonist.shell = + thisTurret.guns.at(-1)!.shells[0]; + }), + ); + }} + /> + ); + })} + + + + {duel.protagonist.turret.guns.map((thisGun, index) => { + return ( + { + setDuel( + produce((draft) => { + draft.protagonist.gun = thisGun; + draft.protagonist.shell = thisGun.shells[0]; + }), + ); + }} + /> + ); + })} + + + + Equipment + + + {equipmentRows.map((equipmentRow, rowIndex) => ( + + {equipmentRow.map((equipment, columnIndex) => ( + { - setDuel( - produce((draft) => { - draft.protagonist.gun = thisGun; - draft.protagonist.shell = thisGun.shells[0]; - }), - ); + mutateTankopedia((draft) => { + draft.equipmentMatrix[rowIndex][columnIndex] = 0; + }); }} /> - ); - })} + { + mutateTankopedia((draft) => { + draft.equipmentMatrix[rowIndex][columnIndex] = 1; + }); + }} + /> + + ))} - + ))} + + + {/* + Modules @@ -86,34 +130,7 @@ export function Configure({ duel, setDuel }: ConfigureProps) { Provisions - - - - Equipment - - - {equipmentRows.map((equipmentRow) => ( - - {equipmentRow.map((equipment) => ( - - - - - ))} - - ))} - - + */} ); } diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts index ce3bbcbca..3675861da 100644 --- a/src/stores/tankopedia.ts +++ b/src/stores/tankopedia.ts @@ -43,6 +43,7 @@ interface Tankopedia { greenPenetration: boolean; }; }; + equipmentMatrix: (0 | 1)[][]; mode: TankopediaMode; } @@ -70,7 +71,11 @@ export const useTankopedia = create()( greenPenetration: false, }, }, - areTanksAssigned: false, + equipmentMatrix: [ + [1, 0, 0], + [0, 1, 1], + [0, 1, 0], + ], mode: 'model', })), );