diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx
index fc51ff253..22cc52588 100644
--- a/packages/website/src/components/TankSearch/components/FilterControl.tsx
+++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx
@@ -26,7 +26,7 @@ import {
type FlexProps,
} from "@radix-ui/themes";
import { times } from "lodash-es";
-import { Fragment, type ComponentProps, type ReactNode } from "react";
+import { Fragment, useState, type ComponentProps, type ReactNode } from "react";
import { awaitableConsumableDefinitions } from "../../../core/awaitables/consumableDefinitions";
import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions";
import { awaitableProvisionDefinitions } from "../../../core/awaitables/provisionDefinitions";
@@ -160,17 +160,13 @@ export function FilterControl() {
-
-
-
-
-
+
);
@@ -1031,205 +1027,166 @@ function ProvisionsFilter() {
);
}
-function PowersFilter() {
- const { unwrap, strings } = useLocale();
+function GameModeAbilitiesFilter() {
+ const { unwrap } = useLocale();
+ const rawAbilities = TankFilters.use((state) => state.abilities);
const rawPowers = TankFilters.use((state) => state.powers);
- const powers =
- rawPowers.length === 0
- ? Array.from(allGameModeProvisions.values())
- : rawPowers;
+ const [activeTab, setActiveTab] = useState<"active" | "passive">("active");
+
+ const totalSelected = rawAbilities.length + rawPowers.length;
return (
-
- {gameModeRoles.map(({ gameModeId, provisions }) => {
- const gameMode = gameDefinitions.gameModes[gameModeId];
-
- if (provisions.length === 0) return null;
-
- return (
-
- {unwrap(gameMode.name)}
-
- {provisions.map((provision) => {
- {
- const selected = rawPowers.includes(provision);
- const powerDefinition =
- provisionDefinitions.provisions[provision];
-
- return (
- {
- event.preventDefault();
-
- TankFilters.mutate((draft) => {
- if (selected) {
- draft.powers = draft.powers.filter(
- (n) => n !== provision
- );
- } else {
- draft.powers = [...draft.powers, provision];
- }
- });
- }}
- checked={selected}
- key={provision}
- >
-
-
- {unwrap(powerDefinition.name)}
-
- );
- }
- })}
-
- );
- })}
+
+ {/* Tab buttons */}
+
+
+
+
- {
- event.preventDefault();
+ {/* Active Abilities Content */}
+ {activeTab === "active" && (
+ <>
+ {gameModeRoles.map(({ gameModeId, consumables }) => {
+ const gameMode = gameDefinitions.gameModes[gameModeId];
- TankFilters.mutate((draft) => {
- draft.powers = [];
- });
- }}
- >
-
- {strings.website.common.tank_search.clear}
-
-
-
- );
-}
+ if (consumables.length === 0) return null;
-function AbilitiesFilter() {
- const { unwrap, strings } = useLocale();
- const rawAbilities = TankFilters.use((state) => state.abilities);
- const abilities =
- rawAbilities.length === 0
- ? Array.from(allGameModeConsumables.values())
- : rawAbilities;
+ return (
+
+
+ {unwrap(gameMode.name)}
+
- return (
-
-
-
-
+ return (
+ {
+ event.preventDefault();
-
- {gameModeRoles.map(({ gameModeId, consumables }) => {
- const gameMode = gameDefinitions.gameModes[gameModeId];
-
- if (consumables.length === 0) return null;
-
- return (
-
- {unwrap(gameMode.name)}
-
- {consumables.map((consumable) => {
- {
- const selected = rawAbilities.includes(consumable);
- const abilityDefinition =
- consumableDefinitions.consumables[consumable];
-
- return (
- {
- event.preventDefault();
-
- TankFilters.mutate((draft) => {
- if (selected) {
- draft.abilities = draft.abilities.filter(
- (n) => n !== consumable
- );
- } else {
- draft.abilities = [...draft.abilities, consumable];
- }
- });
- }}
- checked={selected}
- key={consumable}
- >
-
{
+ if (selected) {
+ draft.abilities = draft.abilities.filter(
+ (n) => n !== consumable
+ );
+ } else {
+ draft.abilities = [
+ ...draft.abilities,
+ consumable,
+ ];
+ }
+ });
}}
- src={asset(`icons/consumables/${consumable}.webp`)}
- />
+ checked={selected}
+ key={consumable}
+ >
+
- {unwrap(abilityDefinition.name)}
-
- );
- }
- })}
-
- );
- })}
+ {unwrap(abilityDefinition.name)}
+
+ );
+ })}
+
+ );
+ })}
+ >
+ )}
+
+ {/* Passive Abilities Content */}
+ {activeTab === "passive" && (
+ <>
+ {gameModeRoles.map(({ gameModeId, provisions }) => {
+ const gameMode = gameDefinitions.gameModes[gameModeId];
+
+ if (provisions.length === 0) return null;
+
+ return (
+
+
+ {unwrap(gameMode.name)}
+
+
+ {provisions.map((provision) => {
+ const selected = rawPowers.includes(provision);
+ const powerDefinition =
+ provisionDefinitions.provisions[provision];
+
+ return (
+ {
+ event.preventDefault();
+
+ TankFilters.mutate((draft) => {
+ if (selected) {
+ draft.powers = draft.powers.filter(
+ (n) => n !== provision
+ );
+ } else {
+ draft.powers = [...draft.powers, provision];
+ }
+ });
+ }}
+ checked={selected}
+ key={provision}
+ >
+
+
+ {unwrap(powerDefinition.name)}
+
+ );
+ })}
+
+ );
+ })}
+ >
+ )}
@@ -1240,11 +1197,12 @@ function AbilitiesFilter() {
TankFilters.mutate((draft) => {
draft.abilities = [];
+ draft.powers = [];
});
}}
>
- {strings.website.common.tank_search.clear}
+ Clear All