ultimate-dominion · MrDeadCe11 · Aug 29, 2024 · Aug 27, 2024 · Aug 28, 2024 · Aug 28, 2024
diff --git a/mprocs.yaml b/mprocs.yaml
@@ -10,4 +10,4 @@ procs:
     shell: pnpm run dev
   anvil:
     cwd: packages/contracts
-    shell: anvil --base-fee 50 --block-time 2
+    shell: anvil --base-fee 50 --block-time 1
diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
@@ -23,7 +23,7 @@ export const ActionsPanel = (): JSX.Element => {
   const { character, equippedWeapons } = useCharacter();
   const { isSpawned, monstersOnTile, position } = useMap();
   const {
-    actionOutcomes,
+    attackOutcomes,
     attackingItemId,
     currentBattle,
     lastestBattleOutcome,
@@ -34,11 +34,11 @@ export const ActionsPanel = (): JSX.Element => {
   const { isRefreshing } = useMovement();
 
   const [turnTimeLeft, setTurnTimeLeft] = useState<number>(32);
-  const [actionButtonFocus, setActionButtonFocus] = useState<number>(0);
+  const [attackButtonFocus, setAttackButtonFocus] = useState<number>(0);
 
   const parentDivRef = useRef<HTMLDivElement>(null);
-  const actionButton1Ref = useRef<HTMLButtonElement>(null);
-  const actionButton2Ref = useRef<HTMLButtonElement>(null);
+  const attackButton1Ref = useRef<HTMLButtonElement>(null);
+  const attackButton2Ref = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     if (parentDivRef.current) {
@@ -48,25 +48,25 @@ export const ActionsPanel = (): JSX.Element => {
       });
     }
 
-    if (actionButton1Ref.current) {
-      actionButton1Ref.current.focus();
-      setActionButtonFocus(0);
+    if (attackButton1Ref.current) {
+      attackButton1Ref.current.focus();
+      setAttackButtonFocus(0);
     }
-  }, [actionOutcomes]);
+  }, [attackOutcomes]);
 
   useEffect(() => {
     const listener = (event: KeyboardEvent) => {
       switch (event.key) {
         case 'ArrowLeft':
-          if (actionButtonFocus === 1 && actionButton2Ref.current) {
-            actionButton1Ref.current?.focus();
-            setActionButtonFocus(0);
+          if (attackButtonFocus === 1 && attackButton2Ref.current) {
+            attackButton1Ref.current?.focus();
+            setAttackButtonFocus(0);
           }
           break;
         case 'ArrowRight':
-          if (actionButtonFocus === 0 && actionButton1Ref.current) {
-            actionButton2Ref.current?.focus();
-            setActionButtonFocus(1);
+          if (attackButtonFocus === 0 && attackButton1Ref.current) {
+            attackButton2Ref.current?.focus();
+            setAttackButtonFocus(1);
           }
           break;
         default:
@@ -77,7 +77,7 @@ export const ActionsPanel = (): JSX.Element => {
     window.addEventListener('keydown', listener);
     // eslint-disable-next-line consistent-return
     return () => window.removeEventListener('keydown', listener);
-  }, [actionButtonFocus]);
+  }, [attackButtonFocus]);
 
   const battleOver = useMemo(
     () => currentBattle?.encounterId === lastestBattleOutcome?.encounterId,
@@ -238,7 +238,7 @@ export const ActionsPanel = (): JSX.Element => {
                         ).toString(),
                   )
                 }
-                ref={index === 0 ? actionButton1Ref : actionButton2Ref}
+                ref={index === 0 ? attackButton1Ref : attackButton2Ref}
                 variant="outline"
                 w="100%"
               >
@@ -320,19 +320,19 @@ export const ActionsPanel = (): JSX.Element => {
             </Typist>
           )}
 
-        {opponent &&
-          actionOutcomes.map((action, i) => {
-            if (action.miss) {
+        {opponent?.name &&
+          attackOutcomes.map((attack, i) => {
+            if (attack.miss[0]) {
               return (
                 <Typist
                   avgTypingDelay={10}
                   cursor={{ show: false }}
-                  key={`battle-action-${i}`}
+                  key={`battle-attack-${i}`}
                   stdTypingDelay={10}
                 >
-                  {action.attackerId === character?.id ? (
+                  {attack.attackerId === character?.id ? (
                     <Text
-                      key={`battle-action-${i}`}
+                      key={`battle-attack-${i}`}
                       size={{ base: 'xs', sm: 'sm', lg: 'md' }}
                     >
                       You missed{' '}
@@ -343,7 +343,7 @@ export const ActionsPanel = (): JSX.Element => {
                     </Text>
                   ) : (
                     <Text
-                      key={`battle-action-${i}`}
+                      key={`battle-attack-${i}`}
                       size={{ base: 'xs', sm: 'sm', lg: 'md' }}
                     >
                       <Text as="span" color="green">
@@ -356,24 +356,24 @@ export const ActionsPanel = (): JSX.Element => {
               );
             }
 
-            const critText = action.crit ? 'Critical hit! ' : '';
+            const critText = attack.crit ? 'Critical hit! ' : '';
 
             return (
               <Typist
                 avgTypingDelay={10}
                 cursor={{ show: false }}
-                key={`battle-action-${i}`}
+                key={`battle-attack-${i}`}
                 stdTypingDelay={10}
               >
-                {action.attackerId === character?.id ? (
+                {attack.attackerId === character?.id ? (
                   <Text size={{ base: 'xs', sm: 'sm', lg: 'md' }}>
                     {critText}You attacked{' '}
                     <Text as="span" color="green">
                       {opponent?.name}
                     </Text>{' '}
                     for{' '}
                     <Text as="span" color="red">
-                      {action.attackerDamageDelt}
+                      {attack.attackerDamageDelt}
                     </Text>{' '}
                     damage.
                   </Text>
@@ -385,7 +385,7 @@ export const ActionsPanel = (): JSX.Element => {
                     </Text>{' '}
                     attacked you for{' '}
                     <Text as="span" color="red">
-                      {action.attackerDamageDelt}
+                      {attack.attackerDamageDelt}
                     </Text>{' '}
                     damage.
                   </Text>

diff --git a/packages/client/src/components/AuctionRow.tsx b/packages/client/src/components/AuctionRow.tsx
@@ -2,42 +2,31 @@ import {
   Avatar,
   Box,
   Button,
-  Center,
   Flex,
   HStack,
   Text,
   VStack,
 } from '@chakra-ui/react';
-import { FaHatWizard } from 'react-icons/fa';
-import { GiAxeSword, GiRogue } from 'react-icons/gi';
 import { IoIosArrowForward } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 
 import { ITEM_PATH } from '../Routes';
+import { removeEmoji } from '../utils/helpers';
+import { type ArmorTemplate, type WeaponTemplate } from '../utils/types';
+
 export const AuctionRow = ({
   name,
   agiModifier,
-  hitPointModifier,
+  hpModifier,
   intModifier,
   minLevel,
   strModifier,
   emoji,
   tokenId,
   floor,
-  itemClass,
-}: {
-  name: string;
-  image: string;
-  description: string;
-  agiModifier: string;
-  hitPointModifier: string;
-  intModifier: string;
-  minLevel: string;
-  strModifier: string;
+}: (ArmorTemplate | WeaponTemplate) & {
   emoji: string;
-  tokenId: string;
   floor: string;
-  itemClass: string;
 }): JSX.Element => {
   const navigate = useNavigate();
 
@@ -72,17 +61,17 @@ export const AuctionRow = ({
         </Avatar>
         <VStack align="start" justify="center" ml={4}>
           <HStack w="100%">
-            <Text size={{ base: '2xs', lg: 'sm' }}>{name}</Text>
+            <Text size={{ base: '2xs', lg: 'sm' }}>{removeEmoji(name)}</Text>
           </HStack>
           <Text size={{ base: '3xs', sm: '2xs', lg: 'sm' }}>
-            HP {hitPointModifier} • STR {strModifier} • AGI {agiModifier} • INT{' '}
+            HP {hpModifier} • STR {strModifier} • AGI {agiModifier} • INT{' '}
             {intModifier}
           </Text>
         </VStack>
       </Flex>
       <HStack>
         <HStack w={{ base: '130px', sm: '215px', md: '300px', lg: '450px' }}>
-          <Text
+          {/* <Text
             fontWeight={500}
             size={{ base: 'xs', lg: 'md' }}
             textAlign="center"
@@ -93,7 +82,7 @@ export const AuctionRow = ({
               {itemClass == '1' && <GiRogue size={15} />}
               {itemClass == '2' && <FaHatWizard size={15} />}
             </Center>
-          </Text>
+          </Text> */}
           <Text
             fontWeight={500}
             size={{ base: 'xs', lg: 'md' }}

diff --git a/packages/client/src/components/ItemCard.tsx b/packages/client/src/components/ItemCard.tsx
@@ -9,6 +9,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 
+import { getEmoji, removeEmoji } from '../utils/helpers';
 import { type Armor, type Weapon } from '../utils/types';
 
 const getStatSymbol = (stat: string): string => (Number(stat) >= 0 ? '+' : '');
@@ -51,12 +52,12 @@ export const ItemCard: React.FC<ItemCardProps> = ({
     >
       <CardHeader backgroundColor="grey300">
         <Center h="100%">
-          <Text fontSize={{ base: 'xl', lg: '3xl' }}>{name.slice(-3)}</Text>
+          <Text fontSize={{ base: 'xl', lg: '3xl' }}>{getEmoji(name)}</Text>
         </Center>
       </CardHeader>
       <CardBody>
         <Text fontWeight="bold" size={{ base: 'xs', sm: 'md' }}>
-          {name.slice(0, -3)}
+          {removeEmoji(name)}
           <Text as="span" size="xs">
             {' '}
             x {balance}
@@ -104,11 +105,11 @@ export const ItemCardSmall: React.FC<ItemCardProps> = ({
         w="50px"
       >
         <Text color="white" fontSize="2xl">
-          {item.name.slice(-3)}
+          {getEmoji(item.name)}
         </Text>
       </Stack>
       <Box>
-        <Text size="xs">{item.name.slice(0, -3)}</Text>
+        <Text size="xs">{removeEmoji(item.name)}</Text>
         <Text size="xs">
           STR{getStatSymbol(item.strModifier)}
           {item.strModifier} AGI{getStatSymbol(item.agiModifier)}

diff --git a/packages/client/src/components/TileDetailsPanel.tsx b/packages/client/src/components/TileDetailsPanel.tsx
@@ -26,6 +26,7 @@ import {
   CURRENT_BATTLE_OPPONENT_TURN_KEY,
   CURRENT_BATTLE_USER_TURN_KEY,
 } from '../utils/constants';
+import { getEmoji, removeEmoji } from '../utils/helpers';
 import { type Character, EncounterType, type Monster } from '../utils/types';
 import { HealthBar } from './HealthBar';
 import { InfoModal } from './InfoModal';
@@ -49,7 +50,7 @@ export const TileDetailsPanel = (): JSX.Element => {
   const { inSafetyZone, isSpawned, monstersOnTile, otherCharactersOnTile } =
     useMap();
   const {
-    actionOutcomes,
+    attackOutcomes,
     currentBattle,
     opponent,
     userCharacterForBattleRendering,
@@ -61,27 +62,27 @@ export const TileDetailsPanel = (): JSX.Element => {
   const [isMonsterHit, setIsMonsterHit] = useState(false);
 
   useEffect(() => {
-    if (!(actionOutcomes[0] && currentBattle && opponent)) return;
+    if (!(attackOutcomes[0] && currentBattle && opponent)) return;
 
-    const actionIndex = actionOutcomes.findLastIndex(
-      action => action.attackerId === opponent.id,
+    const attackIndex = attackOutcomes.findLastIndex(
+      attack => attack.attackerId === opponent.id,
     );
 
-    if (actionIndex === -1) return;
+    if (attackIndex === -1) return;
 
     const currentBattleOpponentTurn = localStorage.getItem(
       CURRENT_BATTLE_OPPONENT_TURN_KEY,
     );
 
     if (currentBattleOpponentTurn) {
-      if (currentBattleOpponentTurn === actionIndex.toString()) {
+      if (currentBattleOpponentTurn === attackIndex.toString()) {
         return;
       }
     }
 
     if (
-      actionOutcomes[actionIndex]?.attackerDamageDelt !== '0' &&
-      actionIndex - Number(currentBattle.currentTurn) <= 2
+      attackOutcomes[attackIndex]?.attackerDamageDelt !== '0' &&
+      attackIndex - Number(currentBattle.currentTurn) <= 2
     ) {
       setIsUserHit(true);
       setTimeout(() => {
@@ -90,33 +91,33 @@ export const TileDetailsPanel = (): JSX.Element => {
 
       localStorage.setItem(
         CURRENT_BATTLE_OPPONENT_TURN_KEY,
-        actionIndex.toString(),
+        attackIndex.toString(),
       );
     }
-  }, [actionOutcomes, currentBattle, opponent]);
+  }, [attackOutcomes, currentBattle, opponent]);
 
   useEffect(() => {
-    if (!(actionOutcomes[0] && character && currentBattle)) return;
+    if (!(attackOutcomes[0] && character && currentBattle)) return;
 
-    const actionIndex = actionOutcomes.findLastIndex(
-      action => action.attackerId === character.id,
+    const attackIndex = attackOutcomes.findLastIndex(
+      attack => attack.attackerId === character.id,
     );
 
-    if (actionIndex === -1) return;
+    if (attackIndex === -1) return;
 
     const currentBattleDefenderTurn = localStorage.getItem(
       CURRENT_BATTLE_USER_TURN_KEY,
     );
 
     if (currentBattleDefenderTurn) {
-      if (currentBattleDefenderTurn === actionIndex.toString()) {
+      if (currentBattleDefenderTurn === attackIndex.toString()) {
         return;
       }
     }
 
     if (
-      actionOutcomes[actionIndex]?.attackerDamageDelt !== '0' &&
-      actionIndex - Number(currentBattle.currentTurn) <= 2
+      attackOutcomes[attackIndex]?.attackerDamageDelt !== '0' &&
+      attackIndex - Number(currentBattle.currentTurn) <= 2
     ) {
       setIsMonsterHit(true);
       setTimeout(() => {
@@ -125,10 +126,10 @@ export const TileDetailsPanel = (): JSX.Element => {
 
       localStorage.setItem(
         CURRENT_BATTLE_USER_TURN_KEY,
-        actionIndex.toString(),
+        attackIndex.toString(),
       );
     }
-  }, [actionOutcomes, character, currentBattle]);
+  }, [attackOutcomes, character, currentBattle]);
 
   const onInitiateCombat = useCallback(
     async (opponent: Character | Monster, encounterType: EncounterType) => {
@@ -199,7 +200,7 @@ export const TileDetailsPanel = (): JSX.Element => {
           {currentBattle.encounterType === EncounterType.PvE ? (
             <VStack w="48%">
               <Text fontWeight="bold" size={{ base: 'sm', lg: 'lg' }}>
-                {isDesktop ? opponent.name.slice(0, -3) : opponent.name}
+                {isDesktop ? removeEmoji(opponent.name) : opponent.name}
               </Text>
               {isDesktop && (
                 <Text
@@ -208,7 +209,7 @@ export const TileDetailsPanel = (): JSX.Element => {
                   opacity={isMonsterHit ? 0 : 1}
                   transition="opacity 0.1s ease-in-out"
                 >
-                  {opponent.name.slice(-3)}
+                  {getEmoji(opponent.name)}
                 </Text>
               )}
             </VStack>