diff --git a/packages/website/src/components/TierList/Table/constants.ts b/packages/website/src/components/TierList/Table/constants.ts index dbf4896ff..c90423b36 100644 --- a/packages/website/src/components/TierList/Table/constants.ts +++ b/packages/website/src/components/TierList/Table/constants.ts @@ -15,4 +15,3 @@ export const tierListRowElements = new Set(); export const tierListCardElements = tierListRows.map( () => new Set(), ); -export const placedTanks = new Set(); diff --git a/packages/website/src/components/TierList/Tile.tsx b/packages/website/src/components/TierList/Tile.tsx index c8fbe7cb0..c99932e32 100644 --- a/packages/website/src/components/TierList/Tile.tsx +++ b/packages/website/src/components/TierList/Tile.tsx @@ -107,6 +107,7 @@ export function TierListTile(props: TierListTileProps) { row.filter((tankId) => tankId !== props.tank.id), ); draft.tanks[rowIndex].splice(tileIndex, 0, props.tank.id); + draft.placedTanks.add(props.tank.id); }); wasPlaced = true; @@ -120,6 +121,7 @@ export function TierListTile(props: TierListTileProps) { row.filter((tankId) => tankId !== props.tank.id), ); draft.tanks[rowIndex].push(props.tank.id); + draft.placedTanks.add(props.tank.id); }); wasPlaced = true; @@ -133,6 +135,7 @@ export function TierListTile(props: TierListTileProps) { draft.tanks = draft.tanks.map((row) => row.filter((tankId) => tankId !== props.tank.id), ); + draft.placedTanks.delete(props.tank.id); }); } diff --git a/packages/website/src/components/TierList/Tiles.tsx b/packages/website/src/components/TierList/Tiles.tsx index 87e8fbf29..5b23d60ba 100644 --- a/packages/website/src/components/TierList/Tiles.tsx +++ b/packages/website/src/components/TierList/Tiles.tsx @@ -8,6 +8,7 @@ import { times } from 'lodash-es'; import { useMemo, useState } from 'react'; import { filterTank } from '../../core/blitzkit/filterTank'; import { $tankFilters } from '../../stores/tankFilters'; +import { TierList } from '../../stores/tierList'; import { SkeletonTankCard } from '../TankSearch/components/SkeletonTankCard'; import { TankCardWrapper } from '../TankSearch/components/TankCardWrapper'; import { TierListTile } from './Tile'; @@ -21,13 +22,16 @@ const DEFAULT_LOADED_CARDS = 75; export function TierListTiles() { const filters = useStore($tankFilters); + const placedTanks = TierList.use((state) => state.placedTanks); const sorted = useMemo( () => metaSortTank( - tanks.filter((tank) => filterTank(filters, tank)), + tanks.filter( + (tank) => filterTank(filters, tank) && !placedTanks.has(tank.id), + ), gameDefinitions, ).reverse(), - [filters], + [filters, placedTanks], ); const [loadedTiles, setLoadedTiles] = useState(DEFAULT_LOADED_CARDS); diff --git a/packages/website/src/stores/tierList.ts b/packages/website/src/stores/tierList.ts index 382a34b52..13c3605b8 100644 --- a/packages/website/src/stores/tierList.ts +++ b/packages/website/src/stores/tierList.ts @@ -1,3 +1,4 @@ +import { enableMapSet } from 'immer'; import { create } from 'zustand'; import { subscribeWithSelector } from 'zustand/middleware'; import { tierListRows } from '../components/TierList/Table/constants'; @@ -6,13 +7,17 @@ import { createContextualStore } from '../core/zustand/createContextualStore'; export interface TierList { dragging: boolean; tanks: number[][]; + placedTanks: Set; } +enableMapSet(); + export const TierList = createContextualStore(() => create()( subscribeWithSelector(() => ({ dragging: false, tanks: tierListRows.map(() => []), + placedTanks: new Set(), })), ), );