ultimate-dominion · ECWireless · Jul 28, 2024 · Jul 28, 2024 · Jul 28, 2024 · Jul 28, 2024
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -5,7 +5,6 @@ import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { WalletDetailsModal } from './components/WalletDetailsModal';
-import { CombatProvider } from './contexts/CombatContext';
 import { MapNavigationProvider } from './contexts/MapNavigationContext';
 import { useMUD } from './contexts/MUDContext';
 import AppRoutes, { HOME_PATH } from './Routes';
@@ -14,9 +13,7 @@ export const App = (): JSX.Element => {
   return (
     <Router>
       <MapNavigationProvider>
-        <CombatProvider>
-          <AppInner />
-        </CombatProvider>
+        <AppInner />
       </MapNavigationProvider>
     </Router>
   );

diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
@@ -1,24 +1,11 @@
 import { Button, HStack, Stack, Text, VStack } from '@chakra-ui/react';
-import { useEntityQuery } from '@latticexyz/react';
-import {
-  getComponentValueStrict,
-  Has,
-  HasValue,
-  runQuery,
-} from '@latticexyz/recs';
-import { decodeEntity } from '@latticexyz/store-sync/recs';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 // eslint-disable-next-line import/no-named-as-default
 import Typist from 'react-typist';
-import { formatUnits } from 'viem';
 
 import { useCharacter } from '../contexts/CharacterContext';
-import { useCombat } from '../contexts/CombatContext';
 import { useMapNavigation } from '../contexts/MapNavigationContext';
-import { useMUD } from '../contexts/MUDContext';
-import { useToast } from '../hooks/useToast';
-import { ActionType, type BattleActionOutcome } from '../utils/types';
 
 // enum ActionEvents {
 //   Attack = 'attack',
@@ -63,67 +50,22 @@ import { ActionType, type BattleActionOutcome } from '../utils/types';
 // ];
 
 export const ActionsPanel = (): JSX.Element => {
-  const { renderError } = useToast();
-  const {
-    components: { ActionOutcome, Actions },
-    delegatorAddress,
-    systemCalls: { endTurn },
-  } = useMUD();
   const {
     isRefreshing: isRefreshingCharacter,
     character,
     equippedItems,
-    refreshCharacter,
   } = useCharacter();
   const {
+    battleActionOutcomes,
+    currentBattle,
+    isAttacking,
     isRefreshing: isRefreshingMap,
     isSpawned,
+    monsterOponent,
     monsters,
+    onAttack,
     position,
   } = useMapNavigation();
-  const { currentBattle, monsterOponent } = useCombat();
-
-  const [isAttacking, setIsAttacking] = useState(false);
-
-  const battleActionOutcomes = useEntityQuery([
-    Has(ActionOutcome),
-    HasValue(ActionOutcome, { attackerId: character?.characterId }),
-  ])
-    .map(entity => {
-      const _actionOutcome = getComponentValueStrict(ActionOutcome, entity);
-
-      const { encounterId, currentTurn, actionNumber } = decodeEntity(
-        {
-          encounterId: 'bytes32',
-          currentTurn: 'uint256',
-          actionNumber: 'uint256',
-        },
-        entity,
-      );
-
-      return {
-        attackerDamageDelt: formatUnits(
-          _actionOutcome.attackerDamageDelt,
-          5,
-        ).toString(),
-        attackerDied: _actionOutcome.attackerDied,
-        attackerId: _actionOutcome.attackerId.toString(),
-        actionId: _actionOutcome.actionId.toString(),
-        actionNumber: actionNumber.toString(),
-        blockNumber: _actionOutcome.blockNumber.toString(),
-        crit: _actionOutcome.crit,
-        currentTurn: currentTurn.toString(),
-        defenderDamageDelt: _actionOutcome.defenderDamageDelt.toString(),
-        defenderDied: _actionOutcome.defenderDied,
-        defenderId: _actionOutcome.defenderId.toString(),
-        encounterId: encounterId.toString(),
-        hit: _actionOutcome.hit,
-        miss: _actionOutcome.miss,
-        timestamp: _actionOutcome.timestamp.toString(),
-        weaponId: _actionOutcome.weaponId.toString(),
-      } as BattleActionOutcome;
-    })
-    .filter(action => action.encounterId === currentBattle?.encounterId);
 
   const actionText = useMemo(() => {
     if (isRefreshingCharacter || isRefreshingMap) return '';
@@ -203,70 +145,6 @@ export const ActionsPanel = (): JSX.Element => {
     return '';
   }, [isRefreshingCharacter, isRefreshingMap, isSpawned, monsters, position]);
 
-  const onAttack = useCallback(
-    async (itemId: string) => {
-      try {
-        setIsAttacking(true);
-
-        if (!delegatorAddress) {
-          throw new Error('Missing delegation.');
-        }
-
-        if (!character) {
-          throw new Error('Character not found.');
-        }
-
-        if (!currentBattle) {
-          throw new Error('Battle not found.');
-        }
-
-        if (!monsterOponent) {
-          throw new Error('Monster not found.');
-        }
-
-        const basicAttackId = Array.from(
-          runQuery([
-            Has(Actions),
-            HasValue(Actions, { actionType: ActionType.PhysicalAttack }),
-          ]),
-        )[0];
-
-        if (!basicAttackId) {
-          throw new Error('Basic attack not found.');
-        }
-
-        const { error, success } = await endTurn(
-          currentBattle.encounterId,
-          character.characterId,
-          monsterOponent.monsterId,
-          basicAttackId,
-          itemId,
-          currentBattle.currentTurn,
-        );
-
-        if (error && !success) {
-          throw new Error(error);
-        }
-
-        await refreshCharacter();
-      } catch (e) {
-        renderError('Failed to attack.', e);
-      } finally {
-        setIsAttacking(false);
-      }
-    },
-    [
-      Actions,
-      character,
-      currentBattle,
-      delegatorAddress,
-      endTurn,
-      monsterOponent,
-      refreshCharacter,
-      renderError,
-    ],
-  );
-
   return (
     <>
       {currentBattle && equippedItems && monsterOponent && (

diff --git a/packages/client/src/components/DelegationButton.tsx b/packages/client/src/components/DelegationButton.tsx
@@ -47,7 +47,7 @@ export const DelegationButton = ({
       getBurner();
       navigate(CHARACTER_CREATION_PATH);
     } catch (e) {
-      renderError('Failed to delegate.', e);
+      renderError((e as Error)?.message ?? 'Failed to delegate.', e);
     } finally {
       setIsDelegating(false);
     }

diff --git a/packages/client/src/components/EditCharacterModal.tsx b/packages/client/src/components/EditCharacterModal.tsx
@@ -233,7 +233,7 @@ export const EditCharacterModal: React.FC<EditCharacterModalProps> = ({
                     size="sm"
                     type="button"
                   >
-                    Upload Avatar
+                    Upload Avatar Image
                   </Button>
                   {showError && !(avatar || image) && (
                     <FormHelperText color="red">

diff --git a/packages/client/src/components/ItemEquipModal.tsx b/packages/client/src/components/ItemEquipModal.tsx
@@ -67,7 +67,7 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
       renderSuccess(`${weapon.name} equipped successfully!`);
       onClose();
     } catch (e) {
-      renderError('Failed to equip item.', e);
+      renderError((e as Error)?.message ?? 'Failed to equip item.', e);
     } finally {
       setIsEquipping(false);
     }
@@ -107,7 +107,7 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
       renderSuccess(`${weapon.name} unequipped successfully!`);
       onClose();
     } catch (e) {
-      renderError('Failed to unequip item.', e);
+      renderError((e as Error)?.message ?? 'Failed to unequip item.', e);
     } finally {
       setIsEquipping(false);
     }

diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
@@ -8,7 +8,6 @@ import {
 } from 'react-icons/io';
 import { TbDirectionArrows } from 'react-icons/tb';
 
-import { useCombat } from '../contexts/CombatContext';
 import { useMapNavigation } from '../contexts/MapNavigationContext';
 
 const SAFE_ZONE_AREA = {
@@ -18,6 +17,7 @@ const SAFE_ZONE_AREA = {
 
 export const MapPanel = (): JSX.Element => {
   const {
+    currentBattle,
     isRefreshing,
     isSpawned,
     isSpawning,
@@ -26,7 +26,6 @@ export const MapPanel = (): JSX.Element => {
     otherPlayers,
     position,
   } = useMapNavigation();
-  const { currentBattle } = useCombat();
 
   return (
     <Stack

diff --git a/packages/client/src/components/TileDetailsPanel.tsx b/packages/client/src/components/TileDetailsPanel.tsx
@@ -17,7 +17,6 @@ import { IoIosArrowForward } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 
 import { useCharacter } from '../contexts/CharacterContext';
-import { useCombat } from '../contexts/CombatContext';
 import { useMapNavigation } from '../contexts/MapNavigationContext';
 import { useMUD } from '../contexts/MUDContext';
 import { useToast } from '../hooks/useToast';
@@ -35,21 +34,43 @@ export const TileDetailsPanel = (): JSX.Element => {
     systemCalls: { createMatch },
   } = useMUD();
   const { character } = useCharacter();
-  const { isRefreshing, monsters, otherPlayers } = useMapNavigation();
-  const { currentBattle, monsterOponent } = useCombat();
+  const {
+    battleActionOutcomes,
+    currentBattle,
+    isRefreshing,
+    monsterOponent,
+    monsters,
+    otherPlayers,
+  } = useMapNavigation();
 
   const [isInitiating, setIsInitiating] = useState(false);
   const [isMonsterHit, setIsMonsterHit] = useState(false);
 
   useEffect(() => {
-    if (!monsterOponent) return;
-    if (monsterOponent.currentHp === monsterOponent.baseHp) return;
+    if (!(battleActionOutcomes[0] && currentBattle)) return;
+
+    const currentBattleTurnKey = 'current-battle-turn';
+    const currentBattleTurn = localStorage.getItem(currentBattleTurnKey);
+
+    if (currentBattleTurn) {
+      if (currentBattleTurn === currentBattle.currentTurn) {
+        return;
+      }
+    }
+
+    if (
+      battleActionOutcomes[battleActionOutcomes.length - 1]
+        .attackerDamageDelt === '0'
+    )
+      return;
 
     setIsMonsterHit(true);
     setTimeout(() => {
       setIsMonsterHit(false);
     }, 700);
-  }, [monsterOponent, monsterOponent?.baseHp, monsterOponent?.currentHp]);
+
+    localStorage.setItem(currentBattleTurnKey, currentBattle.currentTurn);
+  }, [battleActionOutcomes, currentBattle]);
 
   const onInitiateCombat = useCallback(
     async (monster: Monster) => {
@@ -76,7 +97,7 @@ export const TileDetailsPanel = (): JSX.Element => {
 
         renderSuccess('Battle has begun!');
       } catch (e) {
-        renderError('Failed to initiate battle.', e);
+        renderError((e as Error)?.message ?? 'Failed to initiate battle.', e);
       } finally {
         setIsInitiating(false);
       }

diff --git a/packages/client/src/components/WalletDetailsModal.tsx b/packages/client/src/components/WalletDetailsModal.tsx
@@ -96,7 +96,7 @@ export const WalletDetailsModal = ({
       setDepositAmount('0');
       renderSuccess('Funds deposited successfully!');
     } catch (e) {
-      renderError('Error depositing funds.', e);
+      renderError((e as Error)?.message ?? 'Error depositing funds.', e);
     } finally {
       setIsDepositing(false);
     }
@@ -131,7 +131,7 @@ export const WalletDetailsModal = ({
       setWithdrawAmount('0');
       renderSuccess('Funds withdrawn successfully!');
     } catch (e) {
-      renderError('Error withdrawing funds.', e);
+      renderError((e as Error)?.message ?? 'Error withdrawing funds.', e);
     } finally {
       setIsWithdrawing(false);
     }

diff --git a/packages/client/src/contexts/CharacterContext.tsx b/packages/client/src/contexts/CharacterContext.tsx
@@ -148,7 +148,7 @@ export const CharacterProvider = ({
     try {
       await fetchCharacterData();
     } catch (e) {
-      renderError('Error refreshing character.', e);
+      renderError((e as Error)?.message ?? 'Error refreshing character.', e);
     } finally {
       setIsRefreshing(false);
     }
@@ -248,7 +248,10 @@ export const CharacterProvider = ({
 
         setEquippedItems(fullItems);
       } catch (e) {
-        renderError('Failed to fetch character data.', e);
+        renderError(
+          (e as Error)?.message ?? 'Failed to fetch character data.',
+          e,
+        );
       }
     },
     [ItemsBaseURI, ItemsOwners, ItemsTokenURI, renderError, worldContract],