feat: hide tanks from lost if placed

packages/website/src/components/TierList/Table/constants.ts

@@ -15,4 +15,3 @@ export const tierListRowElements = new Set<HTMLTableRowElement>();
 export const tierListCardElements = tierListRows.map(
   () => new Set<HTMLDivElement>(),
 );
-export const placedTanks = new Set<number>();

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);
       });
     }
 

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);
 

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<number>;
 }
 
+enableMapSet();
+
 export const TierList = createContextualStore(() =>
   create<TierList>()(
     subscribeWithSelector<TierList>(() => ({
       dragging: false,
       tanks: tierListRows.map(() => []),
+      placedTanks: new Set(),
     })),
   ),
 );