feat(web): display items for which the grade isn't met as disabled

client.lua

@@ -227,6 +227,7 @@ function client.openInventory(inv, data)
  closeTrunk()
  currentInventory = right or defaultInventory
  left.items = PlayerData.inventory
+ left.groups = PlayerData.groups
  SendNUIMessage({
  action = 'setupInventory',
  data = {

web/src/components/inventory/InventorySlot.tsx

@@ -1,4 +1,4 @@
-import { FC, MouseEvent } from 'react';
+import React from 'react';
 import { DragSource, Inventory, InventoryType, Slot, SlotWithItem } from '../../typings';
 import { useDrag, useDrop } from 'react-dnd';
 import { useAppDispatch, useAppSelector } from '../../store';
@@ -7,7 +7,7 @@ import { onDrop } from '../../dnd/onDrop';
 import { onBuy } from '../../dnd/onBuy';
 import { selectIsBusy } from '../../store/inventory';
 import { Items } from '../../store/items';
-import { canCraftItem, getItemUrl, isShopStockEmpty, isSlotWithItem } from '../../helpers';
+import { canCraftItem, getItemUrl, canPurchaseItem, isSlotWithItem } from '../../helpers';
 import { onUse } from '../../dnd/onUse';
 import { Locale } from '../../store/locale';
 import { Tooltip } from '@mui/material';
@@ -21,10 +21,14 @@ interface SlotProps {
  item: Slot;
 }
 
-const InventorySlot: FC<SlotProps> = ({ inventory, item }) => {
+const InventorySlot: React.FC<SlotProps> = ({ inventory, item }) => {
  const isBusy = useAppSelector(selectIsBusy);
  const dispatch = useAppDispatch();
 
+ const canDrag = React.useCallback(() => {
+ return !isBusy && canPurchaseItem(item, inventory) && canCraftItem(item, inventory.type);
+ }, [item, inventory, isBusy]);
+
  const [{ isDragging }, drag] = useDrag<DragSource, void, { isDragging: boolean }>(
  () => ({
  type: 'SLOT',
@@ -42,7 +46,7 @@ const InventorySlot: FC<SlotProps> = ({ inventory, item }) => {
  image: item?.name ? getItemUrl(item as SlotWithItem) : 'none',
  }
  : null,
- canDrag: !isBusy && !isShopStockEmpty(item.count, inventory.type) && canCraftItem(item, inventory.type),
+ canDrag,
  }),
  [isBusy, inventory, item]
  );
@@ -85,7 +89,7 @@ const InventorySlot: FC<SlotProps> = ({ inventory, item }) => {
 
  const connectRef = (element: HTMLDivElement) => drag(drop(element));
 
- const handleContext = (event: MouseEvent<HTMLDivElement>) => {
+ const handleContext = (event: React.MouseEvent<HTMLDivElement>) => {
  event.preventDefault();
 
  !isBusy &&
@@ -94,7 +98,7 @@ const InventorySlot: FC<SlotProps> = ({ inventory, item }) => {
  dispatch(setContextMenu({ coords: { mouseX: event.clientX, mouseY: event.clientY }, item }));
  };
 
- const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+ const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
  if (isBusy) return;
 
  if (event.ctrlKey && isSlotWithItem(item) && inventory.type !== 'shop' && inventory.type !== 'crafting') {
@@ -123,7 +127,7 @@ const InventorySlot: FC<SlotProps> = ({ inventory, item }) => {
  className="inventory-slot"
  style={{
  filter:
- isShopStockEmpty(item.count, inventory.type) || !canCraftItem(item, inventory.type)
+ !canPurchaseItem(item, inventory) || !canCraftItem(item, inventory.type)
  ? 'brightness(80%) grayscale(100%)'
  : undefined,
  opacity: isDragging ? 0.4 : 1.0,

web/src/helpers/index.ts

@@ -6,10 +6,47 @@ import { Items } from '../store/items';
 import { imagepath } from '../store/imagepath';
 import { fetchNui } from '../utils/fetchNui';
 
-export const isShopStockEmpty = (itemCount: number | undefined, inventoryType: string) => {
- if (inventoryType === 'shop' && itemCount !== undefined && itemCount === 0) return true;
+export const canPurchaseItem = (item: Slot, inventory: Inventory) => {
+ if (inventory.type !== 'shop' || !isSlotWithItem(item)) return true;
 
- return false;
+ if (item.count !== undefined && item.count === 0) return false;
+
+ if (item.grade === undefined || !inventory.groups) return true;
+
+ const leftInventory = store.getState().inventory.leftInventory;
+
+ // Shop requires groups but player has none
+ if (!leftInventory.groups) return false;
+
+ const reqGroups = Object.keys(inventory.groups);
+
+ if (Array.isArray(item.grade)) {
+ for (let i = 0; i < reqGroups.length; i++) {
+ const reqGroup = reqGroups[i];
+
+ if (leftInventory.groups[reqGroup] !== undefined) {
+ const playerGrade = leftInventory.groups[reqGroup];
+ for (let j = 0; j < item.grade.length; j++) {
+ const reqGrade = item.grade[j];
+
+ if (playerGrade === reqGrade) return true;
+ }
+ }
+ }
+
+ return false;
+ } else {
+ for (let i = 0; i < reqGroups.length; i++) {
+ const reqGroup = reqGroups[i];
+ if (leftInventory.groups[reqGroup] !== undefined) {
+ const playerGrade = leftInventory.groups[reqGroup];
+
+ if (playerGrade >= item.grade) return true;
+ }
+ }
+
+ return false;
+ }
 };
 
 // I hate this
@@ -97,8 +134,8 @@ export const getItemData = async (itemName: string) => {
  const resp: ItemData | null = await fetchNui('getItemData', itemName);
 
  if (resp?.name) {
- Items[itemName] = resp
- return resp
+ Items[itemName] = resp;
+ return resp;
  }
 };
 

web/src/typings/inventory.ts

@@ -14,4 +14,5 @@ export type Inventory = {
  items: Slot[];
  maxWeight?: number;
  label?: string;
+ groups?: Record<string, number>;
 };

web/src/typings/slot.ts

@@ -19,4 +19,5 @@ export type SlotWithItem = Slot & {
  ingredients?: { [key: string]: number };
  duration?: number;
  image?: string;
+ grade?: number | number[];
 };