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<Adventurer>;
 }
 
 /**
@@ -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}
         </span>
         <span className="upgrade-desc">{upgrade.description}</span>
+        {adventurerName === undefined
+          ? null
+          : <span className="upgrade-target">
+            {"🗡️ Affects: "}
+            {adventurerName}
+          </span>
+        }
       </div>
     );
   }
@@ -79,6 +94,13 @@ const UpgradeCard = ({
         <div className="upgrade-info">
           <h3>{upgrade.name}</h3>
           <p>{upgrade.description}</p>
+          {adventurerName === undefined
+            ? null
+            : <p className="upgrade-target">
+              {"🗡️ Affects: "}
+              {adventurerName}
+            </p>
+          }
           <p className="upgrade-multiplier">
             {"×"}
             {upgrade.multiplier}
@@ -130,6 +152,13 @@ const UpgradeCard = ({
           {upgrade.name}
         </h3>
         <p>{upgrade.description}</p>
+        {adventurerName === undefined
+          ? null
+          : <p className="upgrade-target">
+            {"🗡️ Affects: "}
+            {adventurerName}
+          </p>
+        }
         <p className="upgrade-multiplier">
           {"×"}
           {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 (
               <UpgradeCard
+                adventurers={adventurers}
                 currentCrystals={resources.crystals}
                 currentEssence={resources.essence}
                 currentGold={resources.gold}
@@ -253,6 +283,7 @@ const UpgradePanel = (): JSX.Element => {
           {purchased.map((upgrade) => {
             return (
               <UpgradeCard
+                adventurers={adventurers}
                 currentCrystals={resources.crystals}
                 currentEssence={resources.essence}
                 currentGold={resources.gold}
@@ -267,6 +298,7 @@ const UpgradePanel = (): JSX.Element => {
             ? locked.map((upgrade) => {
               return (
                 <UpgradeCard
+                  adventurers={adventurers}
                   currentCrystals={resources.crystals}
                   currentEssence={resources.essence}
                   currentGold={resources.gold}