From 85689bbdcf2d240334321192e3424a2470063488 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Mon, 8 Jul 2024 08:03:52 -0600 Subject: [PATCH 1/2] Render monster color based on class --- .../src/components/TileDetailsPanel/index.tsx | 22 +++++++++++++++---- .../client/src/lib/mud/createSystemCalls.ts | 4 ++-- .../client/src/pages/CharacterCreation.tsx | 16 +++++++------- packages/client/src/utils/types.ts | 5 +++-- 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/client/src/components/TileDetailsPanel/index.tsx b/packages/client/src/components/TileDetailsPanel/index.tsx index 79444977e..7eab4b5d4 100644 --- a/packages/client/src/components/TileDetailsPanel/index.tsx +++ b/packages/client/src/components/TileDetailsPanel/index.tsx @@ -30,7 +30,7 @@ import { import { useCharacter } from '../../contexts/CharacterContext'; import { useMUD } from '../../contexts/MUDContext'; import { fetchMetadataFromUri, uriToHttp } from '../../utils/helpers'; -import type { Character, Monster } from '../../utils/types'; +import { type Character, type Monster } from '../../utils/types'; const ROW_HEIGHT = { base: 5, md: 8, lg: 10 }; @@ -191,11 +191,17 @@ export const TileDetailsPanel = (): JSX.Element => { const { mobMetadata: metadataURI } = mobData; + const monsterTemplateStats = + (await worldContract.read.UD__getMonsterStats([ + monsterId as `0x${string}`, + ])) as { class: number }; + const fetachedMetadata = await fetchMetadataFromUri( uriToHttp(metadataURI)[0], ); return { + class: monsterTemplateStats.class, level: monsterStats.level.toString(), mobId, monsterId, @@ -206,7 +212,7 @@ export const TileDetailsPanel = (): JSX.Element => { setMonsters(_monsters); }, - [Mobs, Stats], + [Mobs, Stats, worldContract], ); useEffect(() => { @@ -303,10 +309,15 @@ export const TileDetailsPanel = (): JSX.Element => { ); }; +const MONSTER_COLORS = { + [0]: 'red', + [1]: 'yellow', + [2]: 'green', +}; + const MonsterRow = ({ monster }: { monster: Monster }) => { const { level, name } = monster; - const color = 'red'; const isFighting = false; return ( @@ -329,7 +340,10 @@ const MonsterRow = ({ monster }: { monster: Monster }) => { cursor: 'pointer', }} > - + {name} { try { const entropyAddress = await worldContract.read.UD__getEntropy(); diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx index a4fd3756b..c01043c82 100644 --- a/packages/client/src/pages/CharacterCreation.tsx +++ b/packages/client/src/pages/CharacterCreation.tsx @@ -30,7 +30,7 @@ import { useToast } from '../hooks/useToast'; import { useUploadFile } from '../hooks/useUploadFile'; import { API_URL } from '../utils/constants'; import { shortenAddress } from '../utils/helpers'; -import { CharacterClasses } from '../utils/types'; +import { StatsClasses } from '../utils/types'; export const CharacterCreation = (): JSX.Element => { const navigate = useNavigate(); @@ -56,8 +56,8 @@ export const CharacterCreation = (): JSX.Element => { const [name, setName] = useState(''); const [description, setDescription] = useState(''); - const [characterClass, setCharacterClass] = useState( - CharacterClasses.Warrior, + const [characterClass, setCharacterClass] = useState( + StatsClasses.Warrior, ); const [isCreating, setIsCreating] = useState(false); @@ -322,7 +322,7 @@ export const CharacterCreation = (): JSX.Element => { Class:{' '} - {rolledOnce ? CharacterClasses[character.characterClass] : 'None'} + {rolledOnce ? StatsClasses[character.characterClass] : 'None'} @@ -444,7 +444,7 @@ export const CharacterCreation = (): JSX.Element => {