From 86dc24b0f6fcd2d768dd646e2355bfc12eeda845 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Fri, 2 Aug 2024 15:09:20 -0600 Subject: [PATCH 1/4] Redirect leaderboard to home if not connected --- packages/client/src/pages/Leaderboard.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/client/src/pages/Leaderboard.tsx b/packages/client/src/pages/Leaderboard.tsx index a8a47d2b6..32cfce11d 100644 --- a/packages/client/src/pages/Leaderboard.tsx +++ b/packages/client/src/pages/Leaderboard.tsx @@ -25,11 +25,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { FaSearch, FaSortAmountDown, FaSortAmountUp } from 'react-icons/fa'; import { FaBackwardStep, FaForwardStep } from 'react-icons/fa6'; import { IoCaretBack, IoCaretForward } from 'react-icons/io5'; +import { useNavigate } from 'react-router-dom'; import { formatEther, hexToString } from 'viem'; +import { useAccount } from 'wagmi'; import { LeaderboardRow } from '../components/LeaderboardRow'; import { useMUD } from '../contexts/MUDContext'; import { useToast } from '../hooks/useToast'; +import { HOME_PATH } from '../Routes'; import { fetchMetadataFromUri, uriToHttp } from '../utils/helpers'; import { Character, StatsClasses } from '../utils/types'; @@ -37,6 +40,8 @@ const PER_PAGE = 10; export const Leaderboard = (): JSX.Element => { const { renderError } = useToast(); + const navigate = useNavigate(); + const { isConnected } = useAccount(); const { components: { Characters, CharactersTokenURI, GoldBalances, Stats }, @@ -54,6 +59,13 @@ export const Leaderboard = (): JSX.Element => { const [page, setPage] = useState('1'); const [pageLimit, setPageLimit] = useState(0); + useEffect(() => { + if (!isConnected) { + navigate(HOME_PATH); + window.location.reload(); + } + }, [isConnected, navigate]); + const pageNumber = useMemo(() => { if (isNaN(Number(page))) { return 1; From 86e6ee663f7e859abd4f5824cf18f96b438f4c15 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Fri, 2 Aug 2024 15:20:03 -0600 Subject: [PATCH 2/4] Change app loader text to progress bar --- packages/client/src/Routes.tsx | 10 ++++++---- packages/client/src/pages/Welcome.tsx | 8 +++++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx index 8ff5e6a4e..0ddd2dc59 100644 --- 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 ( - - {syncProgress.message} {Math.round(syncProgress.percentage)}% - + Loading {Math.round(syncProgress.percentage)}% + ); } diff --git a/packages/client/src/pages/Welcome.tsx b/packages/client/src/pages/Welcome.tsx index 73a09bc10..7efda8aca 100644 --- a/packages/client/src/pages/Welcome.tsx +++ b/packages/client/src/pages/Welcome.tsx @@ -2,6 +2,7 @@ import { Button, Container, Heading, + Progress, Text, useDisclosure, VStack, @@ -74,9 +75,10 @@ export const Welcome = (): JSX.Element => { {syncProgress && syncProgress.step !== SyncStep.LIVE ? ( - - {syncProgress.message} {Math.round(syncProgress.percentage)}% - + + Loading {Math.round(syncProgress.percentage)}% + + ) : ( Play )} From e2eaa51864f52bf59553b7eff17c6fb027a043ec Mon Sep 17 00:00:00 2001 From: ECWireless Date: Sun, 4 Aug 2024 10:18:20 -0600 Subject: [PATCH 3/4] Render armor separately from weapons --- packages/client/src/components/ItemCard.tsx | 28 +- .../client/src/components/ItemEquipModal.tsx | 26 +- packages/client/src/pages/Character.tsx | 475 +++++++++++------- .../client/src/pages/CharacterCreation.tsx | 32 +- packages/client/src/pages/GameBoard.tsx | 8 +- packages/client/src/utils/constants.ts | 3 +- packages/client/src/utils/types.ts | 18 + packages/contracts/items.json | 14 +- packages/contracts/script/PostDeploy.s.sol | 63 +-- 9 files changed, 410 insertions(+), 257 deletions(-) diff --git a/packages/client/src/components/ItemCard.tsx b/packages/client/src/components/ItemCard.tsx index bc5fd7b78..b3c00fea2 100644 --- a/packages/client/src/components/ItemCard.tsx +++ b/packages/client/src/components/ItemCard.tsx @@ -6,11 +6,12 @@ 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; }; @@ -18,9 +19,10 @@ type ItemCardProps = Weapon & { export const ItemCard: React.FC = ({ isEquipped = false, onClick, - ...weapon + ...item }): JSX.Element => { - const { agiModifier, intModifier, strModifier, name } = weapon; + const { agiModifier, classRestrictions, intModifier, strModifier, name } = + item; return ( = ({ - STR+{strModifier} AGI+{agiModifier} INT+{intModifier} + STR+{strModifier} AGI+{agiModifier} INT+ + {intModifier}{' '} + {(item as Armor).armorModifier + ? `ARM+${(item as Armor).armorModifier}` + : ''} - + {classRestrictions.includes(StatsClasses.Warrior) && ( + + )} + {classRestrictions.includes(StatsClasses.Rogue) && ( + + )} + {classRestrictions.includes(StatsClasses.Mage) && ( + + )} diff --git a/packages/client/src/components/ItemEquipModal.tsx b/packages/client/src/components/ItemEquipModal.tsx index adae352a5..ddb9d3d69 100644 --- 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 = ({ isEquipped, isOpen, onClose, - ...weapon + ...item }): JSX.Element => { const { renderError, renderSuccess } = useToast(); const { @@ -39,8 +39,8 @@ export const ItemEquipModal: React.FC = ({ 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,7 +56,7 @@ export const ItemEquipModal: React.FC = ({ } const { error, success } = await equipItems(character.characterId, [ - weapon.tokenId, + item.tokenId, ]); if (error && !success) { @@ -64,7 +64,7 @@ export const ItemEquipModal: React.FC = ({ } 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 = ({ character, delegatorAddress, equipItems, + item, onClose, refreshCharacter, renderError, renderSuccess, - weapon, ]); const onUnequipItem = useCallback(async () => { @@ -96,7 +96,7 @@ export const ItemEquipModal: React.FC = ({ const { error, success } = await unequipItem( character.characterId, - weapon.tokenId, + item.tokenId, ); if (error && !success) { @@ -104,7 +104,7 @@ export const ItemEquipModal: React.FC = ({ } 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 = ({ }, [ character, delegatorAddress, + item, onClose, refreshCharacter, renderError, renderSuccess, unequipItem, - weapon, ]); if (isEquipped) { @@ -137,7 +137,7 @@ export const ItemEquipModal: React.FC = ({ ) : ( Do you want to make an offer for this item? )} - + = ({ ) : ( Do you want to make an offer for this item? )} - + { const { components: { - CharacterEquipment, Characters, CharactersTokenURI, GoldBalances, - Items, - ItemsBaseURI, - ItemsOwners, - ItemsTokenURI, Levels, MatchEntity, Stats, @@ -82,11 +78,6 @@ export const CharacterPage = (): JSX.Element => { } = useMUD(); const { character: userCharacter } = useCharacter(); - const { - isOpen: isItemModalOpen, - onClose: onCloseItemModal, - onOpen: onOpenItemModal, - } = useDisclosure(); const { isOpen: isEditModalOpen, onClose: onCloseEditModal, @@ -95,9 +86,6 @@ export const CharacterPage = (): JSX.Element => { const [character, setCharacter] = useState(null); const [isLoadingCharacter, setIsLoadingCharacter] = useState(true); - const [items, setItems] = useState(null); - const [isLoadingItems, setIsLoadingItems] = useState(true); - const [selectedItem, setSelectedItem] = useState(null); useEffect(() => { if (!isConnected) { @@ -106,10 +94,6 @@ export const CharacterPage = (): JSX.Element => { } }, [isConnected, navigate]); - const equippedWeapons = - useComponentValue(CharacterEquipment, characterId as Entity | undefined) - ?.equippedWeapons ?? []; - const fetchCharacter = useCallback(async () => { try { if (!(characterId && publicClient && worldContract)) return null; @@ -193,107 +177,6 @@ export const CharacterPage = (): JSX.Element => { worldContract, ]); - const fetchCharacterItems = useCallback( - async (_character: Character) => { - try { - const _items = Array.from(runQuery([Has(ItemsOwners)])) - .map(entity => { - const itemdBalance = getComponentValueStrict( - ItemsOwners, - entity, - ).balance; - - const { owner, tokenId } = decodeEntity( - { owner: 'address', tokenId: 'uint256' }, - entity, - ); - - const tokenIdEntity = encodeEntity( - { tokenId: 'uint256' }, - { tokenId }, - ); - - const itemTemplate = getComponentValueStrict(Items, tokenIdEntity); - - return { - balance: itemdBalance.toString(), - itemId: entity, - itemType: itemTemplate.itemType, - owner, - tokenId: tokenId.toString(), - tokenIdEntity, - }; - }) - .filter( - item => - item.owner === _character.owner && - item.itemType === ItemType.Weapon, - ) - .sort((a, b) => { - return Number(a.tokenId) - Number(b.tokenId); - }); - - const fullItems = await Promise.all( - _items.map(async item => { - const itemTemplateStats = - await worldContract.read.UD__getWeaponStats([ - BigInt(item.tokenId), - ]); - - const baseURI = getComponentValueStrict( - ItemsBaseURI, - singletonEntity, - ).uri; - - const tokenURI = getComponentValueStrict( - ItemsTokenURI, - item.tokenIdEntity, - ).uri; - - const metadata = await fetchMetadataFromUri( - uriToHttp(`${baseURI}${tokenURI}`)[0], - ); - - return { - ...metadata, - agiModifier: itemTemplateStats.agiModifier.toString(), - balance: item.balance, - classRestrictions: itemTemplateStats.classRestrictions.map( - (classRestriction: number) => classRestriction as StatsClasses, - ), - hitPointModifier: itemTemplateStats.hitPointModifier.toString(), - intModifier: itemTemplateStats.intModifier.toString(), - itemId: item.itemId, - maxDamage: itemTemplateStats.maxDamage.toString(), - minDamage: itemTemplateStats.minDamage.toString(), - minLevel: itemTemplateStats.minLevel.toString(), - owner: item.owner, - strModifier: itemTemplateStats.strModifier.toString(), - tokenId: item.tokenId, - } as Weapon; - }), - ); - - setItems(fullItems); - } catch (e) { - renderError( - (e as Error)?.message ?? 'Failed to fetch character items.', - e, - ); - } finally { - setIsLoadingItems(false); - } - }, - [ - Items, - ItemsBaseURI, - ItemsOwners, - ItemsTokenURI, - renderError, - worldContract, - ], - ); - const isOwner = useMemo(() => { if (!(userCharacter && characterId)) return false; const { ownerAddress } = decodeCharacterId(characterId as `0x${string}`); @@ -305,18 +188,12 @@ export const CharacterPage = (): JSX.Element => { (async (): Promise => { if (isOwner && userCharacter) { setCharacter(userCharacter); - await fetchCharacterItems(userCharacter); setIsLoadingCharacter(false); return; } - const _character = await fetchCharacter(); - - if (!_character) return; - await fetchCharacterItems(_character); + await fetchCharacter(); })(); - }, [fetchCharacter, fetchCharacterItems, isOwner, isSynced, userCharacter]); - - const maxItemsEquipped = equippedWeapons.length === MAX_EQUIPPED_WEAPONS; + }, [fetchCharacter, isOwner, isSynced, userCharacter]); const currentLevelXpRequirement = useComponentValue( @@ -519,55 +396,7 @@ export const CharacterPage = (): JSX.Element => { rowSpan={{ base: 1, sm: 1, md: 1, lg: 1, xl: 1 }} rowStart={{ base: 4, sm: 4, md: 4, lg: 2, xl: 2 }} > - {items ? ( - <> - - Items {items.length} - {equippedWeapons.length}/ - {MAX_EQUIPPED_WEAPONS} equipped{' '} - - {maxItemsEquipped && ( - (Max items equipped) - )} - - {items.map(function (item, i) { - const isEquipped = equippedWeapons.includes( - BigInt(item.tokenId), - ); - return ( - - { - setSelectedItem(item); - onOpenItemModal(); - } - } - /> - - ); - })} - - - ) : isLoadingItems ? ( - - - - ) : ( - Error loading items - )} + ) : ( @@ -601,17 +430,291 @@ export const CharacterPage = (): JSX.Element => { {...character} /> )} - { - onCloseItemModal(); - setSelectedItem(null); + + ); +}; + +const ItemsPanel = ({ character }: { character: Character }): JSX.Element => { + const { renderError } = useToast(); + + const { + components: { + CharacterEquipment, + Items, + ItemsBaseURI, + ItemsOwners, + ItemsTokenURI, + }, + network: { worldContract }, + } = useMUD(); + + const { + isOpen: isItemModalOpen, + onClose: onCloseItemModal, + onOpen: onOpenItemModal, + } = useDisclosure(); + + const [armor, setArmor] = useState([]); + const [weapons, setWeapons] = useState([]); + const [isLoadingItems, setIsLoadingItems] = useState(true); + const [selectedItem, setSelectedItem] = useState(null); + + const { equippedArmor, equippedWeapons } = + useComponentValue( + CharacterEquipment, + character.characterId as Entity | undefined, + ) ?? + ({ equippedArmor: [], equippedWeapons: [] } as { + equippedArmor: bigint[]; + equippedWeapons: bigint[]; + }); + + const maxArmorEquipped = equippedArmor.length === MAX_EQUIPPED_ARMOR; + const maxWeaponsEquipped = equippedWeapons.length === MAX_EQUIPPED_WEAPONS; + + const fetchCharacterItems = useCallback( + async (_character: Character) => { + try { + const _items = Array.from(runQuery([Has(ItemsOwners)])) + .map(entity => { + const itemdBalance = getComponentValueStrict( + ItemsOwners, + entity, + ).balance; + + const { owner, tokenId } = decodeEntity( + { owner: 'address', tokenId: 'uint256' }, + entity, + ); + + const tokenIdEntity = encodeEntity( + { tokenId: 'uint256' }, + { tokenId }, + ); + + const itemTemplate = getComponentValueStrict(Items, tokenIdEntity); + + return { + balance: itemdBalance.toString(), + itemId: entity, + itemType: itemTemplate.itemType, + owner, + tokenId: tokenId.toString(), + tokenIdEntity, + }; + }) + .filter(item => item.owner === _character.owner) + .sort((a, b) => { + return Number(a.tokenId) - Number(b.tokenId); + }); + + const _armor = _items.filter(item => item.itemType === ItemType.Armor); + const _weapons = _items.filter( + item => item.itemType === ItemType.Weapon, + ); + + const fullArmor = await Promise.all( + _armor.map(async item => { + const itemTemplateStats = + await worldContract.read.UD__getArmorStats([ + BigInt(item.tokenId), + ]); + + const baseURI = getComponentValueStrict( + ItemsBaseURI, + singletonEntity, + ).uri; + + const tokenURI = getComponentValueStrict( + ItemsTokenURI, + item.tokenIdEntity, + ).uri; + + const metadata = await fetchMetadataFromUri( + uriToHttp(`${baseURI}${tokenURI}`)[0], + ); + + return { + ...metadata, + agiModifier: itemTemplateStats.agiModifier.toString(), + armorModifier: itemTemplateStats.armorModifier.toString(), + classRestrictions: itemTemplateStats.classRestrictions.map( + (classRestriction: number) => classRestriction as StatsClasses, + ), + hitPointModifier: itemTemplateStats.hitPointModifier.toString(), + intModifier: itemTemplateStats.intModifier.toString(), + itemId: item.itemId, + owner: item.owner, + strModifier: itemTemplateStats.strModifier.toString(), + tokenId: item.tokenId, + } as Armor; + }), + ); + + const fullWeapons = await Promise.all( + _weapons.map(async item => { + const itemTemplateStats = + await worldContract.read.UD__getWeaponStats([ + BigInt(item.tokenId), + ]); + + const baseURI = getComponentValueStrict( + ItemsBaseURI, + singletonEntity, + ).uri; + + const tokenURI = getComponentValueStrict( + ItemsTokenURI, + item.tokenIdEntity, + ).uri; + + const metadata = await fetchMetadataFromUri( + uriToHttp(`${baseURI}${tokenURI}`)[0], + ); + + return { + ...metadata, + agiModifier: itemTemplateStats.agiModifier.toString(), + balance: item.balance, + classRestrictions: itemTemplateStats.classRestrictions.map( + (classRestriction: number) => classRestriction as StatsClasses, + ), + hitPointModifier: itemTemplateStats.hitPointModifier.toString(), + intModifier: itemTemplateStats.intModifier.toString(), + itemId: item.itemId, + maxDamage: itemTemplateStats.maxDamage.toString(), + minDamage: itemTemplateStats.minDamage.toString(), + minLevel: itemTemplateStats.minLevel.toString(), + owner: item.owner, + strModifier: itemTemplateStats.strModifier.toString(), + tokenId: item.tokenId, + } as Weapon; + }), + ); + + setArmor(fullArmor); + setWeapons(fullWeapons); + } catch (e) { + renderError( + (e as Error)?.message ?? 'Failed to fetch character items.', + e, + ); + } finally { + setIsLoadingItems(false); + } + }, + [ + Items, + ItemsBaseURI, + ItemsOwners, + ItemsTokenURI, + renderError, + worldContract, + ], + ); + + useEffect(() => { + (async (): Promise => { + await fetchCharacterItems(character); + })(); + }, [character, fetchCharacterItems]); + + if (isLoadingItems) { + return ( + + + + ); + } + + return ( + + + Armor {armor.length} - {equippedArmor.length}/{MAX_EQUIPPED_ARMOR}{' '} + equipped{' '} + + {maxArmorEquipped && (Max armor equipped)} + + gap={2} + mt={4} + > + {armor.length === 0 && No armor found} + {armor.map(function (ar, i) { + const isEquipped = equippedArmor.includes(BigInt(ar.tokenId)); + return ( + + { + setSelectedItem(ar); + onOpenItemModal(); + } + } + {...ar} + /> + + ); + })} + + + Weapons {weapons.length} - {equippedWeapons.length}/ + {MAX_EQUIPPED_WEAPONS} equipped{' '} + + {maxWeaponsEquipped && (Max weapons equipped)} + + {weapons.length === 0 && No weapons found} + {weapons.map(function (weapon, i) { + const isEquipped = equippedWeapons.includes(BigInt(weapon.tokenId)); + return ( + + { + setSelectedItem(weapon); + onOpenItemModal(); + } + } + {...weapon} + /> + + ); + })} + + {selectedItem && ( + { + onCloseItemModal(); + setSelectedItem(null); + }} + {...selectedItem} + /> + )} ); }; diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx index b695885f1..88e7f66e7 100644 --- a/packages/client/src/pages/CharacterCreation.tsx +++ b/packages/client/src/pages/CharacterCreation.tsx @@ -16,8 +16,8 @@ import { useBreakpointValue, VStack, } from '@chakra-ui/react'; -import { useComponentValue } from '@latticexyz/react'; -import { getComponentValueStrict } from '@latticexyz/recs'; +import { useComponentValue, useEntityQuery } from '@latticexyz/react'; +import { getComponentValueStrict, Has } from '@latticexyz/recs'; import { encodeEntity, singletonEntity } from '@latticexyz/store-sync/recs'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { FaLock } from 'react-icons/fa'; @@ -35,9 +35,7 @@ import { shortenAddress, uriToHttp, } from '../utils/helpers'; -import { StatsClasses, Weapon } from '../utils/types'; - -const STARTER_WEAPON_TOKEN_IDS = [BigInt(1), BigInt(2), BigInt(3)]; +import { StatsClasses, type Weapon } from '../utils/types'; export const CharacterCreation = (): JSX.Element => { const navigate = useNavigate(); @@ -45,7 +43,12 @@ export const CharacterCreation = (): JSX.Element => { const isSmallScreen = useBreakpointValue({ base: true, lg: false }); const { isConnected } = useAccount(); const { - components: { ItemsBaseURI, ItemsTokenURI, UltimateDominionConfig }, + components: { + ItemsBaseURI, + ItemsTokenURI, + StarterItems, + UltimateDominionConfig, + }, delegatorAddress, isSynced, network: { worldContract }, @@ -72,6 +75,13 @@ export const CharacterCreation = (): JSX.Element => { const [isRollingStats, setIsRollingStats] = useState(false); const [isEnteringGame, setIsEnteringGame] = useState(false); + const starterWeaponTokenIds = useEntityQuery([Has(StarterItems)]).map( + entity => { + const tokenId = getComponentValueStrict(StarterItems, entity).itemIds[1]; + return tokenId; + }, + ); + const { characterToken } = useComponentValue( UltimateDominionConfig, singletonEntity, @@ -85,7 +95,7 @@ export const CharacterCreation = (): JSX.Element => { const fetchStarterWeapons = useCallback(async () => { try { const _items: Weapon[] = await Promise.all( - STARTER_WEAPON_TOKEN_IDS.map(async tokenId => { + starterWeaponTokenIds.map(async tokenId => { const itemTemplateStats = await worldContract.read.UD__getWeaponStats( [tokenId], ); @@ -127,7 +137,13 @@ export const CharacterCreation = (): JSX.Element => { } catch (e) { renderError((e as Error)?.message ?? 'Error fetching starter item.', e); } - }, [ItemsBaseURI, ItemsTokenURI, renderError, worldContract]); + }, [ + ItemsBaseURI, + ItemsTokenURI, + renderError, + starterWeaponTokenIds, + worldContract, + ]); useEffect(() => { fetchStarterWeapons(); diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx index 78b0addaa..e2e55f586 100644 --- a/packages/client/src/pages/GameBoard.tsx +++ b/packages/client/src/pages/GameBoard.tsx @@ -79,7 +79,7 @@ export const GameBoard = (): JSX.Element => { useEffect(() => { if (!(character && equippedItems)) return; - const equipInfoSeenKey = `equip-info-seen-${worldContract}-${character.characterId}`; + const equipInfoSeenKey = `equip-info-seen-${worldContract.address}-${character.characterId}`; const hasSeenEquipInfo = localStorage.getItem(equipInfoSeenKey); if (hasSeenEquipInfo) return; @@ -92,7 +92,7 @@ export const GameBoard = (): JSX.Element => { const onAcknowledgeEquipInfo = useCallback(() => { if (!character) return; - const equipInfoSeenKey = `equip-info-seen-${worldContract}-${character.characterId}`; + const equipInfoSeenKey = `equip-info-seen-${worldContract.address}-${character.characterId}`; localStorage.setItem(equipInfoSeenKey, 'true'); onCloseEquipInfoModal(); }, [character, onCloseEquipInfoModal, worldContract]); @@ -102,7 +102,7 @@ export const GameBoard = (): JSX.Element => { if (!(character && position)) return; const outerRealms = position.x === 5 || position.y === 5; - const outerRealmsSeenKey = `outer-realms-warning-seen-${worldContract}-${character.characterId}`; + const outerRealmsSeenKey = `outer-realms-warning-seen-${worldContract.address}-${character.characterId}`; const hasSeenWarning = localStorage.getItem(outerRealmsSeenKey); if (hasSeenWarning) return; @@ -115,7 +115,7 @@ export const GameBoard = (): JSX.Element => { const onAcknowledgeOuterRealmsWarning = useCallback(() => { if (!character) return; - const outerRealmsSeenKey = `outer-realms-warning-seen-${worldContract}-${character.characterId}`; + const outerRealmsSeenKey = `outer-realms-warning-seen-${worldContract.address}-${character.characterId}`; localStorage.setItem(outerRealmsSeenKey, 'true'); onCloseOuterRealmsInfoModal(); }, [character, onCloseOuterRealmsInfoModal, worldContract]); diff --git a/packages/client/src/utils/constants.ts b/packages/client/src/utils/constants.ts index ba876e730..754142b3d 100644 --- a/packages/client/src/utils/constants.ts +++ b/packages/client/src/utils/constants.ts @@ -1,5 +1,6 @@ export const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:8080'; -export const MAX_EQUIPPED_WEAPONS = 3; +export const MAX_EQUIPPED_ARMOR = 1; +export const MAX_EQUIPPED_WEAPONS = 2; export const BATTLE_OUTCOME_SEEN_KEY = 'latest-battle-outcome-seen'; diff --git a/packages/client/src/utils/types.ts b/packages/client/src/utils/types.ts index 47505f946..eb8f2cdbd 100644 --- a/packages/client/src/utils/types.ts +++ b/packages/client/src/utils/types.ts @@ -46,6 +46,24 @@ export type ActionOutcomeType = { weaponId: string; }; +export type Armor = ArmorStats & + Metadata & { + balance: string; + itemId: Entity; + owner: string; + tokenId: string; + }; + +export type ArmorStats = { + agiModifier: string; + armorModifier: string; + classRestrictions: StatsClasses[]; + hitPointModifier: string; + intModifier: string; + minLevel: string; + strModifier: string; +}; + export type Character = CharacterData & EntityStats & Metadata; export type CharacterData = { diff --git a/packages/contracts/items.json b/packages/contracts/items.json index e1b46a43f..dafcf3636 100644 --- a/packages/contracts/items.json +++ b/packages/contracts/items.json @@ -3,10 +3,10 @@ { "dropChance": 20000000, "initialSupply": 10000000000000000000, - "metadataUri": "1_rags.json", - "name": "Rags", + "metadataUri": "1_leather_vest.json", + "name": "Leather Vest", "stats": { - "agiModifier": 0, + "agiModifier": -1, "armorModifier": 1, "classRestrictions": [], "hitPointModifier": 0, @@ -16,12 +16,12 @@ } } ], - "metadataUriPrefix": "ipfs://QmVUaqRpQJHyqugYd12Qf2iErNSoGvLF1cbeRHpmX8bChs/", + "metadataUriPrefix": "ipfs://QmPooDEwqeGh3Qszig7veD1yEoa6EoVyDUmLqWUZ1riiDS/", "weapons": [ { "dropChance": 20000000, "initialSupply": 10000000000000000000, - "metadataUri": "1_rusty_sword.json", + "metadataUri": "2_rusty_sword.json", "name": "Rusty Sword", "stats": { "agiModifier": 4, @@ -37,7 +37,7 @@ { "dropChance": 20000000, "initialSupply": 10000000000000000000, - "metadataUri": "2_cracked_dagger.json", + "metadataUri": "3_cracked_dagger.json", "name": "Cracked Dagger", "stats": { "agiModifier": 4, @@ -53,7 +53,7 @@ { "dropChance": 20000000, "initialSupply": 10000000000000000000, - "metadataUri": "3_cobbled_wand.json", + "metadataUri": "4_cobbled_wand.json", "name": "Cobbled Wand", "stats": { "agiModifier": 4, diff --git a/packages/contracts/script/PostDeploy.s.sol b/packages/contracts/script/PostDeploy.s.sol index ed9639337..79df15bce 100644 --- a/packages/contracts/script/PostDeploy.s.sol +++ b/packages/contracts/script/PostDeploy.s.sol @@ -254,6 +254,34 @@ contract PostDeploy is Script { uint256[] memory rogueItemIds = new uint256[](2); uint256[] memory mageItemIds = new uint256[](2); + for (uint256 i = 0; i < itemsData.armor.length; i++) { + ArmorTemplateDetails memory armorTemplate = itemsData.armor[i]; + + ArmorStats memory newArmor = ArmorStats({ + agiModifier: armorTemplate.stats.agiModifier, + armorModifier: armorTemplate.stats.armorModifier, + classRestrictions: armorTemplate.stats.classRestrictions, + hitPointModifier: armorTemplate.stats.hitPointModifier, + intModifier: armorTemplate.stats.intModifier, + minLevel: armorTemplate.stats.minLevel, + strModifier: armorTemplate.stats.strModifier + }); + + uint256 starterArmorId = world.UD__createItem( + ItemType.Armor, + armorTemplate.initialSupply, + armorTemplate.dropChance, + abi.encode(newArmor), + armorTemplate.metadataUri + ); + + if (i == 0) { + warriorItemIds[0] = starterArmorId; + rogueItemIds[0] = starterArmorId; + mageItemIds[0] = starterArmorId; + } + } + for (uint256 i = 0; i < itemsData.weapons.length; i++) { WeaponTemplateDetails memory weaponTemplate = itemsData.weapons[i]; @@ -268,7 +296,7 @@ contract PostDeploy is Script { strModifier: weaponTemplate.stats.strModifier }); - uint256 starterArmorId = world.UD__createItem( + uint256 starterWeaponId = world.UD__createItem( ItemType.Weapon, weaponTemplate.initialSupply, weaponTemplate.dropChance, @@ -277,43 +305,16 @@ contract PostDeploy is Script { ); if (i == 0) { - warriorItemIds[1] = starterArmorId; + warriorItemIds[1] = starterWeaponId; } if (i == 1) { - rogueItemIds[1] = starterArmorId; + rogueItemIds[1] = starterWeaponId; } if (i == 2) { - mageItemIds[1] = starterArmorId; + mageItemIds[1] = starterWeaponId; } } - for (uint256 i = 0; i < itemsData.armor.length; i++) { - ArmorTemplateDetails memory armorTemplate = itemsData.armor[i]; - - ArmorStats memory newArmor = ArmorStats({ - agiModifier: armorTemplate.stats.agiModifier, - armorModifier: armorTemplate.stats.armorModifier, - classRestrictions: armorTemplate.stats.classRestrictions, - hitPointModifier: armorTemplate.stats.hitPointModifier, - intModifier: armorTemplate.stats.intModifier, - minLevel: armorTemplate.stats.minLevel, - strModifier: armorTemplate.stats.strModifier - }); - - uint256 starterItemId = world.UD__createItem( - ItemType.Armor, - armorTemplate.initialSupply, - armorTemplate.dropChance, - abi.encode(newArmor), - armorTemplate.metadataUri - ); - - if (i == 0) { - warriorItemIds[0] = starterItemId; - rogueItemIds[0] = starterItemId; - mageItemIds[0] = starterItemId; - } - } uint256[] memory amounts = new uint256[](2); amounts[0] = 1; amounts[1] = 1; From 93048e976f030f110f4cebaf0503c333508217e1 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Sun, 4 Aug 2024 11:56:54 -0600 Subject: [PATCH 4/4] Render all items to StatsPanel --- .../client/src/components/ActionsPanel.tsx | 10 +- packages/client/src/components/StatsPanel.tsx | 19 ++- .../client/src/contexts/CharacterContext.tsx | 115 +++++++++++++++--- packages/client/src/pages/GameBoard.tsx | 9 +- 4 files changed, 124 insertions(+), 29 deletions(-) diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx index 489437f47..7dfeba9a0 100644 --- 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 ( - {currentBattle && equippedItems && monsterOponent && ( + {currentBattle && equippedWeapons && monsterOponent && ( Choose your move: - {equippedItems.length === 0 && ( + {equippedWeapons.length === 0 && ( You have no equipped items. In order to attack, you must go to your{' '} @@ -143,12 +143,12 @@ export const ActionsPanel = (): JSX.Element => { )} - {equippedItems.map((item, index) => ( + {equippedWeapons.map((item, index) => ( { 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 ( @@ -178,10 +185,10 @@ export const StatsPanel = (): JSX.Element => { Equipped Items - {equippedItems.length}/{MAX_EQUIPPED_WEAPONS} + {allItems.length}/{MAX_EQUIPPED_ITEMS} - {equippedItems.map((item, index) => ( + {allItems.map((item, index) => ( { ))} {Array.from({ - length: MAX_EQUIPPED_WEAPONS - equippedItems.length, + length: MAX_EQUIPPED_ITEMS - allItems.length, }).map((_, index) => ( Promise; }; const CharacterContext = createContext({ character: null, - equippedItems: null, + equippedArmor: [], + equippedWeapons: [], isRefreshing: false, refreshCharacter: async () => {}, }); @@ -67,7 +70,8 @@ export const CharacterProvider = ({ const [userCharacter, setUserCharacter] = useState(null); const [isRefreshing, setIsRefreshing] = useState(false); - const [equippedItems, setEquippedItems] = useState(null); + const [equippedArmor, setEquippedArmor] = useState([]); + const [equippedWeapons, setEquippedWeapons] = useState([]); const fetchCharacterData = useCallback(async () => { if (!(delegatorAddress && publicClient && worldContract)) return; @@ -167,14 +171,46 @@ export const CharacterProvider = ({ ]); const fetchCharacterItems = useCallback( - async (_character: Character, _equippedWeapons: bigint[]) => { + async ( + _character: Character, + _equippedArmor: bigint[], + _equippedWeapons: bigint[], + ) => { try { + if (_equippedArmor.length === 0) { + setEquippedArmor([]); + return; + } if (_equippedWeapons.length === 0) { - setEquippedItems([]); + setEquippedWeapons([]); + } + + if (_equippedArmor.length + _equippedWeapons.length === 0) { return; } - const _items = _equippedWeapons + const _armor = _equippedArmor.map(tokenId => { + const tokenOwnersEntity = encodeEntity( + { owner: 'address', tokenId: 'uint256' }, + { + owner: _character.owner as `0x${string}`, + tokenId: BigInt(tokenId), + }, + ); + const itemOwner = getComponentValueStrict( + ItemsOwners, + tokenOwnersEntity, + ); + + return { + balance: itemOwner.balance.toString(), + itemId: tokenOwnersEntity, + owner: _character.owner, + tokenId: tokenId.toString(), + }; + }); + + const _weapons = _equippedWeapons .map(tokenId => { const tokenOwnersEntity = encodeEntity( { owner: 'address', tokenId: 'uint256' }, @@ -200,8 +236,53 @@ export const CharacterProvider = ({ return Number(a.tokenId) - Number(b.tokenId); }); - const fullItems = await Promise.all( - _items.map(async item => { + const fullArmor = await Promise.all( + _armor.map(async item => { + const itemTemplateStats = + await worldContract.read.UD__getArmorStats([ + BigInt(item.tokenId), + ]); + + const tokenIdEntity = encodeEntity( + { tokenId: 'uint256' }, + { tokenId: BigInt(item.tokenId) }, + ); + + const baseURI = getComponentValueStrict( + ItemsBaseURI, + singletonEntity, + ).uri; + + const tokenURI = getComponentValueStrict( + ItemsTokenURI, + tokenIdEntity, + ).uri; + + const metadata = await fetchMetadataFromUri( + uriToHttp(`${baseURI}${tokenURI}`)[0], + ); + + return { + ...metadata, + agiModifier: itemTemplateStats.agiModifier.toString(), + armorModifier: itemTemplateStats.armorModifier.toString(), + balance: item.balance, + classRestrictions: itemTemplateStats.classRestrictions.map( + (classRestriction: number) => classRestriction as StatsClasses, + ), + hitPointModifier: itemTemplateStats.hitPointModifier.toString(), + intModifier: itemTemplateStats.intModifier.toString(), + itemId: item.itemId, + minLevel: itemTemplateStats.minLevel.toString(), + owner: item.owner, + strModifier: itemTemplateStats.strModifier.toString(), + tokenId: item.tokenId, + } as Armor; + }), + ); + + const fullWeapons = await Promise.all( + _weapons.map(async item => { const itemTemplateStats = await worldContract.read.UD__getWeaponStats([ BigInt(item.tokenId), @@ -246,7 +327,8 @@ export const CharacterProvider = ({ }), ); - setEquippedItems(fullItems); + setEquippedArmor(fullArmor); + setEquippedWeapons(fullWeapons); } catch (e) { renderError( (e as Error)?.message ?? 'Failed to fetch character data.', @@ -261,10 +343,14 @@ export const CharacterProvider = ({ if (!isSynced) return; (async (): Promise => { if (!userCharacter) return; - const equippedWeapons = - getComponentValue(CharacterEquipment, userCharacter.characterId) - ?.equippedWeapons ?? []; - await fetchCharacterItems(userCharacter, equippedWeapons); + + const { equippedArmor, equippedWeapons } = + getComponentValue(CharacterEquipment, userCharacter.characterId) ?? + ({ equippedArmor: [], equippedWeapons: [] } as { + equippedArmor: bigint[]; + equippedWeapons: bigint[]; + }); + await fetchCharacterItems(userCharacter, equippedArmor, equippedWeapons); })(); }, [userCharacter, CharacterEquipment, fetchCharacterItems, isSynced]); @@ -272,7 +358,8 @@ export const CharacterProvider = ({ { isSynced, network: { worldContract }, } = useMUD(); - const { character, equippedItems } = useCharacter(); + const { character, equippedWeapons } = useCharacter(); const { lastestBattleOutcome, position } = useMapNavigation(); // Redirect to home if synced, but missing other requirements @@ -77,17 +77,17 @@ export const GameBoard = (): JSX.Element => { // Open equip info modal if character has no experience and no equipped items useEffect(() => { - if (!(character && equippedItems)) return; + if (!(character && equippedWeapons)) return; const equipInfoSeenKey = `equip-info-seen-${worldContract.address}-${character.characterId}`; const hasSeenEquipInfo = localStorage.getItem(equipInfoSeenKey); if (hasSeenEquipInfo) return; - if (character.experience === '0' && equippedItems.length === 0) { + if (character.experience === '0' && equippedWeapons.length === 0) { onOpenEquipInfoModal(); } - }, [character, equippedItems, onOpenEquipInfoModal, worldContract]); + }, [character, equippedWeapons, onOpenEquipInfoModal, worldContract]); const onAcknowledgeEquipInfo = useCallback(() => { if (!character) return; @@ -214,6 +214,7 @@ export const GameBoard = (): JSX.Element => {