fix(web): use getItemUrl for currency and crafting

overextended · May 9, 2023 · d42d65b · d42d65b
1 parent 4206132
commit d42d65b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/web/src/components/inventory/InventoryHotbar.tsx b/web/src/components/inventory/InventoryHotbar.tsx
@@ -32,7 +32,7 @@ const InventoryHotbar: React.FC = () => {
           <div
             className="hotbar-item-slot"
             style={{
-              backgroundImage: getItemUrl(item as SlotWithItem) || 'none',
+              backgroundImage: `url(${item?.name ? getItemUrl(item as SlotWithItem) : 'none'}`,
             }}
             key={`hotbar-${item.slot}`}
           >

diff --git a/web/src/components/inventory/InventorySlot.tsx b/web/src/components/inventory/InventorySlot.tsx
@@ -13,7 +13,6 @@ import { Locale } from '../../store/locale';
 import { Tooltip } from '@mui/material';
 import SlotTooltip from './SlotTooltip';
 import { setContextMenu } from '../../store/inventory';
-import { imagepath } from '../../store/imagepath';
 import { onCraft } from '../../dnd/onCraft';
 import useNuiEvent from '../../hooks/useNuiEvent';
 import { ItemsPayload } from '../../reducers/refreshSlots';
@@ -46,7 +45,7 @@ const InventorySlot: React.FC<SlotProps> = ({ inventory, item }) => {
                 name: item.name,
                 slot: item.slot,
               },
-              image: item?.name ? getItemUrl(item as SlotWithItem) : 'none',
+              image: item?.name && `url(${getItemUrl(item) || 'none'}`,
             }
           : null,
       canDrag,
@@ -147,7 +146,7 @@ const InventorySlot: React.FC<SlotProps> = ({ inventory, item }) => {
               ? 'brightness(80%) grayscale(100%)'
               : undefined,
           opacity: isDragging ? 0.4 : 1.0,
-          backgroundImage: getItemUrl(item as SlotWithItem) || 'none',
+          backgroundImage: `url(${item?.name ? getItemUrl(item as SlotWithItem) : 'none'}`,
           border: isOver ? '1px dashed rgba(255,255,255,0.4)' : '',
         }}
       >
@@ -184,13 +183,10 @@ const InventorySlot: React.FC<SlotProps> = ({ inventory, item }) => {
               )}
               {inventory.type === 'shop' && item?.price !== undefined && (
                 <>
-                  {item?.currency !== 'money' &&
-                  item?.currency !== 'black_money' &&
-                  item.price > 0 &&
-                  item?.currency ? (
+                  {item?.currency !== 'money' && item.currency !== 'black_money' && item.price > 0 && item.currency ? (
                     <div className="item-slot-currency-wrapper">
                       <img
-                        src={item?.currency ? `${`${imagepath}/${item?.currency}.png`}` : ''}
+                        src={item.currency ? getItemUrl(item.currency) : 'none'}
                         alt="item-image"
                         style={{
                           imageRendering: '-webkit-optimize-contrast',

diff --git a/web/src/components/inventory/SlotTooltip.tsx b/web/src/components/inventory/SlotTooltip.tsx
@@ -5,8 +5,8 @@ import { Items } from '../../store/items';
 import { Locale } from '../../store/locale';
 import ReactMarkdown from 'react-markdown';
 import { useAppSelector } from '../../store';
-import { imagepath } from '../../store/imagepath';
 import ClockIcon from '../utils/icons/ClockIcon';
+import { getItemUrl } from '../../helpers';
 
 const SlotTooltip: React.FC<{ item: SlotWithItem; inventory: Inventory }> = ({ item, inventory }) => {
   const additionalMetadata = useAppSelector((state) => state.inventory.additionalMetadata);
@@ -98,7 +98,7 @@ const SlotTooltip: React.FC<{ item: SlotWithItem; inventory: Inventory }> = ({ i
                   const [item, count] = [ingredient[0], ingredient[1]];
                   return (
                     <div className="tooltip-ingredient" key={`ingredient-${item}`}>
-                      <img src={`${imagepath}/${item}.png`} />
+                      <img src={item ? getItemUrl(item) : 'none'} alt="item-image" />
                       <p>
                         {count >= 1
                           ? `${count}x ${Items[item]?.label || item}`

diff --git a/web/src/components/utils/ItemNotifications.tsx b/web/src/components/utils/ItemNotifications.tsx
@@ -32,7 +32,7 @@ const ItemNotification = React.forwardRef(
       <div
         className="item-notification-item-box"
         style={{
-          backgroundImage: getItemUrl(slotItem) || 'none',
+          backgroundImage: `url(${getItemUrl(slotItem) || 'none'}`,
           ...props.style,
         }}
         ref={ref}