useCompatibility

packages/website/src/components/TankopediaLoadout/index.tsx

@@ -1,5 +1,9 @@
+import type { Consumable } from "@blitzkit/core";
 import { TrashIcon } from "@radix-ui/react-icons";
+import { useCompatibility } from "../../hooks/useCompatibility";
+import { useConsumables } from "../../hooks/useConsumables";
 import { useProtagonist } from "../../hooks/useProtagonist";
+import { useProtagonistGun } from "../../hooks/useProtagonistGun";
 import { useStrings } from "../../hooks/useStrings";
 import { Tankopedia } from "../../stores/tankopedia";
 import { hasUpgrades } from "../../tankopedia/hasUpgrades";
@@ -116,7 +120,8 @@ function Consumables({ characteristics }: ConsumablesProps) {
   const strings = useStrings();
   const consumables = useConsumables();
   const tank = useProtagonist();
-  const isCompatible = useCompatibility(tank, characteristics);
+  const gun = useProtagonistGun();
+  const isCompatible = useCompatibility(tank, gun);
 
   return (
     <div className={styles.section}>
@@ -136,20 +141,13 @@ function Consumables({ characteristics }: ConsumablesProps) {
       </div>
 
       <div className={styles.consumables}>
-        {Object.entries(consumables.consumables).map(
-          ([id, { compatibility, consumable, purchase }]) => {
-            if (!isCompatible(compatibility!)) return null;
+        {Object.entries(consumables.consumables).map(([id, consumable]) => {
+          if (!isCompatible(consumable.include, consumable.exclude)) {
+            return null;
+          }
 
-            return (
-              <Consumable
-                key={id}
-                id={id}
-                consumable={consumable!}
-                purchase={purchase!}
-              />
-            );
-          },
-        )}
+          return <Consumable key={id} id={id} consumable={consumable} />;
+        })}
       </div>
     </div>
   );
@@ -157,8 +155,7 @@ function Consumables({ characteristics }: ConsumablesProps) {
 
 interface ConsumableProps {
   id: string;
-  consumable: ConsumableComponent;
-  purchase: BlitzStaticPurchaseComponent;
+  consumable: Consumable;
 }
 
 function Consumable({ id, consumable, purchase }: ConsumableProps) {

packages/website/src/hooks/useCompatibility.ts

@@ -0,0 +1,66 @@
+import {
+  ConsumableTankCategoryFilterCategory,
+  type GunDefinition,
+  type TankDefinition,
+  type TankInclusivityFilter,
+} from "@blitzkit/core";
+
+export function useCompatibility(tank: TankDefinition, gun: GunDefinition) {
+  return function (
+    include?: TankInclusivityFilter[],
+    exclude?: TankInclusivityFilter[],
+  ) {
+    return tankCompatibility(tank, gun, include, exclude);
+  };
+}
+
+function tankCompatibility(
+  tank: TankDefinition,
+  gun: GunDefinition,
+  include?: TankInclusivityFilter[],
+  exclude?: TankInclusivityFilter[],
+) {
+  const included = include?.every((rule) => {
+    switch (rule.filter_type!.$case) {
+      case "tiers":
+        return (
+          rule.filter_type!.value.min <= tank.tier &&
+          tank.tier <= rule.filter_type!.value.max
+        );
+
+      case "ids":
+        return rule.filter_type!.value.ids.includes(tank.id);
+
+      case "nations":
+        return rule.filter_type!.value.nations.includes(tank.nation);
+
+      case "categories":
+        throw new SyntaxError("Category filtering found in include rule");
+    }
+  });
+  const excluded = exclude?.some((rule) => {
+    switch (rule.filter_type!.$case) {
+      case "tiers":
+        return (
+          rule.filter_type!.value.min <= tank.tier &&
+          tank.tier <= rule.filter_type!.value.max
+        );
+
+      case "ids":
+        return rule.filter_type!.value.ids.includes(tank.id);
+
+      case "nations":
+        return rule.filter_type!.value.nations.includes(tank.nation);
+
+      case "categories":
+        return rule.filter_type!.value.categories.some((category) => {
+          switch (category) {
+            case ConsumableTankCategoryFilterCategory.CONSUMABLE_TANK_CATEGORY_FILTER_CATEGORY_CLIP:
+              return gun.gun_type!.$case !== "regular";
+          }
+        });
+    }
+  });
+
+  return include !== undefined && include?.length > 0 && included && !excluded;
+}

packages/website/src/hooks/useProtagonist.ts

@@ -5,6 +5,5 @@ import { useAwait } from "./useAwait";
 export function useProtagonist() {
   const id = Tankopedia.use((state) => state.protagonist.tank);
   const tank = useAwait(() => api.tank(id), `tank-${id}`);
-
   return tank;
 }

packages/website/src/hooks/useProtagonistGun.ts

@@ -0,0 +1,8 @@
+import { Tankopedia } from "../stores/tankopedia";
+import { useProtagonistTurret } from "./useProtagonistTurret";
+
+export function useProtagonistGun() {
+  const id = Tankopedia.use((state) => state.protagonist.gun);
+  const turret = useProtagonistTurret();
+  return turret.guns[id];
+}

packages/website/src/hooks/useProtagonistTurret.ts

@@ -0,0 +1,8 @@
+import { Tankopedia } from "../stores/tankopedia";
+import { useProtagonist } from "./useProtagonist";
+
+export function useProtagonistTurret() {
+  const id = Tankopedia.use((state) => state.protagonist.gun);
+  const tank = useProtagonist();
+  return tank.turrets[id];
+}