ultimate-dominion · ECWireless · Aug 4, 2024 · Aug 2, 2024 · Aug 2, 2024 · Aug 4, 2024
diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -1,4 +1,4 @@
-import { Text, VStack } from '@chakra-ui/react';
+import { Progress, Text, VStack } from '@chakra-ui/react';
 import { useComponentValue } from '@latticexyz/react';
 import { SyncStep } from '@latticexyz/store-sync';
 import { singletonEntity } from '@latticexyz/store-sync/recs';
@@ -31,9 +31,11 @@ const AppRoutes: React.FC = () => {
   ) {
     return (
       <VStack justify="center" h="100%">
-        <Text>
-          {syncProgress.message} {Math.round(syncProgress.percentage)}%
-        </Text>
+        <Text>Loading {Math.round(syncProgress.percentage)}%</Text>
+        <Progress
+          value={Math.round(syncProgress.percentage)}
+          w={{ base: '80%', sm: '50%' }}
+        />
       </VStack>
     );
   }

diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
@@ -11,7 +11,7 @@ export const ActionsPanel = (): JSX.Element => {
   const {
     isRefreshing: isRefreshingCharacter,
     character,
-    equippedItems,
+    equippedWeapons,
   } = useCharacter();
   const {
     actionOutcomes,
@@ -122,12 +122,12 @@ export const ActionsPanel = (): JSX.Element => {
 
   return (
     <Box maxH="100%" overflowY="auto" pb={4} ref={parentDivRef}>
-      {currentBattle && equippedItems && monsterOponent && (
+      {currentBattle && equippedWeapons && monsterOponent && (
         <VStack bgColor="white" position="sticky" spacing={0} top={0} w="100%">
           <Text p={{ base: 2, lg: 4 }} size="xs" textAlign="center">
             Choose your move:
           </Text>
-          {equippedItems.length === 0 && (
+          {equippedWeapons.length === 0 && (
             <Text color="red" fontWeight={700} p={{ base: 2, lg: 4 }}>
               You have no equipped items. In order to attack, you must go to
               your{' '}
@@ -143,12 +143,12 @@ export const ActionsPanel = (): JSX.Element => {
             </Text>
           )}
           <HStack w="100%">
-            {equippedItems.map((item, index) => (
+            {equippedWeapons.map((item, index) => (
               <Button
                 borderLeft={index === 0 ? 'none' : '1px'}
                 borderRadius={0}
                 borderRight={
-                  index === equippedItems.length - 1 ? 'none' : '1px'
+                  index === equippedWeapons.length - 1 ? 'none' : '1px'
                 }
                 isLoading={isAttacking}
                 key={`equipped-item-${index}`}

diff --git a/packages/client/src/components/ItemCard.tsx b/packages/client/src/components/ItemCard.tsx
@@ -6,21 +6,23 @@ import {
   Center,
   Text,
 } from '@chakra-ui/react';
-import { GiRogue } from 'react-icons/gi';
+import { FaHatWizard } from 'react-icons/fa';
+import { GiAxeSword, GiRogue } from 'react-icons/gi';
 
-import type { Weapon } from '../utils/types';
+import { type Armor, StatsClasses, type Weapon } from '../utils/types';
 
-type ItemCardProps = Weapon & {
+type ItemCardProps = (Armor | Weapon) & {
   isEquipped?: boolean;
   onClick?: () => void;
 };
 
 export const ItemCard: React.FC<ItemCardProps> = ({
   isEquipped = false,
   onClick,
-  ...weapon
+  ...item
 }): JSX.Element => {
-  const { agiModifier, intModifier, strModifier, name } = weapon;
+  const { agiModifier, classRestrictions, intModifier, strModifier, name } =
+    item;
 
   return (
     <Card
@@ -50,13 +52,25 @@ export const ItemCard: React.FC<ItemCardProps> = ({
         </Text>
 
         <Text size={{ base: '2xs', sm: 'sm' }}>
-          STR+{strModifier} AGI+{agiModifier} INT+{intModifier}
+          STR+{strModifier} AGI+{agiModifier} INT+
+          {intModifier}{' '}
+          {(item as Armor).armorModifier
+            ? `ARM+${(item as Armor).armorModifier}`
+            : ''}
         </Text>
       </CardBody>
 
       <CardFooter>
         <Center>
-          <GiRogue size={28} />
+          {classRestrictions.includes(StatsClasses.Warrior) && (
+            <GiAxeSword size={28} />
+          )}
+          {classRestrictions.includes(StatsClasses.Rogue) && (
+            <GiRogue size={28} />
+          )}
+          {classRestrictions.includes(StatsClasses.Mage) && (
+            <FaHatWizard size={28} />
+          )}
         </Center>
       </CardFooter>
     </Card>

diff --git a/packages/client/src/components/ItemEquipModal.tsx b/packages/client/src/components/ItemEquipModal.tsx
@@ -14,10 +14,10 @@ import { useCallback, useMemo, useState } from 'react';
 import { useCharacter } from '../contexts/CharacterContext';
 import { useMUD } from '../contexts/MUDContext';
 import { useToast } from '../hooks/useToast';
-import type { Weapon } from '../utils/types';
+import type { Armor, Weapon } from '../utils/types';
 import { ItemCard } from './ItemCard';
 
-type ItemEquipModalProps = Weapon & {
+type ItemEquipModalProps = (Armor | Weapon) & {
   isEquipped: boolean;
   isOpen: boolean;
   onClose: () => void;
@@ -27,7 +27,7 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
   isEquipped,
   isOpen,
   onClose,
-  ...weapon
+  ...item
 }): JSX.Element => {
   const { renderError, renderSuccess } = useToast();
   const {
@@ -39,8 +39,8 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
   const [isEquipping, setIsEquipping] = useState(false);
 
   const isOwner = useMemo(
-    () => character?.owner === weapon.owner,
-    [character, weapon.owner],
+    () => character?.owner === item.owner,
+    [character, item.owner],
   );
 
   const onEquipItem = useCallback(async () => {
@@ -56,15 +56,15 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
       }
 
       const { error, success } = await equipItems(character.characterId, [
-        weapon.tokenId,
+        item.tokenId,
       ]);
 
       if (error && !success) {
         throw new Error(error);
       }
 
       await refreshCharacter();
-      renderSuccess(`${weapon.name} equipped successfully!`);
+      renderSuccess(`${item.name} equipped successfully!`);
       onClose();
     } catch (e) {
       renderError((e as Error)?.message ?? 'Failed to equip item.', e);
@@ -75,11 +75,11 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
     character,
     delegatorAddress,
     equipItems,
+    item,
     onClose,
     refreshCharacter,
     renderError,
     renderSuccess,
-    weapon,
   ]);
 
   const onUnequipItem = useCallback(async () => {
@@ -96,15 +96,15 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
 
       const { error, success } = await unequipItem(
         character.characterId,
-        weapon.tokenId,
+        item.tokenId,
       );
 
       if (error && !success) {
         throw new Error(error);
       }
 
       await refreshCharacter();
-      renderSuccess(`${weapon.name} unequipped successfully!`);
+      renderSuccess(`${item.name} unequipped successfully!`);
       onClose();
     } catch (e) {
       renderError((e as Error)?.message ?? 'Failed to unequip item.', e);
@@ -114,12 +114,12 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
   }, [
     character,
     delegatorAddress,
+    item,
     onClose,
     refreshCharacter,
     renderError,
     renderSuccess,
     unequipItem,
-    weapon,
   ]);
 
   if (isEquipped) {
@@ -137,7 +137,7 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
             ) : (
               <Text mb={6}>Do you want to make an offer for this item?</Text>
             )}
-            <ItemCard {...weapon} />
+            <ItemCard {...item} />
           </ModalBody>
           <ModalFooter>
             <Button
@@ -169,7 +169,7 @@ export const ItemEquipModal: React.FC<ItemEquipModalProps> = ({
           ) : (
             <Text mb={6}>Do you want to make an offer for this item?</Text>
           )}
-          <ItemCard {...weapon} />
+          <ItemCard {...item} />
         </ModalBody>
         <ModalFooter>
           <Button

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -21,16 +21,18 @@ import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { useCharacter } from '../contexts/CharacterContext';
 import { useMUD } from '../contexts/MUDContext';
 import { LEADERBOARD_PATH } from '../Routes';
-import { MAX_EQUIPPED_WEAPONS } from '../utils/constants';
+import { MAX_EQUIPPED_ARMOR, MAX_EQUIPPED_WEAPONS } from '../utils/constants';
 import { Level } from './Level';
 
+const MAX_EQUIPPED_ITEMS = MAX_EQUIPPED_ARMOR + MAX_EQUIPPED_WEAPONS;
+
 export const StatsPanel = (): JSX.Element => {
   const navigate = useNavigate();
   const isDesktop = useBreakpointValue({ base: false, lg: true });
   const {
     components: { Levels },
   } = useMUD();
-  const { character, equippedItems } = useCharacter();
+  const { character, equippedArmor, equippedWeapons } = useCharacter();
 
   const currentLevelXpRequirement =
     useComponentValue(
@@ -64,7 +66,12 @@ export const StatsPanel = (): JSX.Element => {
     return percent > 100 ? 100 : percent;
   }, [character, currentLevelXpRequirement, nextLevelXpRequirement]);
 
-  if (!(character && equippedItems)) {
+  const allItems = useMemo(
+    () => [...equippedArmor, ...equippedWeapons],
+    [equippedArmor, equippedWeapons],
+  );
+
+  if (!character) {
     return (
       <VStack h="100%" justify="center">
         <Spinner size="lg" />
@@ -178,10 +185,10 @@ export const StatsPanel = (): JSX.Element => {
           <Text>Equipped Items</Text>
           <Spacer />
           <Text>
-            {equippedItems.length}/{MAX_EQUIPPED_WEAPONS}
+            {allItems.length}/{MAX_EQUIPPED_ITEMS}
           </Text>
         </HStack>
-        {equippedItems.map((item, index) => (
+        {allItems.map((item, index) => (
           <HStack
             fontSize="xs"
             justify="space-between"
@@ -201,7 +208,7 @@ export const StatsPanel = (): JSX.Element => {
           </HStack>
         ))}
         {Array.from({
-          length: MAX_EQUIPPED_WEAPONS - equippedItems.length,
+          length: MAX_EQUIPPED_ITEMS - allItems.length,
         }).map((_, index) => (
           <HStack
             key={`empty-weapon-${index}`}