ultimate-dominion · ECWireless · Aug 9, 2024 · Aug 6, 2024 · Aug 7, 2024 · Aug 8, 2024
diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
@@ -26,8 +26,8 @@ export const ActionsPanel = (): JSX.Element => {
   const { aliveMonsters, isSpawned, position } = useMap();
   const {
     actionOutcomes,
+    attackingItemId,
     currentBattle,
-    isAttacking,
     lastestBattleOutcome,
     monsterOponent,
     onAttack,
@@ -158,15 +158,18 @@ export const ActionsPanel = (): JSX.Element => {
               and equip at least 1 item.
             </Text>
           )}
-          <HStack w="100%">
+          <HStack spacing={0} w="100%">
             {equippedWeapons.map((item, index) => (
               <Button
-                borderLeft={index === 0 ? 'none' : '1px'}
+                borderLeft={index === 0 ? 'none' : '2px'}
                 borderRadius={0}
                 borderRight={
-                  index === equippedWeapons.length - 1 ? 'none' : '1px'
+                  index === 0 || index === equippedWeapons.length - 1
+                    ? 'none'
+                    : '2px'
                 }
-                isLoading={isAttacking}
+                isDisabled={attackingItemId !== null}
+                isLoading={attackingItemId === item.tokenId}
                 key={`equipped-item-${index}`}
                 loadingText="Attacking..."
                 onClick={() => onAttack(item.tokenId)}

diff --git a/packages/client/src/components/BattleOutcomeModal.tsx b/packages/client/src/components/BattleOutcomeModal.tsx
@@ -9,20 +9,35 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Spinner,
   Text,
   VStack,
 } from '@chakra-ui/react';
 import { useComponentValue } from '@latticexyz/react';
-import { encodeEntity } from '@latticexyz/store-sync/recs';
-import { useCallback, useMemo } from 'react';
+import { getComponentValueStrict } from '@latticexyz/recs';
+import { encodeEntity, singletonEntity } from '@latticexyz/store-sync/recs';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useBattle } from '../contexts/BattleContext';
 import { useCharacter } from '../contexts/CharacterContext';
 import { useMap } from '../contexts/MapContext';
 import { useMUD } from '../contexts/MUDContext';
+import { useToast } from '../hooks/useToast';
 import { BATTLE_OUTCOME_SEEN_KEY } from '../utils/constants';
-import { type CombatOutcomeType } from '../utils/types';
+import {
+  decodeArmorStats,
+  decodeWeaponStats,
+  fetchMetadataFromUri,
+  uriToHttp,
+} from '../utils/helpers';
+import {
+  type Armor,
+  type CombatOutcomeType,
+  ItemType,
+  type Weapon,
+} from '../utils/types';
+import { ItemCard } from './ItemCard';
 
 type BattleOutcomeModalProps = {
   isOpen: boolean;
@@ -35,13 +50,18 @@ export const BattleOutcomeModal: React.FC<BattleOutcomeModalProps> = ({
   onClose,
   battleOutcome,
 }): JSX.Element => {
+  const { renderError } = useToast();
   const {
-    components: { Levels },
+    components: { Items, ItemsBaseURI, ItemsTokenURI, Levels },
   } = useMUD();
   const { character } = useCharacter();
   const { allMonsters, otherCharactersOnTile } = useMap();
   const { onContinueToBattleOutcome } = useBattle();
 
+  const [armor, setArmor] = useState<Armor[]>([]);
+  const [weapons, setWeapons] = useState<Weapon[]>([]);
+  const [isLoadingItems, setIsLoadingItems] = useState(true);
+
   const opponent = useMemo(() => {
     if (!character) return null;
     const opponent =
@@ -86,11 +106,133 @@ export const BattleOutcomeModal: React.FC<BattleOutcomeModalProps> = ({
     return BigInt(character.experience) >= nextLevelXpRequirement;
   }, [character, nextLevelXpRequirement]);
 
+  const fetchLootedItems = useCallback(
+    async (_lootedItems: string[]) => {
+      try {
+        const _items = _lootedItems
+          .map(tokenId => {
+            const tokenIdEntity = encodeEntity(
+              { tokenId: 'uint256' },
+              { tokenId: BigInt(tokenId) },
+            );
+
+            const itemTemplate = getComponentValueStrict(Items, tokenIdEntity);
+
+            return {
+              balance: '1',
+              itemId: tokenIdEntity,
+              itemType: itemTemplate.itemType,
+              owner: '',
+              stats: itemTemplate.stats,
+              tokenId: tokenId.toString(),
+              tokenIdEntity,
+            };
+          })
+          .sort((a, b) => {
+            return Number(a.tokenId) - Number(b.tokenId);
+          });
+
+        const _armor = _items.filter(item => item.itemType === ItemType.Armor);
+        const _weapons = _items.filter(
+          item => item.itemType === ItemType.Weapon,
+        );
+
+        const fullArmor = await Promise.all(
+          _armor.map(async item => {
+            const decodedArmorStats = decodeArmorStats(item.stats);
+
+            const baseURI = getComponentValueStrict(
+              ItemsBaseURI,
+              singletonEntity,
+            ).uri;
+
+            const tokenURI = getComponentValueStrict(
+              ItemsTokenURI,
+              item.tokenIdEntity,
+            ).uri;
+
+            const metadata = await fetchMetadataFromUri(
+              uriToHttp(`${baseURI}${tokenURI}`)[0],
+            );
+
+            return {
+              ...metadata,
+              agiModifier: decodedArmorStats.agiModifier,
+              armorModifier: decodedArmorStats.armorModifier,
+              classRestrictions: decodedArmorStats.classRestrictions,
+              hitPointModifier: decodedArmorStats.hitPointModifier,
+              intModifier: decodedArmorStats.intModifier,
+              itemId: item.itemId,
+              owner: item.owner,
+              strModifier: decodedArmorStats.strModifier,
+              tokenId: item.tokenId,
+            } as Armor;
+          }),
+        );
+
+        const fullWeapons = await Promise.all(
+          _weapons.map(async item => {
+            const decodedWeaponStats = decodeWeaponStats(item.stats);
+
+            const baseURI = getComponentValueStrict(
+              ItemsBaseURI,
+              singletonEntity,
+            ).uri;
+
+            const tokenURI = getComponentValueStrict(
+              ItemsTokenURI,
+              item.tokenIdEntity,
+            ).uri;
+
+            const metadata = await fetchMetadataFromUri(
+              uriToHttp(`${baseURI}${tokenURI}`)[0],
+            );
+
+            return {
+              ...metadata,
+              agiModifier: decodedWeaponStats.agiModifier,
+              balance: item.balance,
+              classRestrictions: decodedWeaponStats.classRestrictions,
+              hitPointModifier: decodedWeaponStats.hitPointModifier,
+              intModifier: decodedWeaponStats.intModifier,
+              itemId: item.itemId,
+              maxDamage: decodedWeaponStats.maxDamage,
+              minDamage: decodedWeaponStats.minDamage,
+              minLevel: decodedWeaponStats.minLevel,
+              owner: item.owner,
+              strModifier: decodedWeaponStats.strModifier,
+              tokenId: item.tokenId,
+            } as Weapon;
+          }),
+        );
+
+        setArmor(fullArmor);
+        setWeapons(fullWeapons);
+      } catch (e) {
+        renderError(
+          (e as Error)?.message ?? 'Failed to fetch looted items.',
+          e,
+        );
+      } finally {
+        setIsLoadingItems(false);
+      }
+    },
+    [Items, ItemsBaseURI, ItemsTokenURI, renderError],
+  );
+
+  useEffect(() => {
+    if (battleOutcome.itemsDropped.length > 0 && isOpen) {
+      fetchLootedItems(battleOutcome.itemsDropped);
+    } else {
+      setIsLoadingItems(false);
+    }
+  }, [battleOutcome, fetchLootedItems, isOpen]);
+
   if (!character) {
     return <Box />;
   }
 
-  const { expDropped, goldDropped, itemsDropped, winner } = battleOutcome;
+  const { expDropped, goldDropped, winner } = battleOutcome;
 
   return (
     <Modal isOpen={isOpen} onClose={onAcknowledge}>
@@ -120,15 +262,23 @@ export const BattleOutcomeModal: React.FC<BattleOutcomeModalProps> = ({
                 $GOLD.
               </Text>
             )}
-            {itemsDropped.length > 0 && (
-              <Text>
-                You looted the following items:
-                <ul>
-                  {itemsDropped.map(item => (
-                    <li key={item}>{item}</li>
-                  ))}
-                </ul>
-              </Text>
+            {isLoadingItems ? (
+              <Spinner />
+            ) : (
+              <>
+                {armor.length > 0 && (
+                  <Text fontWeight="bold">Looted Armor:</Text>
+                )}
+                {armor.map(item => (
+                  <ItemCard key={item.tokenId} {...item} />
+                ))}
+                {weapons.length > 0 && (
+                  <Text fontWeight="bold">Looted Weapons:</Text>
+                )}
+                {weapons.map(item => (
+                  <ItemCard key={item.tokenId} {...item} />
+                ))}
+              </>
             )}
           </VStack>
           {canLevel && (

diff --git a/packages/client/src/components/ItemCard.tsx b/packages/client/src/components/ItemCard.tsx
@@ -21,8 +21,14 @@ export const ItemCard: React.FC<ItemCardProps> = ({
   onClick,
   ...item
 }): JSX.Element => {
-  const { agiModifier, classRestrictions, intModifier, strModifier, name } =
-    item;
+  const {
+    agiModifier,
+    balance,
+    classRestrictions,
+    intModifier,
+    strModifier,
+    name,
+  } = item;
 
   return (
     <Card
@@ -49,6 +55,10 @@ export const ItemCard: React.FC<ItemCardProps> = ({
       <CardBody>
         <Text fontWeight="bold" size={{ base: 'xs', sm: 'md' }}>
           {name.slice(0, -3)}
+          <Text as="span" size="xs">
+            {' '}
+            x {balance}
+          </Text>
         </Text>
 
         <Text size={{ base: '2xs', sm: 'sm' }}>

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -14,8 +14,8 @@ import {
 import { useComponentValue } from '@latticexyz/react';
 import { encodeEntity } from '@latticexyz/store-sync/recs';
 import { useMemo } from 'react';
-import { GiRogue } from 'react-icons/gi';
 import { IoIosArrowForward } from 'react-icons/io';
+import { MdBackpack } from 'react-icons/md';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 
 import { useCharacter } from '../contexts/CharacterContext';
@@ -205,7 +205,7 @@ export const StatsPanel = (): JSX.Element => {
               size="sm"
               variant="ghost"
             >
-              <GiRogue size={12} />
+              <MdBackpack size={12} />
             </Button>
           </HStack>
         ))}

diff --git a/packages/client/src/contexts/BattleContext.tsx b/packages/client/src/contexts/BattleContext.tsx
@@ -37,9 +37,9 @@ import { useMUD } from './MUDContext';
 
 type BattleContextType = {
   actionOutcomes: ActionOutcomeType[];
+  attackingItemId: null | string;
   continueToBattleOutcome: boolean;
   currentBattle: CombatDetails | null;
-  isAttacking: boolean;
   lastestBattleOutcome: CombatOutcomeType | null;
   monsterOponent: Monster | null;
   onAttack: (itemId: string) => void;
@@ -48,9 +48,9 @@ type BattleContextType = {
 
 const BattleContext = createContext<BattleContextType>({
   actionOutcomes: [],
+  attackingItemId: null,
   continueToBattleOutcome: false,
   currentBattle: null,
-  isAttacking: false,
   lastestBattleOutcome: null,
   monsterOponent: null,
   onAttack: () => {},
@@ -73,7 +73,7 @@ export const BattleProvider = ({
   const { character, refreshCharacter } = useCharacter();
   const { allMonsters } = useMap();
 
-  const [isAttacking, setIsAttacking] = useState(false);
+  const [attackingItemId, setAttackingItemId] = useState<null | string>(null);
   const [continueToBattleOutcome, setContinueToBattleOutcome] = useState(false);
 
   const allBattles = useEntityQuery([Has(CombatEncounter)])
@@ -206,7 +206,7 @@ export const BattleProvider = ({
   const onAttack = useCallback(
     async (itemId: string) => {
       try {
-        setIsAttacking(true);
+        setAttackingItemId(itemId);
 
         if (!delegatorAddress) {
           throw new Error('Missing delegation.');
@@ -255,7 +255,7 @@ export const BattleProvider = ({
       } catch (e) {
         renderError((e as Error)?.message ?? 'Failed to attack.', e);
       } finally {
-        setIsAttacking(false);
+        setAttackingItemId(null);
       }
     },
     [
@@ -274,9 +274,9 @@ export const BattleProvider = ({
     <BattleContext.Provider
       value={{
         actionOutcomes: currentBattleActionOutcomes,
+        attackingItemId,
         continueToBattleOutcome,
         currentBattle,
-        isAttacking,
         lastestBattleOutcome,
         monsterOponent,
         onAttack,

diff --git a/packages/client/src/pages/Character.tsx b/packages/client/src/pages/Character.tsx
@@ -537,6 +537,7 @@ const ItemsPanel = ({ character }: { character: Character }): JSX.Element => {
               ...metadata,
               agiModifier: decodedArmorStats.agiModifier,
               armorModifier: decodedArmorStats.armorModifier,
+              balance: item.balance,
               classRestrictions: decodedArmorStats.classRestrictions,
               hitPointModifier: decodedArmorStats.hitPointModifier,
               intModifier: decodedArmorStats.intModifier,