From 7685cf64a5b8398482cd6552f6112f2502be4c1c Mon Sep 17 00:00:00 2001 From: starknetdev Date: Thu, 14 Sep 2023 13:22:28 +0100 Subject: [PATCH 1/4] - make inventory display into info - tidy wallet select - debug death dialog --- .../app/components/adventurer/DeathDialog.tsx | 19 +- ui/src/app/components/adventurer/Info.tsx | 4 - .../adventurer/InventoryDisplay.tsx | 147 +++++++++++ .../app/components/adventurer/ItemDisplay.tsx | 248 ++++++++++-------- ui/src/app/components/intro/WalletSelect.tsx | 6 +- ui/src/app/containers/InventoryScreen.tsx | 1 - 6 files changed, 303 insertions(+), 122 deletions(-) create mode 100644 ui/src/app/components/adventurer/InventoryDisplay.tsx diff --git a/ui/src/app/components/adventurer/DeathDialog.tsx b/ui/src/app/components/adventurer/DeathDialog.tsx index e82e2511f..1f097ea5c 100644 --- a/ui/src/app/components/adventurer/DeathDialog.tsx +++ b/ui/src/app/components/adventurer/DeathDialog.tsx @@ -37,7 +37,11 @@ export const DeathDialog = () => { adventurersByXPdata?.adventurers ?? [] ); + console.log(adventurersByXPdata); + console.log(rank); + const ordinalRank = getOrdinalSuffix(rank + 1 ?? 0); + console.log(ordinalRank); return ( <> @@ -56,11 +60,16 @@ export const DeathDialog = () => { {deathMessage} -

- {adventurer?.name} died level {adventurer?.level} with {""} - {adventurer?.xp} XP, a valiant effort! Make sure to share your - score. Continue the journey with another adventurer:{" "} -

+ +

+ {adventurer?.name} died at {ordinalRank} on the leaderboard with{" "} + {adventurer?.xp} XP, a valiant effort! +

{" "} +

+ Make sure to share your score. Continue the journey with another + adventurer. +

+ - {/* - {" "} - {`${items.length}/${19}`} - */} {" "} diff --git a/ui/src/app/components/adventurer/InventoryDisplay.tsx b/ui/src/app/components/adventurer/InventoryDisplay.tsx new file mode 100644 index 000000000..135fdd78a --- /dev/null +++ b/ui/src/app/components/adventurer/InventoryDisplay.tsx @@ -0,0 +1,147 @@ +import LootIcon from "../icons/LootIcon"; +import Efficacyicon from "../icons/EfficacyIcon"; +import { Item, Call } from "@/app/types"; +import { + getItemData, + processItemName, + calculateLevel, + getKeyFromValue, +} from "@/app/lib/utils"; +import { useQueriesStore } from "@/app/hooks/useQueryStore"; +import { MdClose } from "react-icons/md"; +import { Button } from "../buttons/Button"; +import useUIStore from "@/app/hooks/useUIStore"; +import { GameData } from "../GameData"; +import { useContracts } from "@/app/hooks/useContracts"; +import useAdventurerStore from "@/app/hooks/useAdventurerStore"; +import useTransactionCartStore from "@/app/hooks/useTransactionCartStore"; +import { useEffect } from "react"; +import { set } from "lodash"; + +interface InventoryDisplayProps { + itemsOwnedInSlot: Item[]; + itemSlot: string; + setShowInventoryItems: (showInventoryItems: boolean) => void; + equipItems: string[]; +} + +export const InventoryDisplay = ({ + itemsOwnedInSlot, + itemSlot, + setShowInventoryItems, + equipItems, +}: InventoryDisplayProps) => { + return ( +
+ {itemsOwnedInSlot.length > 0 ? ( +
+ {itemsOwnedInSlot.map((item) => ( + + ))} +
+ ) : ( +

No items to equip.

+ )} + +
+ ); +}; + +interface InventoryCardProps { + itemSlot: string; + item: Item; + equipItems: string[]; +} + +export const InventoryCard = ({ + itemSlot, + item, + equipItems, +}: InventoryCardProps) => { + const { adventurer } = useAdventurerStore(); + const { tier, type, slot } = getItemData(item?.item ?? ""); + const itemName = processItemName(item); + + const setEquipItems = useUIStore((state) => state.setEquipItems); + const addToCalls = useTransactionCartStore((state) => state.addToCalls); + const removeEntrypointFromCalls = useTransactionCartStore( + (state) => state.removeEntrypointFromCalls + ); + + const { gameContract } = useContracts(); + const gameData = new GameData(); + + const handleEquipItems = (item: string) => { + const newEquipItems = [ + ...equipItems, + getKeyFromValue(gameData.ITEMS, item) ?? "", + ]; + setEquipItems(newEquipItems); + if (gameContract) { + if (handleCheckSameSlot(slot)) { + } + const equipItemTx = { + contractAddress: gameContract?.address, + entrypoint: "equip", + calldata: [ + adventurer?.id?.toString() ?? "", + "0", + newEquipItems.length.toString(), + ...newEquipItems, + ], + metadata: `Equipping ${item}!`, + }; + removeEntrypointFromCalls(equipItemTx.entrypoint); + addToCalls(equipItemTx); + } + }; + + const itemId = getKeyFromValue(gameData.ITEMS, item?.item ?? "") ?? ""; + + const handleCheckSameSlot = (itemSlot: string) => { + return equipItems.some((item) => { + const itemName = gameData.ITEMS[parseInt(item)]; + const { slot } = getItemData(itemName ?? ""); + return slot === itemSlot; + }); + }; + + return ( +
+
+
+ + +
+
+ + +
+ +
+ + {item && + `Tier ${tier ?? 0} + `} + + Greatness {calculateLevel(item?.xp ?? 0)} +
+

{itemName}

+ +
+ +
+ ); +}; diff --git a/ui/src/app/components/adventurer/ItemDisplay.tsx b/ui/src/app/components/adventurer/ItemDisplay.tsx index 530471b87..cc6fc7516 100644 --- a/ui/src/app/components/adventurer/ItemDisplay.tsx +++ b/ui/src/app/components/adventurer/ItemDisplay.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { Item } from "../../types"; import LootIcon from "../icons/LootIcon"; import Efficacyicon from "../icons/EfficacyIcon"; @@ -6,10 +6,11 @@ import { processItemName, calculateLevel, getItemData } from "../../lib/utils"; import ItemBar from "./ItemBar"; import { GameData } from "../GameData"; import { getKeyFromValue, getValueFromKey } from "../../lib/utils"; -import { useMediaQuery } from "react-responsive"; import { SwapIcon, DownArrowIcon } from "../icons/Icons"; import { Button } from "../buttons/Button"; import useUIStore from "@/app/hooks/useUIStore"; +import { InventoryDisplay } from "./InventoryDisplay"; +import { useQueriesStore } from "@/app/hooks/useQueryStore"; interface ItemDisplayProps { item: Item; @@ -30,10 +31,13 @@ export const ItemDisplay = ({ disabled, handleDrop, }: ItemDisplayProps) => { + const [showInventoryItems, setShowInventoryItems] = useState(false); const itemType = item?.item; const itemName = processItemName(item); + const equipItems = useUIStore((state) => state.equipItems); const { tier, type, slot } = getItemData(itemType ?? ""); + const { data } = useQueriesStore(); const gameData = new GameData(); const itemSuffix = parseInt( @@ -42,10 +46,6 @@ export const ItemDisplay = ({ const boost = getValueFromKey(gameData.ITEM_SUFFIX_BOOST, itemSuffix ?? 0); const screen = useUIStore((state) => state.screen); - const setScreen = useUIStore((state) => state.setScreen); - const setInventorySelected = useUIStore( - (state) => state.setInventorySelected - ); const dropItems = useUIStore((state) => state.dropItems); const scrollableRef = React.useRef(null); @@ -119,124 +119,154 @@ export const ItemDisplay = ({ return dropItems.includes(getKeyFromValue(gameData.ITEMS, item) ?? ""); }; + // Handle inventory display when user selects swap + + const items = data.itemsByAdventurerQuery + ? data.itemsByAdventurerQuery.items + : []; + + const itemsOwnedInSlot = items.filter((ownedItem) => { + const { slot } = getItemData(ownedItem.item ?? ""); + return slot === itemSlot && item.item !== ownedItem.item; + }); + + const slotEquipped = itemsOwnedInSlot.some((item) => + equipItems.includes(getKeyFromValue(gameData.ITEMS, item.item ?? "") ?? "") + ); + + // Check if they have slected to equip a slot then close inventory items + useEffect(() => { + if (slotEquipped) { + setShowInventoryItems(false); + } + }, [slotEquipped]); + return ( -
-
- - -
-
- - -
- - {item.item ? ( -
-
-
-
- - {item && - `Tier ${tier ?? 0} - `} - - - - - {boost} -
- - -

{itemName}

- - {slot == "Neck" || slot == "Ring" - ? ` [+${calculateLevel(item?.xp ?? 0)} Luck]` - : ""} - - - - {(screen == "play" || - screen == "upgrade" || - screen == "player") && ( - - )} - {inventory && ( - <> -
+ <> + {!showInventoryItems ? ( +
+
+ + +
+
+ + +
+ + {item.item ? ( +
+
+
+
+ + {item && + `Tier ${tier ?? 0} + `} + + + + + {boost} +
+ + +

{itemName}

+ + {slot == "Neck" || slot == "Ring" + ? ` [+${calculateLevel(item?.xp ?? 0)} Luck]` + : ""} + + + + {(screen == "play" || + screen == "upgrade" || + screen == "player") && ( -
-
+ )} + {inventory && ( + <> +
+ +
+
+ +
+ + )} + {(screen == "play" || + screen == "upgrade" || + screen == "player" || + screen == "inventory") && ( -
- - )} - {(screen == "play" || - screen == "upgrade" || - screen == "player" || - screen == "inventory") && ( - - )} - - + )} + + +
+
-
+ ) : ( +
+

None Equipped

+
+ )}
) : ( -
-

None Equipped

+
+
)} -
+ ); }; diff --git a/ui/src/app/components/intro/WalletSelect.tsx b/ui/src/app/components/intro/WalletSelect.tsx index b5ab7ee0f..1a4ba7221 100644 --- a/ui/src/app/components/intro/WalletSelect.tsx +++ b/ui/src/app/components/intro/WalletSelect.tsx @@ -26,7 +26,7 @@ const WalletSelect = ({}: WalletSelectProps) => { ); return ( -
+
{screen === "wallet" ? ( <> @@ -44,7 +44,7 @@ const WalletSelect = ({}: WalletSelectProps) => {
-
+
@@ -63,7 +63,7 @@ const WalletSelect = ({}: WalletSelectProps) => { {arcadeConnectors().length ? ( <>
Arcade Accounts
-
+
{arcadeConnectors().map((connector, index) => (