add gem costs to gem link tooltip title

common/types.d.ts

@@ -13,7 +13,6 @@ export namespace GameData {
     primary_attribute: string;
     required_level: number;
     is_support: boolean;
-    cost: string;
   }
 
   export interface Character {

seeding/src/seeding/gems.ts

@@ -1,14 +1,6 @@
 import { GameData } from "../../../common/types";
 import { Dat } from "../data";
 
-function getGemCost(required_level: number) {
-  if (required_level < 8) return "wisdom";
-  if (required_level < 16) return "transmutation";
-  if (required_level < 28) return "alteration";
-  if (required_level < 38) return "chance";
-  return "alchemy";
-}
-
 const ATTRIBUTE_LOOKUP: Record<number, string> = {
   [1]: "strength",
   [2]: "dexterity",
@@ -36,7 +28,6 @@ export async function getGems() {
       primary_attribute: ATTRIBUTE_LOOKUP[grantedEffects.Attribute],
       required_level: grantedEffectsPerLevel.PlayerLevelReq,
       is_support: skillGem.IsSupport,
-      cost: getGemCost(grantedEffectsPerLevel.PlayerLevelReq),
     };
 
     if (skillGem.VaalVariant_BaseItemTypesKey !== null) {

web/src/components/FragmentStep/Fragment/index.tsx

@@ -18,6 +18,7 @@ import {
   BsArrowUpSquare,
 } from "react-icons/bs";
 
+
 function getImageUrl(path: string) {
   return new URL(`./images/${path}`, import.meta.url).href;
 }

web/src/components/GemCost/index.tsx

@@ -0,0 +1,23 @@
+import { GameData } from "../../../../common/types";
+
+interface GemCostProps {
+  gem: GameData.Gem;
+}
+
+export function GemCost({ gem }: GemCostProps) {
+  return (
+    <img src={getImageUrl(`${getGemCost(gem.required_level)}.png`)} alt="" />
+  );
+}
+
+function getGemCost(required_level: number) {
+  if (required_level < 8) return "wisdom";
+  if (required_level < 16) return "transmutation";
+  if (required_level < 28) return "alteration";
+  if (required_level < 38) return "chance";
+  return "alchemy";
+}
+
+function getImageUrl(path: string) {
+  return new URL(`./images/${path}`, import.meta.url).href;
+}

web/src/components/GemLinkViewer/index.tsx

@@ -2,6 +2,8 @@ import { Data } from "../../../../common/data";
 import { RouteData } from "../../../../common/route-processing/types";
 import { GameData } from "../../../../common/types";
 import { formStyles } from "../../styles";
+import { GemCost } from "../GemCost";
+import { InlineFakeBlock } from "../InlineFakeBlock";
 import { SidebarTooltip } from "../SidebarTooltip";
 import styles from "./styles.module.css";
 import classNames from "classnames";
@@ -103,7 +105,7 @@ interface GemLinkProps {
 }
 
 function GemLink({ gemLink, isPrimary, onTooltip }: GemLinkProps) {
-  const gemData = Data.Gems[gemLink.id];
+  const gem = Data.Gems[gemLink.id];
   return (
     <div
       className={isPrimary ? styles.gemPrimary : styles.gemSecondary}
@@ -115,10 +117,10 @@ function GemLink({ gemLink, isPrimary, onTooltip }: GemLinkProps) {
       }}
     >
       <MdCircle
-        color={Data.GemColours[gemData.primary_attribute]}
+        color={Data.GemColours[gem.primary_attribute]}
         className={classNames("inlineIcon")}
       />
-      <span>{gemData.name}</span>
+      <span>{gem.name}</span>
     </div>
   );
 }
@@ -129,20 +131,20 @@ interface GemTooltipProps {
 
 function GemTooltip({ gemLink }: GemTooltipProps) {
   const gem = Data.Gems[gemLink.id];
-  const quests = gemLink.quests.map(
-    ({ questId, rewardOfferId }) => Data.Quests[questId].reward_offers
-  );
 
   return (
     <SidebarTooltip
       title={
-        <>
-          <MdCircle
-            color={Data.GemColours[gem.primary_attribute]}
-            className={classNames("inlineIcon")}
-          />
-          <span>{gem.name}</span>
-        </>
+        <div className={classNames(styles.gemLinkTitleInfo)}>
+          <span>
+            <MdCircle
+              color={Data.GemColours[gem.primary_attribute]}
+              className={classNames("inlineIcon")}
+            />
+            {gem.name}
+          </span>
+          <InlineFakeBlock child={<GemCost gem={gem} />} />
+        </div>
       }
     >
       <div className={classNames(styles.gemLinkQuestInfo)}>
@@ -151,7 +153,7 @@ function GemTooltip({ gemLink }: GemTooltipProps) {
           const npc = quest.reward_offers[x.rewardOfferId]?.vendor[gem.id]?.npc;
           const text = (
             <>
-              {i !== 0 && <hr className={classNames(styles.questSeperator)}  />}
+              {i !== 0 && <hr className={classNames(styles.questSeperator)} />}
               <span>{quest.name}</span>
               <span>{npc}</span>
               <span>Act {quest.act}</span>

web/src/components/GemLinkViewer/styles.module.css

@@ -40,6 +40,13 @@
   flex-direction: column;
 }
 
+.gemLinkTitleInfo {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--size-4);
+  padding: var(--size-2) 0;
+}
+
 .gemLinkQuestInfo {
   display: grid;
   grid-template-columns: repeat(3, max-content);

web/src/components/InlineFakeBlock/index.tsx

@@ -1,8 +1,9 @@
 import styles from "./styles.module.css";
 import classNames from "classnames";
+import { ReactNode } from "react";
 
 interface InlineFakeBlockProps {
-  child: React.ReactElement;
+  child: ReactNode;
 }
 
 export function InlineFakeBlock({ child }: InlineFakeBlockProps) {

web/src/components/ItemReward/index.tsx

@@ -1,16 +1,14 @@
 import { Data } from "../../../../common/data";
 import { RouteData } from "../../../../common/route-processing/types";
 import { CopyToClipboard } from "../CopyToClipboard";
+import { GemCost } from "../GemCost";
 import { InlineFakeBlock } from "../InlineFakeBlock";
 import { SplitRow } from "../SplitRow";
 import styles from "./styles.module.css";
 import classNames from "classnames";
+import { ReactNode } from "react";
 import { MdCircle } from "react-icons/md";
 
-function getImageUrl(path: string) {
-  return new URL(`./images/${path}`, import.meta.url).href;
-}
-
 function ItemRewardVerb(type: ItemRewardProps["rewardType"]) {
   switch (type) {
     case "quest":
@@ -26,7 +24,7 @@ interface ItemRewardProps {
   item: string;
   count?: number;
   rewardType?: "quest" | "vendor";
-  cost?: string;
+  cost?: ReactNode;
 }
 
 export function ItemReward({ item, count, cost, rewardType }: ItemRewardProps) {
@@ -38,9 +36,7 @@ export function ItemReward({ item, count, cost, rewardType }: ItemRewardProps) {
       {rewardType === "vendor" && cost !== undefined && (
         <div className={classNames(styles.noWrap)}>
           <span> for </span>
-          <InlineFakeBlock
-            child={<img src={getImageUrl(`${cost}.png`)} alt="" />}
-          />
+          <InlineFakeBlock child={cost} />
         </div>
       )}
     </>
@@ -73,7 +69,7 @@ export function GemReward({ requiredGem, count, rewardType }: GemRewardProps) {
           />
           <ItemReward
             item={gem.name}
-            cost={gem.cost}
+            cost={<GemCost gem={gem} />}
             rewardType={rewardType}
             count={count}
           />

web/src/components/SidebarTooltip/index.tsx

@@ -9,7 +9,7 @@ type SidebarTooltip = {
 export function SidebarTooltip({ title, children }: SidebarTooltip) {
   return (
     <div className={classNames(styles.tooltip)}>
-      <span className={classNames(styles.tooltipTitle)}>{title}</span>
+      <div className={classNames(styles.tooltipTitle)}>{title}</div>
 
       {children && (
         <>

web/src/components/SidebarTooltip/styles.module.css

@@ -8,7 +8,6 @@
   border-width: var(--border-width);
   border-color: var(--accent-primary);
   border-radius: var(--border-radius);
-  line-height: initial;
   padding: var(--size-2);
 }