diff --git a/src/app/tools/tankopedia/components/Options/index.tsx b/src/app/tools/tankopedia/components/Options/index.tsx index 79fc47221..d6e9f6a35 100644 --- a/src/app/tools/tankopedia/components/Options/index.tsx +++ b/src/app/tools/tankopedia/components/Options/index.tsx @@ -27,218 +27,219 @@ export function Options() { const tankopediaState = useTankopedia(); return ( - - - - - - - - - - mutateTankopedia((draft) => { - draft.filters.test = value as TankopediaTestTankDisplay; - }) - } - > - - Include - - - Exclude - - Only - - - - - - {TREE_TYPES.map((type, index) => ( - - ))} - - - - {[...TANK_TYPES].reverse().map((type, index) => ( - - ))} - - - - {[...TIERS].reverse().map((tier, index) => ( - - ))} - - - - {nations.map((nation, index) => ( - + + + + + + + mutateTankopedia((draft) => { + draft.filters.test = value as TankopediaTestTankDisplay; + }) + } + > + + Include + + + Exclude + + Only + + + + + {TREE_TYPES.map((type, index) => ( + - ))} - - - - - {[...TIERS] - .reverse() - .slice(0, 5) - .map((tier, index) => ( + onClick={() => + mutateTankopedia((draft) => { + if (draft.filters.treeTypes.includes(type)) { + draft.filters.treeTypes = draft.filters.treeTypes.filter( + (preexistingType) => preexistingType !== type, + ); + } else { + draft.filters.treeTypes.push(type); + } + }) + } + > + + + ))} + + + {[...TANK_TYPES].reverse().map((type, index) => ( + + ))} + + + + {[...TIERS] + .reverse() + .slice(0, 5) + .map((tier, index) => ( + + ))} + + + {[...TIERS] + .reverse() + .slice(5, 10) + .map((tier, index) => ( + + ))} + + + + + {nations.slice(0, 5).map((nation, index) => ( ))} - + - - {[...TIERS] - .reverse() - .slice(5, 10) - .map((tier, index) => ( + + {nations.slice(5, 10).map((nation, index) => ( ))} + - - - {nations.slice(0, 5).map((nation, index) => ( + + + {[...TIERS].reverse().map((tier, index) => ( + + ))} + + + {nations.map((nation, index) => ( - ))} - - - - {nations.slice(5, 10).map((nation, index) => ( -