useCompatibility

packages/protos/src/blitzkit/consumable_definitions.proto

@@ -9,14 +9,14 @@ message ConsumableDefinitions {
 }
 
 message Consumable {
-  required uint32               id                  = 1;
+  required uint32                id                  = 1;
-  required I18nString           name                = 2;
+  required I18nString            name                = 2;
-  required bool                 game_mode_exclusive = 5;
+  required bool                  game_mode_exclusive = 5;
-  repeated ConsumableTankFilter include             = 6;
+  repeated TankInclusivityFilter include             = 6;
-  repeated ConsumableTankFilter exclude             = 7;
+  repeated TankInclusivityFilter exclude             = 7;
 }
 
-message ConsumableTankFilter {
+message TankInclusivityFilter {
   oneof filter_type {
     ConsumableTankTierFilter     tiers      = 1;
     ConsumableTankIdsFilter      ids        = 2;

packages/protos/src/blitzkit/provision_definitions.proto

@@ -12,9 +12,9 @@ message ProvisionDefinitions {
 message Provision {
   reserved 3; // crew
 
-  required uint32               id                  = 1;
+  required uint32                id                  = 1;
-  required I18nString           name                = 2;
+  required I18nString            name                = 2;
-  required bool                 game_mode_exclusive = 5;
+  required bool                  game_mode_exclusive = 5;
-  repeated ConsumableTankFilter include             = 6;
+  repeated TankInclusivityFilter include             = 6;
-  repeated ConsumableTankFilter exclude             = 7;
+  repeated TankInclusivityFilter exclude             = 7;
 }

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(
+        {Object.entries(consumables.consumables).map(([id, consumable]) => {
-          ([id, { compatibility, consumable, purchase }]) => {
+          if (!isCompatible(consumable.include, consumable.exclude)) {
-            if (!isCompatible(compatibility!)) return null;
+            return null;
+          }
 
-            return (
+          return <Consumable key={id} id={id} consumable={consumable} />;
-              <Consumable
+        })}
-                key={id}
-                id={id}
-                consumable={consumable!}
-                purchase={purchase!}
-              />
-            );
-          },
-        )}
       </div>
     </div>
   );
@@ -157,8 +155,7 @@ function Consumables({ characteristics }: ConsumablesProps) {
 
 interface ConsumableProps {
   id: string;
-  consumable: ConsumableComponent;
+  consumable: Consumable;
-  purchase: BlitzStaticPurchaseComponent;
 }
 
 function Consumable({ id, consumable, purchase }: ConsumableProps) {

packages/website/src/hooks/useCompatibility.ts

@@ -1,17 +1,26 @@
 import {
-  Consumable,
   ConsumableTankCategoryFilterCategory,
-  GunDefinition,
+  type GunDefinition,
-  Provision,
+  type TankDefinition,
-  TankDefinition,
+  type TankInclusivityFilter,
-} from "@blitzkit/protos";
+} from "@blitzkit/core";
 
-export function checkConsumableProvisionInclusivity(
+export function useCompatibility(tank: TankDefinition, gun: GunDefinition) {
-  consumableProvision: Consumable | Provision,
+  return function (
+    include?: TankInclusivityFilter[],
+    exclude?: TankInclusivityFilter[],
+  ) {
+    return tankCompatibility(tank, gun, include, exclude);
+  };
+}
+
+function tankCompatibility(
   tank: TankDefinition,
   gun: GunDefinition,
+  include?: TankInclusivityFilter[],
+  exclude?: TankInclusivityFilter[],
 ) {
-  const included = consumableProvision.include?.every((rule) => {
+  const included = include?.every((rule) => {
     switch (rule.filter_type!.$case) {
       case "tiers":
         return (
@@ -29,7 +38,7 @@ export function checkConsumableProvisionInclusivity(
         throw new SyntaxError("Category filtering found in include rule");
     }
   });
-  const excluded = consumableProvision.exclude?.some((rule) => {
+  const excluded = exclude?.some((rule) => {
     switch (rule.filter_type!.$case) {
       case "tiers":
         return (
@@ -53,5 +62,5 @@ export function checkConsumableProvisionInclusivity(
     }
   });
 
-  return consumableProvision.include?.length > 0 && included && !excluded;
+  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];
+}