diff --git a/apps/web/src/components/game/upgradePanel.tsx b/apps/web/src/components/game/upgradePanel.tsx index f5d6ee8..03e4bf9 100644 --- a/apps/web/src/components/game/upgradePanel.tsx +++ b/apps/web/src/components/game/upgradePanel.tsx @@ -11,7 +11,7 @@ import { type JSX, useState } from "react"; import { useGame } from "../../context/gameContext.js"; import { cdnImage } from "../../utils/cdn.js"; import { LockToggle } from "../ui/lockToggle.js"; -import type { Upgrade } from "@elysium/types"; +import type { Adventurer, Upgrade } from "@elysium/types"; interface UpgradeCardProperties { readonly upgrade: Upgrade; @@ -20,6 +20,7 @@ interface UpgradeCardProperties { readonly currentCrystals: number; readonly unlockHint: string | undefined; readonly formatNumber: (n: number)=> string; + readonly adventurers: ReadonlyArray; } /** @@ -31,6 +32,7 @@ interface UpgradeCardProperties { * @param props.currentCrystals - The current crystals amount. * @param props.unlockHint - Optional hint for how to unlock this upgrade. * @param props.formatNumber - The number formatting utility function. + * @param props.adventurers - The list of adventurers, used to resolve the affected adventurer name. * @returns The JSX element. */ const UpgradeCard = ({ @@ -40,8 +42,14 @@ const UpgradeCard = ({ currentCrystals, unlockHint, formatNumber, + adventurers, }: UpgradeCardProperties): JSX.Element => { const { buyUpgrade } = useGame(); + const adventurerName = upgrade.adventurerId === undefined + ? undefined + : adventurers.find((adventurer) => { + return adventurer.id === upgrade.adventurerId; + })?.name; const canAfford = currentGold >= upgrade.costGold && currentEssence >= upgrade.costEssence @@ -64,6 +72,13 @@ const UpgradeCard = ({ {upgrade.name} {upgrade.description} + {adventurerName === undefined + ? null + : + {"🗡️ Affects: "} + {adventurerName} + + } ); } @@ -79,6 +94,13 @@ const UpgradeCard = ({

{upgrade.name}

{upgrade.description}

+ {adventurerName === undefined + ? null + :

+ {"🗡️ Affects: "} + {adventurerName} +

+ }

{"×"} {upgrade.multiplier} @@ -130,6 +152,13 @@ const UpgradeCard = ({ {upgrade.name}

{upgrade.description}

+ {adventurerName === undefined + ? null + :

+ {"🗡️ Affects: "} + {adventurerName} +

+ }

{"×"} {upgrade.multiplier} @@ -181,7 +210,7 @@ const UpgradePanel = (): JSX.Element => { ); } - const { bosses, quests, upgrades, resources } = state; + const { adventurers, bosses, quests, upgrades, resources } = state; const purchased = upgrades.filter((upgrade) => { return upgrade.purchased; }); @@ -240,6 +269,7 @@ const UpgradePanel = (): JSX.Element => { {available.map((upgrade) => { return ( { {purchased.map((upgrade) => { return ( { ? locked.map((upgrade) => { return (