fix: use roles

packages/website/src/components/ConsumablesManager.tsx

@@ -1,6 +1,6 @@
-import type { Consumable } from '@blitzkit/core';
+import type { Consumable } from "@blitzkit/core";
-import { Flex, type FlexProps } from '@radix-ui/themes';
+import { Flex, type FlexProps } from "@radix-ui/themes";
-import { ConsumableButton } from './ModuleButtons/ConsumableButton';
+import { ConsumableButton } from "./ModuleButtons/ConsumableButton";
 
 type ConsumablesManagerProps = FlexProps & {
   consumables: Consumable[];
@@ -27,6 +27,8 @@ export function ConsumablesManager({
   return (
     <Flex wrap="wrap" gap="2" {...props}>
       {consumables.map((consumable) => {
+        if (consumable.game_mode_exclusive) return null;
+
         const isSelected = selected.some((id) => id === consumable.id);
 
         return (

packages/website/src/components/ProvisionsManager.tsx

@@ -1,5 +1,6 @@
-import { Flex } from '@radix-ui/themes';
+import { Flex } from "@radix-ui/themes";
-import { ProvisionButton } from './ModuleButtons/ProvisionButton';
+import { awaitableProvisionDefinitions } from "../core/awaitables/provisionDefinitions";
+import { ProvisionButton } from "./ModuleButtons/ProvisionButton";
 
 interface ProvisionsManagerProps {
   provisions: number[];
@@ -8,6 +9,8 @@ interface ProvisionsManagerProps {
   onChange?: (provisions: number[]) => void;
 }
 
+const provisionDefinitions = await awaitableProvisionDefinitions;
+
 export function ProvisionsManager({
   provisions,
   selected,
@@ -15,15 +18,18 @@ export function ProvisionsManager({
   disabled,
 }: ProvisionsManagerProps) {
   return (
-    <Flex wrap="wrap" gap="2" justify={{ initial: 'center', sm: 'start' }}>
+    <Flex wrap="wrap" gap="2" justify={{ initial: "center", sm: "start" }}>
-      {provisions.map((provision) => {
+      {provisions.map((id) => {
-        const isSelected = selected.includes(provision);
+        const isSelected = selected.includes(id);
+        const provision = provisionDefinitions.provisions[id];
+
+        if (provision.game_mode_exclusive) return null;
 
         return (
           <ProvisionButton
-            key={provision}
+            key={id}
             disabled={disabled && !isSelected}
-            provision={provision}
+            provision={id}
             selected={isSelected}
             onClick={() => {
               if (!onChange) return;
@@ -31,9 +37,9 @@ export function ProvisionsManager({
               const draft = [...selected];
 
               if (isSelected) {
-                draft.splice(draft.indexOf(provision), 1);
+                draft.splice(draft.indexOf(id), 1);
               } else {
-                draft.push(provision);
+                draft.push(id);
               }
 
               onChange(draft);

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -1,10 +1,10 @@
-import { asset } from '@blitzkit/core';
+import { asset } from "@blitzkit/core";
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { Box, Flex, Heading, Text } from "@radix-ui/themes";
-import { awaitableConsumableDefinitions } from '../../core/awaitables/consumableDefinitions';
+import { awaitableConsumableDefinitions } from "../../core/awaitables/consumableDefinitions";
-import { awaitableGameDefinitions } from '../../core/awaitables/gameDefinitions';
+import { awaitableGameDefinitions } from "../../core/awaitables/gameDefinitions";
-import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { Duel } from '../../stores/duel';
+import { Duel } from "../../stores/duel";
 
 const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
   await Promise.all([
@@ -39,22 +39,22 @@ export function GameModeSection() {
               overflow="hidden"
               direction="column"
               style={{
-                borderRadius: 'var(--radius-3)',
+                borderRadius: "var(--radius-3)",
                 background: `url(${asset(
-                  `icons/game_mode_banners/${id}.webp`,
+                  `icons/game_mode_banners/${id}.webp`
                 )})`,
-                backgroundSize: 'cover',
+                backgroundSize: "cover",
-                backgroundPosition: 'center',
+                backgroundPosition: "center",
               }}
             >
               <Box
                 flexGrow="1"
                 style={{
                   background: `url(${asset(
-                    `icons/game_mode_banners/${id}.webp`,
+                    `icons/game_mode_banners/${id}.webp`
                   )})`,
-                  backgroundSize: 'cover',
+                  backgroundSize: "cover",
-                  backgroundPosition: 'center',
+                  backgroundPosition: "center",
                 }}
               />
 
@@ -64,8 +64,8 @@ export function GameModeSection() {
                 height="98px"
                 flexShrink="0"
                 style={{
-                  backdropFilter: 'blur(4rem)',
+                  backdropFilter: "blur(4rem)",
-                  WebkitBackdropFilter: 'blur(4rem)',
+                  WebkitBackdropFilter: "blur(4rem)",
                 }}
                 align="center"
                 justify="center"
@@ -83,9 +83,9 @@ export function GameModeSection() {
                         <Flex align="center" gap="1">
                           <img
                             style={{
-                              width: '1.5em',
+                              width: "1.5em",
-                              height: '1.5em',
+                              height: "1.5em",
-                              objectFit: 'contain',
+                              objectFit: "contain",
                             }}
                             src={asset(`icons/provisions/${id}.webp`)}
                             alt={unwrap(provisions.name)}
@@ -95,6 +95,7 @@ export function GameModeSection() {
                       </Text>
                     );
                   })}
+
                   {gameDefinitions.roles[value].consumables.map((id) => {
                     const consumable = consumableDefinitions.consumables[id];
 
@@ -103,9 +104,9 @@ export function GameModeSection() {
                         <Flex align="center" gap="1">
                           <img
                             style={{
-                              width: '1.5em',
+                              width: "1.5em",
-                              height: '1.5em',
+                              height: "1.5em",
-                              objectFit: 'contain',
+                              objectFit: "contain",
                             }}
                             src={asset(`icons/consumables/${id}.webp`)}
                             alt={unwrap(consumable.name)}

packages/website/src/core/blitzkit/filterTank.ts

@@ -3,12 +3,14 @@ import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit
 import { times } from "lodash-es";
 import { awaitableConsumableDefinitions } from "../../core/awaitables/consumableDefinitions";
 import type { TankFilters } from "../../stores/tankFilters";
+import { awaitableGameDefinitions } from "../awaitables/gameDefinitions";
 import { awaitableProvisionDefinitions } from "../awaitables/provisionDefinitions";
 
 const SHELLS = times(3, (index) => index);
 
 const consumableDefinitions = await awaitableConsumableDefinitions;
 const provisionDefinitions = await awaitableProvisionDefinitions;
+const gameDefinitions = await awaitableGameDefinitions;
 
 export async function filterTank(
   filters: TankFilters,
@@ -72,27 +74,15 @@ export async function filterTank(
         )
       )) &&
     (filters.abilities.length === 0 ||
-      filters.abilities.every((ability) =>
+      Object.values(tank.roles).some((id) =>
-        tank.turrets.some((turret) =>
+        gameDefinitions.roles[id as unknown as number].consumables.some(
-          turret.guns.some((gun) =>
+          (consumable) => filters.abilities.includes(consumable)
-            checkConsumableProvisionInclusivity(
-              consumableDefinitions.consumables[ability],
-              tank,
-              gun
-            )
-          )
         )
       )) &&
     (filters.powers.length === 0 ||
-      filters.powers.every((power) =>
+      Object.values(tank.roles).some((id) =>
-        tank.turrets.some((turret) =>
+        gameDefinitions.roles[id as unknown as number].provisions.some(
-          turret.guns.some((gun) =>
+          (consumable) => filters.powers.includes(consumable)
-            checkConsumableProvisionInclusivity(
-              provisionDefinitions.provisions[power],
-              tank,
-              gun
-            )
-          )
         )
       ))
   );