ultimate-dominion · ECWireless · Jul 11, 2024 · Jul 11, 2024 · Jul 11, 2024 · Jul 11, 2024
diff --git a/packages/client/src/components/Character/Stats.tsx b/packages/client/src/components/Character/Stats.tsx
@@ -2,13 +2,13 @@ import { HStack, Text, VStack } from '@chakra-ui/react';
 
 export const Stats = ({
   agility,
+  baseHitPoints,
   intelligence,
-  maxHitPoints,
   strength,
 }: {
   agility: string;
+  baseHitPoints: string;
   intelligence: string;
-  maxHitPoints: string;
   strength: string;
 }): JSX.Element => {
   return (
@@ -27,7 +27,7 @@ export const Stats = ({
       <VStack w="100%">
         <HStack justify="space-between" w="100%">
           <Text size="lg">HP - Hit</Text>
-          <Text size="lg">{maxHitPoints}</Text>
+          <Text size="lg">{baseHitPoints}</Text>
         </HStack>
 
         <HStack justify="space-between" w="100%">

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -29,19 +29,19 @@ export const StatsPanel = (): JSX.Element => {
   const {
     components: { Levels },
   } = useMUD();
-  const { character, characterStats } = useCharacter();
+  const { character } = useCharacter();
 
   const nextLevelXpRequirement = useComponentValue(
     Levels,
     encodeEntity({ level: 'uint256' }, { level: BigInt(CURRENT_LEVEL + 1) }),
   )?.experience;
 
   const levelPercent = useMemo(() => {
-    if (!nextLevelXpRequirement) return 0;
+    if (!(character && nextLevelXpRequirement)) return 0;
     return (
-      (100 * Number(characterStats.experience)) / Number(nextLevelXpRequirement)
+      (100 * Number(character.experience)) / Number(nextLevelXpRequirement)
     );
-  }, [characterStats.experience, nextLevelXpRequirement]);
+  }, [character, nextLevelXpRequirement]);
 
   if (!character) {
     return (
@@ -51,9 +51,16 @@ export const StatsPanel = (): JSX.Element => {
     );
   }
 
-  const { goldBalance, image, name } = character;
-  const { agility, experience, intelligence, maxHitPoints, strength } =
-    characterStats;
+  const {
+    agility,
+    baseHitPoints,
+    experience,
+    goldBalance,
+    image,
+    intelligence,
+    name,
+    strength,
+  } = character;
 
   return (
     <VStack alignItems="start" h="100%" p={2} spacing={4}>
@@ -80,7 +87,7 @@ export const StatsPanel = (): JSX.Element => {
           </Text>
         </GridItem>
         <GridItem>
-          <Text>{maxHitPoints}</Text>
+          <Text>{baseHitPoints}</Text>
         </GridItem>
         <GridItem>
           <Text fontWeight="bold" size="lg">

diff --git a/packages/client/src/contexts/CharacterContext.tsx b/packages/client/src/contexts/CharacterContext.tsx
@@ -1,6 +1,9 @@
-import { useComponentValue } from '@latticexyz/react';
-import { getComponentValueStrict, HasValue, runQuery } from '@latticexyz/recs';
-import { encodeEntity } from '@latticexyz/store-sync/recs';
+import {
+  getComponentValue,
+  getComponentValueStrict,
+  HasValue,
+  runQuery,
+} from '@latticexyz/recs';
 import {
   createContext,
   ReactNode,
@@ -17,26 +20,17 @@ import {
   fetchMetadataFromUri,
   uriToHttp,
 } from '../utils/helpers';
-import type { CharacterData, CharacterStats } from '../utils/types';
+import type { Character, CharacterData, CharacterStats } from '../utils/types';
 import { useMUD } from './MUDContext';
 
 type CharacterContextType = {
-  character: CharacterData | null;
-  characterStats: CharacterStats;
+  character: Character | null;
   isRefreshing: boolean;
   refreshCharacter: () => void;
 };
 
 const CharacterContext = createContext<CharacterContextType>({
   character: null,
-  characterStats: {
-    agility: '0',
-    experience: '0',
-    intelligence: '0',
-    level: '0',
-    maxHitPoints: '0',
-    strength: '0',
-  },
   isRefreshing: false,
   refreshCharacter: () => {},
 });
@@ -55,47 +49,45 @@ export const CharacterProvider = ({
   } = useMUD();
   const { renderError } = useToast();
 
-  const [characterData, setCharacterData] = useState<CharacterData | null>(
-    null,
-  );
-  const characterStats = useComponentValue(
-    Stats,
-    characterData
-      ? encodeEntity(
-          { characterId: 'uint256' },
-          { characterId: BigInt(characterData.characterId) },
-        )
-      : undefined,
-  );
-
+  const [userCharacter, setUserCharacter] = useState<Character | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
 
   const refreshCharacterData = useCallback(async () => {
     if (!(delegatorAddress && publicClient && worldContract)) return;
-    const characterComponent = Array.from(
+    const partialCharacter: Omit<
+      CharacterData & CharacterStats,
+      'goldBalance'
+    > = Array.from(
       runQuery([
         HasValue(Characters, {
           owner: delegatorAddress,
         }),
       ]),
     ).map(entity => {
       const characterData = getComponentValueStrict(Characters, entity);
+      const characterStats = getComponentValue(Stats, entity);
 
       const { characterTokenId } = decodeCharacterId(
         entity.toString() as `0x${string}`,
       );
 
       return {
-        characterClass: characterData.class,
+        agility: characterStats?.agility.toString() ?? '0',
+        baseHitPoints: characterStats?.baseHitPoints.toString() ?? '0',
+        characterClass: characterStats?.class ?? 0,
         characterId: entity,
+        experience: characterStats?.experience.toString() ?? '0',
+        intelligence: characterStats?.intelligence.toString() ?? '0',
+        level: characterStats?.level.toString() ?? '0',
         locked: characterData.locked,
         name: hexToString(characterData.name as `0x${string}`, { size: 32 }),
         owner: characterData.owner,
+        strength: characterStats?.strength.toString() ?? '0',
         tokenId: characterTokenId,
       };
     })[0];
 
-    if (!characterComponent) return;
+    if (!partialCharacter) return;
 
     const characterTokenAddress =
       await worldContract.read.UD__getCharacterToken();
@@ -127,7 +119,7 @@ export const CharacterProvider = ({
     });
 
     const metadataURI = await characterToken.read.tokenURI([
-      BigInt(characterComponent.tokenId),
+      BigInt(partialCharacter.tokenId),
     ]);
 
     const fetachedMetadata = await fetchMetadataFromUri(
@@ -164,12 +156,12 @@ export const CharacterProvider = ({
 
     const goldBalance = await goldToken.read.balanceOf([delegatorAddress]);
 
-    setCharacterData({
-      ...characterComponent,
+    setUserCharacter({
+      ...partialCharacter,
       ...fetachedMetadata,
       goldBalance: formatEther(BigInt(goldBalance)).toString(),
     });
-  }, [Characters, delegatorAddress, publicClient, worldContract]);
+  }, [Characters, delegatorAddress, publicClient, Stats, worldContract]);
 
   const refreshCharacter = useCallback(async () => {
     setIsRefreshing(true);
@@ -190,15 +182,7 @@ export const CharacterProvider = ({
   return (
     <CharacterContext.Provider
       value={{
-        character: characterData,
-        characterStats: {
-          agility: characterStats?.agility.toString() ?? '0',
-          experience: characterStats?.experience.toString() ?? '0',
-          intelligence: characterStats?.intelligence.toString() ?? '0',
-          level: characterStats?.level.toString() ?? '0',
-          maxHitPoints: characterStats?.maxHitPoints.toString() ?? '0',
-          strength: characterStats?.strength.toString() ?? '0',
-        },
+        character: userCharacter,
         isRefreshing,
         refreshCharacter,
       }}

diff --git a/packages/client/src/contexts/MapNavigationContext.tsx b/packages/client/src/contexts/MapNavigationContext.tsx
@@ -93,6 +93,7 @@ export const MapNavigationProvider = ({
 
   const allEntities = useEntityQuery([
     Has(Spawned),
+    Has(Stats),
     HasValue(Position, {
       x: position?.x,
       y: position?.y,
@@ -185,20 +186,20 @@ export const MapNavigationProvider = ({
 
             return {
               ...fetachedMetadata,
-              agility: characterStats?.agility.toString() ?? '0',
-              characterClass: characterData.class,
+              agility: characterStats.agility.toString(),
+              baseHitPoints: characterStats.baseHitPoints.toString(),
+              characterClass: characterStats.class,
               characterId: entity,
+              experience: characterStats.experience.toString(),
               goldBalance: formatEther(BigInt(goldBalance)).toString(),
-              experience: characterStats?.experience.toString() ?? '0',
-              intelligence: characterStats?.intelligence.toString() ?? '0',
-              maxHitPoints: characterStats?.maxHitPoints.toString() ?? '0',
-              level: characterStats?.level.toString() ?? '0',
+              intelligence: characterStats.intelligence.toString(),
+              level: characterStats.level.toString(),
               locked: characterData.locked,
               name: hexToString(characterData.name as `0x${string}`, {
                 size: 32,
               }),
               owner: characterData.owner,
-              strength: characterStats?.strength.toString() ?? '0',
+              strength: characterStats.strength.toString(),
               tokenId,
             } as Character;
           }),

diff --git a/packages/client/src/pages/Character.tsx b/packages/client/src/pages/Character.tsx
@@ -8,7 +8,7 @@ import {
   Spinner,
   Text,
 } from '@chakra-ui/react';
-import { Entity, getComponentValueStrict } from '@latticexyz/recs';
+import { Entity, getComponentValue } from '@latticexyz/recs';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { formatEther, getContract, hexToString } from 'viem';
@@ -42,14 +42,13 @@ export const CharacterPage = (): JSX.Element => {
       if (!(characterId && publicClient && worldContract)) return;
       setIsLoading(true);
 
-      const characterData = getComponentValueStrict(
+      const characterData = getComponentValue(
         Characters,
         characterId as Entity,
       );
-      const characterStats = getComponentValueStrict(
-        Stats,
-        characterId as Entity,
-      );
+      const characterStats = getComponentValue(Stats, characterId as Entity);
+
+      if (!(characterData && characterStats)) return;
 
       const characterTokenAddress =
         await worldContract.read.UD__getCharacterToken();
@@ -122,20 +121,20 @@ export const CharacterPage = (): JSX.Element => {
 
       setCharacter({
         ...fetachedMetadata,
-        goldBalance: formatEther(BigInt(goldBalance)).toString(),
-        agility: characterStats?.agility.toString() ?? '0',
-        experience: characterStats?.experience.toString() ?? '0',
-        characterClass: characterData.class,
+        agility: characterStats.agility.toString(),
+        baseHitPoints: characterStats.baseHitPoints.toString(),
+        characterClass: characterStats.class,
         characterId: characterId as Entity,
-        intelligence: characterStats?.intelligence.toString() ?? '0',
-        level: characterStats?.level.toString() ?? '0',
+        experience: characterStats.experience.toString(),
+        goldBalance: formatEther(BigInt(goldBalance)).toString(),
+        intelligence: characterStats.intelligence.toString(),
+        level: characterStats.level.toString(),
         locked: characterData.locked,
-        maxHitPoints: characterStats?.maxHitPoints.toString() ?? '0',
         name: hexToString(characterData.name as `0x${string}`, {
           size: 32,
         }),
         owner: characterData.owner,
-        strength: characterStats?.strength.toString() ?? '0',
+        strength: characterStats.strength.toString(),
         tokenId: characterData.tokenId.toString(),
       });
     } catch (error) {
@@ -222,8 +221,8 @@ export const CharacterPage = (): JSX.Element => {
           >
             <StatsPanel
               agility={character.agility}
+              baseHitPoints={character.baseHitPoints}
               intelligence={character.intelligence}
-              maxHitPoints={character.maxHitPoints}
               strength={character.strength}
             />
           </GridItem>

diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx
@@ -52,8 +52,7 @@ export const CharacterCreation = (): JSX.Element => {
     network: { publicClient, worldContract },
     systemCalls: { enterGame, mintCharacter, rollStats },
   } = useMUD();
-  const { character, characterStats, isRefreshing, refreshCharacter } =
-    useCharacter();
+  const { character, isRefreshing, refreshCharacter } = useCharacter();
   const {
     file: avatar,
     setFile: setAvatar,
@@ -290,8 +289,9 @@ export const CharacterCreation = (): JSX.Element => {
   ]);
 
   const rolledOnce = useMemo(() => {
-    return characterStats.maxHitPoints !== '0';
-  }, [characterStats]);
+    if (!character) return false;
+    return character.baseHitPoints !== '0';
+  }, [character]);
 
   const onEnterGame = useCallback(async () => {
     try {
@@ -577,19 +577,19 @@ export const CharacterCreation = (): JSX.Element => {
               <VStack w="100%">
                 <HStack justify="space-between" w="100%">
                   <Text>HP - Hit</Text>
-                  <Text>{characterStats.maxHitPoints ?? '0'}</Text>
+                  <Text>{character?.baseHitPoints ?? '0'}</Text>
                 </HStack>
                 <HStack justify="space-between" w="100%">
                   <Text>STR - Strength</Text>
-                  <Text>{characterStats.strength ?? '0'}</Text>
+                  <Text>{character?.strength ?? '0'}</Text>
                 </HStack>
                 <HStack justify="space-between" w="100%">
                   <Text>AGI - Agility</Text>
-                  <Text>{characterStats.agility ?? '0'}</Text>
+                  <Text>{character?.agility ?? '0'}</Text>
                 </HStack>
                 <HStack justify="space-between" w="100%">
                   <Text>INT - Intelligence</Text>
-                  <Text>{characterStats.intelligence ?? '0'}</Text>
+                  <Text>{character?.intelligence ?? '0'}</Text>
                 </HStack>
               </VStack>
             </VStack>

diff --git a/packages/client/src/utils/types.ts b/packages/client/src/utils/types.ts
@@ -1,9 +1,8 @@
 import { Entity } from '@latticexyz/recs';
 
-export type Character = CharacterData & CharacterStats;
+export type Character = CharacterData & CharacterStats & Metadata;
 
-export type CharacterData = Metadata & {
-  characterClass: StatsClasses;
+export type CharacterData = {
   characterId: Entity;
   goldBalance: string;
   locked: boolean;
@@ -13,10 +12,11 @@ export type CharacterData = Metadata & {
 
 export type CharacterStats = {
   agility: string;
+  baseHitPoints: string;
+  characterClass: StatsClasses;
   experience: string;
   intelligence: string;
   level: string;
-  maxHitPoints: string;
   strength: string;
 };