From bd576517f8a172e0b343f88e2d9a848c8bd874d5 Mon Sep 17 00:00:00 2001 From: kibagateaux Date: Tue, 6 Feb 2024 13:31:39 -0600 Subject: [PATCH] refactor item page state and hooks --- src/app/index.tsx | 27 ++++++----- src/app/inventory/[item].tsx | 89 ++++++++++++++++++----------------- src/inventory/maliks-majik.ts | 4 +- src/types/GameMechanics.ts | 1 + src/utils/config.ts | 2 +- 5 files changed, 63 insertions(+), 60 deletions(-) diff --git a/src/app/index.tsx b/src/app/index.tsx index 0cb5fd1..7631cf6 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -4,7 +4,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-na import { isEmpty } from 'lodash/fp'; import { useHomeConfig } from 'hooks'; -// import { useAuth, useGameContent } from 'contexts'; +import { useAuth, useGameContent } from 'contexts'; import { WidgetConfig, WidgetIds, obj } from 'types/UserConfig'; import { getIconForWidget } from 'utils/rendering'; @@ -25,8 +25,8 @@ import { magicRug } from 'utils/zkpid'; const HomeScreen = () => { const { config: homeConfig, save: saveHomeConfig } = useHomeConfig(); - // const { setActiveModal } = useGameContent(); - // const { player, getSpellBook } = useAuth(); + const { setActiveModal } = useGameContent(); + const { player, getSpellBook } = useAuth(); const eggRollAngle = useSharedValue(30); const eggAnimatedStyles = useAnimatedStyle(() => ({ transform: [{ rotate: `${eggRollAngle.value}deg` }], @@ -123,16 +123,17 @@ const HomeScreen = () => { onComplete={async (config) => { try { console.log('on avatar config wizard complete', config.stats); - // if(!player?.id) setActiveModal({ - // name: 'create-spellbook', - // dialogueData: { - // title: "A jinni is approaching", - // text: "Wait for it to sniff you and say hi", - // } - // }); - // await getSpellBook(); - - // setActiveModal(undefined); + if (!player?.id) + setActiveModal({ + name: 'create-spellbook', + dialogueData: { + title: 'A jinni is approaching', + text: 'Wait for it to sniff you and say hi', + }, + }); + await getSpellBook(); + setActiveModal(undefined); + await Promise.all([ finalizeRenovation( [ diff --git a/src/app/inventory/[item].tsx b/src/app/inventory/[item].tsx index 3367e88..233f185 100644 --- a/src/app/inventory/[item].tsx +++ b/src/app/inventory/[item].tsx @@ -36,20 +36,45 @@ interface ItemPageProps { const ItemPage: React.FC = () => { const { item: id }: { item: string } = useLocalSearchParams(); const { inventory, loading, setItemStatus } = useInventory(); - const { player, getSpellBook } = useAuth(); - // const item = inventory.find((i) => i.id === id); - const [item, setItem] = useState(null); - const status = item?.status; - // const [status, setItemStatus] = useState(null); - // const [activeModal, setActiveModal] = useState(null); - const { setActiveModal } = useGameContent(); - const { inventory: content } = useGameContent(); - // hooks for items that require 3rd party authentication - const [itemOauthConfig, setItemOauth] = useState(oauthConfigs.undefined); - const [activeAbilities, setActiveAbilities] = useState([]); + const [activeAbilities, setActiveAbilities] = useState(undefined); + const item = inventory.find((i) => i.id === id); + const status: ItemStatus = item?.status; console.log('pg:inventory:item:Load', id, status, item?.tags); + useMemo(async () => { + // we cant store item status in config so compute and store in store + console.log('Item: check status?', item?.id && !status, item?.id, !status); + if (item?.id && !status) { + console.log('Item: setting status!!!'); + const newStatus = await item!.checkStatus(); + console.log('pg:Inv:Item check item status', newStatus); + setItemStatus(item.id, newStatus); + } + }, [item, status, setItemStatus]); + useMemo(async () => { + console.log( + 'Item: check active abiliti?', + item?.abilities?.length && !activeAbilities, + item?.abilities?.length, + !activeAbilities, + ); + if (item?.abilities?.length && !activeAbilities) { + const activeAbs = await Promise.all( + item.abilities?.filter(async (ability) => { + (await ability.canDo(status)) === 'ethereal'; + }) ?? [], + ); + console.log('pb:Inv:Item post item status abilitiy check', activeAbs); + setActiveAbilities(activeAbs); + } + }, [item, status, activeAbilities]); + + // hooks for items that require 3rd party authentication + // TODO break functionality into actual separate components to shard state and prevent rerenders + // primarly , , all have completely separate data reqs + const [itemOauthConfig, setItemOauth] = useState(oauthConfigs.undefined); + // console.log('Item: oauth', itemOauthConfig, request, response); const [request, response, promptAsync] = useAuthRequest( { clientId: itemOauthConfig.clientId, @@ -60,37 +85,6 @@ const ItemPage: React.FC = () => { }, itemOauthConfig, ); - // console.log('Item: oauth', itemOauthConfig, request, response); - - useMemo(() => { - // we cant store item status in config so compute and store in store - if (item?.id && !status) - item!.checkStatus().then((newStatus: ItemStatus) => { - console.log('pg:Inv:Item check item status', newStatus); - setItemStatus(item.id, newStatus); - }); - - if (item?.abilities?.length && status) { - Promise.all( - item.abilities?.filter(async (ability) => { - (await ability.canDo(status!)) === 'ethereal'; - }) ?? [], - ).then((active) => { - console.log('pb:Inv:Item post item status abilitiy check', active); - setActiveAbilities(active); - }); - } - }, [item, status, setItemStatus]); - - // console.log('Item: item', id, item); - // console.log('Item: status & modal', status, activeModal); - - useMemo(() => { - const newItem = inventory.find((item) => item.id === id); - if (!newItem) return; // invalid id - if (id && !item) setItem(newItem); // first render - if (newItem.status !== item?.status) setItem(newItem); // status update - }, [id, item, inventory]); useMemo(async () => { if (item?.id) { @@ -108,6 +102,15 @@ const ItemPage: React.FC = () => { } }, [item]); + const { player, getSpellBook } = useAuth(); + const { setActiveModal } = useGameContent(); + const { inventory: content } = useGameContent(); + // console.log('Item: status & modal', status, activeModal); + + // TODO render loading screen when oauth items are generating redirect. + // OR ideally delay oauth state generation until equip() + // if (itemOauthConfig && !itemOauthConfig.state) setActiveModal({ name: 'create-spellbook' }) + if (loading) return ; if (!inventory) return Item Not Currently Available For Gameplay ; @@ -253,7 +256,7 @@ const ItemPage: React.FC = () => { const renderActiveItemAbilities = () => ( Active Abilities - {activeAbilities.length ? ( + {activeAbilities?.length ? ( {activeAbilities.map((ability) => ( // TODO check if canDo. yes? do(), no? checkStatus == equipped yes? nothin, no? pop up modal to equip. diff --git a/src/inventory/maliks-majik.ts b/src/inventory/maliks-majik.ts index d9f213b..161f781 100644 --- a/src/inventory/maliks-majik.ts +++ b/src/inventory/maliks-majik.ts @@ -46,12 +46,10 @@ const equip: HoF = async () => { return true; } else { throw Error('Enchanter is not a Master Djinn'); - // TODO return error message. "Wrong maji for ritual" - return false; } } catch (e) { console.log('Inv:MaliksMajik:equip:ERR', e); - return false; + throw e; } }; diff --git a/src/types/GameMechanics.ts b/src/types/GameMechanics.ts index 40a844e..ad43a4d 100644 --- a/src/types/GameMechanics.ts +++ b/src/types/GameMechanics.ts @@ -144,6 +144,7 @@ export type ItemIds = | ('AndroidHealthConnect' & OAuthProviderIds); export type ItemStatus = + | void | 'ethereal' // can be used by player but isnt installed or accessible at the moment | 'unequipped' // player can equip but hasnt yet | 'unequipping' // in the process of moving from 'equipped' -> 'unequipped' diff --git a/src/utils/config.ts b/src/utils/config.ts index e4d06e4..cc34237 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -289,8 +289,8 @@ export const getStorage: (slot: string, useMysticCrypt?: boolean) => Promise< console.log( 'get storage 1 - {slot, useCrypt} + cached', JSON.stringify({ slot, secure: useMysticCrypt }), + cached, ); - console.log(cached); if (cached) return cached; const val = useMysticCrypt ? await getItemAsync(slot, { requireAuthentication: !__DEV__ })