ultimate-dominion · ECWireless · Jul 26, 2024 · Jul 22, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, HStack, Stack, Text, VStack } from '@chakra-ui/react';
+import { Button, HStack, Stack, Text } from '@chakra-ui/react';
 import { Has, HasValue, runQuery } from '@latticexyz/recs';
 import { useCallback, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -9,7 +9,6 @@ import { useMapNavigation } from '../contexts/MapNavigationContext';
 import { useMUD } from '../contexts/MUDContext';
 import { useToast } from '../hooks/useToast';
 import { ActionType } from '../utils/types';
-import { HealthBar } from './HealthBar';
 
 // enum ActionEvents {
 //   Attack = 'attack',
@@ -61,22 +60,34 @@ export const ActionsPanel = (): JSX.Element => {
     systemCalls: { endTurn },
   } = useMUD();
   const { character, equippedItems, refreshCharacter } = useCharacter();
-  const { currentBattle, monster } = useCombat();
-  const { isSpawned } = useMapNavigation();
+  const { isSpawned, monsters, position } = useMapNavigation();
+  const { currentBattle, monsterOponent } = useCombat();
 
   const [isAttacking, setIsAttacking] = useState(false);
 
   const actionText = useMemo(() => {
-    if (!isSpawned) {
-      return 'You must spawn on the map to start battling.';
+    if (!(isSpawned && position)) {
+      return 'In order to begin battling, you must spawn your character.';
     }
 
-    if (currentBattle && monster) {
-      return `You are currently in a battle with a ${monster.name}.`;
+    if (position.x === 0 && position.y === 0) {
+      return 'You are currently in the starting tile. Move to a new tile to find monsters to battle.';
     }
 
-    return 'To initiate a battle, move into a new tile and click on a monster.';
-  }, [currentBattle, isSpawned, monster]);
+    if ((position.x !== 0 || position.y !== 0) && monsters.length === 0) {
+      return 'Looks like there are no monsters in this tile. Move to a new tile to find monsters to battle.';
+    }
+
+    if ((position.x !== 0 || position.y !== 0) && monsters.length > 0) {
+      return 'To initiate a battle, click on a monster.';
+    }
+
+    if (currentBattle && monsterOponent) {
+      return `You are currently in battle with a ${monsterOponent.name}.`;
+    }
+
+    return '';
+  }, [currentBattle, isSpawned, monsterOponent, monsters, position]);
 
   const onAttack = useCallback(
     async (itemId: string) => {
@@ -95,7 +106,7 @@ export const ActionsPanel = (): JSX.Element => {
           throw new Error('Battle not found.');
         }
 
-        if (!monster) {
+        if (!monsterOponent) {
           throw new Error('Monster not found.');
         }
 
@@ -113,7 +124,7 @@ export const ActionsPanel = (): JSX.Element => {
         const { error, success } = await endTurn(
           currentBattle.encounterId,
           character.characterId,
-          monster.monsterId,
+          monsterOponent.monsterId,
           basicAttackId,
           itemId,
           currentBattle.currentTurn,
@@ -136,7 +147,7 @@ export const ActionsPanel = (): JSX.Element => {
       currentBattle,
       delegatorAddress,
       endTurn,
-      monster,
+      monsterOponent,
       refreshCharacter,
       renderError,
     ],
@@ -145,16 +156,10 @@ export const ActionsPanel = (): JSX.Element => {
   return (
     <Stack spacing={8}>
       <Stack>
-        <Text size={{ base: 'xs', sm: 'sm', lg: 'md' }}>{actionText}</Text>
-        {currentBattle && equippedItems && monster && (
-          <HealthBar
-            baseHp={monster.baseHp}
-            currentHp={monster.currentHp}
-            mt={4}
-            w="80%"
-          />
+        {!currentBattle && (
+          <Text size={{ base: 'xs', sm: 'sm', lg: 'md' }}>{actionText}</Text>
         )}
-        {currentBattle && equippedItems && monster && (
+        {currentBattle && equippedItems && monsterOponent && (
           <HStack justify="center">
             {equippedItems.length === 0 && (
               <Text color="red" fontWeight={700}>
@@ -184,16 +189,6 @@ export const ActionsPanel = (): JSX.Element => {
             ))}
           </HStack>
         )}
-        {currentBattle && equippedItems && monster && (
-          <VStack mt={4}>
-            <Text fontWeight={700}>MONSTER STATS:</Text>
-            <HStack>
-              <Text>Attack: {monster.agility}</Text>
-              <Text>Defense: {monster.intelligence}</Text>
-              <Text>Level: {monster.level}</Text>
-            </HStack>
-          </VStack>
-        )}
       </Stack>
       {/* <Stack>
         {BATTLE_EVENTS.map((event, i) => (

diff --git a/packages/client/src/components/HealthBar.tsx b/packages/client/src/components/HealthBar.tsx
@@ -14,21 +14,30 @@ export const HealthBar = ({
 
   return (
     <VStack alignItems="end" spacing={0.5} {...stackProps}>
-      <Flex border="2px solid black" width="100%" height="24px">
+      <Flex
+        border="2px solid black"
+        width="100%"
+        h={{ base: '18px', md: '24px' }}
+      >
         <Text
           bgColor="black"
           color="white"
-          fontSize="sm"
           fontWeight={700}
-          px={2}
+          px={{ base: 1, md: 2 }}
+          size={{ base: '2xs', md: 'xs' }}
         >
           HP
         </Text>
         <Box borderLeft="2px solid black" h="100%" position="relative" w="100%">
-          <Box bgColor={barColor} h="100%" w={`${health}%`} />
+          <Box
+            bgColor={barColor}
+            h="100%"
+            transition="all 0.5s"
+            w={`${health}%`}
+          />
         </Box>
       </Flex>
-      <Text fontSize="xs" fontWeight={700}>
+      <Text fontWeight={700} size={{ base: '2xs', md: 'xs' }}>
         {currentHp} / {baseHp}
       </Text>
     </VStack>

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -16,7 +16,7 @@ import { encodeEntity } from '@latticexyz/store-sync/recs';
 import { useMemo } from 'react';
 import { GiRogue } from 'react-icons/gi';
 import { IoIosArrowForward } from 'react-icons/io';
-import { useNavigate } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
 
 import { useCharacter } from '../contexts/CharacterContext';
 import { useMUD } from '../contexts/MUDContext';
@@ -193,6 +193,7 @@ export const StatsPanel = (): JSX.Element => {
         <>
           <VStack alignSelf="start" alignItems="start">
             <Link
+              as={RouterLink}
               borderBottom="2px solid"
               borderColor="grey400"
               fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
@@ -206,10 +207,11 @@ export const StatsPanel = (): JSX.Element => {
               Auction House
             </Link>
             <Link
+              as={RouterLink}
               borderBottom="2px solid"
               borderColor="grey400"
               fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
-              href={LEADERBOARD_PATH}
+              to={LEADERBOARD_PATH}
               pb={1}
               _hover={{
                 borderColor: 'grey500',