show enemy tiers and item levels in UI

chrisinajar · Feb 4, 2024 · 9b62b22 · 9b62b22
1 parent 2ad9ba9
commit 9b62b22
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 35 deletions.
diff --git a/src/components/combat/index.tsx b/src/components/combat/index.tsx
@@ -278,6 +278,10 @@ export function Combat(): JSX.Element {
                       value={challengeOption.id}
                     >
                       {challengeOption.name}
+                      &nbsp;
+                      <Typography variant="caption" display="inline-block">
+                        Tier {challengeOption.level}
+                      </Typography>
                     </MenuItem>
                   ))}
                 </Select>

diff --git a/src/game/index.tsx b/src/game/index.tsx
@@ -170,8 +170,8 @@ export default function Home(): JSX.Element {
                     >
                       in the wiki
                     </Link>
-                    . The game is nearly impossible to 100% out without
-                    consulting the wiki.
+                    . The game is nearly impossible to 100% without consulting
+                    the wiki.
                   </Typography>
 
                   <Typography variant="h5" sx={{ mb: 2 }}>

diff --git a/src/game/inventory/equipment-slot.tsx b/src/game/inventory/equipment-slot.tsx
@@ -125,24 +125,32 @@ export function EquipmentSlot({
               onEquip(slot, e.target.value);
             }}
           >
-            {items.map((inventoryItem) => (
-              <MenuItem
-                key={inventoryItem.id}
-                value={inventoryItem.id}
-                disabled={otherEquippedItems.indexOf(inventoryItem.id) >= 0}
-              >
-                {inventoryItem.id === equipped ? (
-                  <b>{itemDisplayName(inventoryItem)}</b>
-                ) : (
-                  itemDisplayName(inventoryItem)
-                )}
-                {inventoryItem.enchantment && (
-                  <Typography variant="subtitle2" sx={{ color: "info.main" }}>
-                    &nbsp;{getEnchantmentDisplay(inventoryItem.enchantment)}
+            {items.map((inventoryItem) => {
+              return (
+                <MenuItem
+                  key={inventoryItem.id}
+                  value={inventoryItem.id}
+                  disabled={otherEquippedItems.indexOf(inventoryItem.id) >= 0}
+                >
+                  {inventoryItem.id === equipped ? (
+                    <b>{itemDisplayName(inventoryItem)}</b>
+                  ) : (
+                    itemDisplayName(inventoryItem)
+                  )}
+                  <Typography
+                    variant="caption"
+                    sx={{ color: "info.secondary" }}
+                  >
+                    &nbsp;Lvl. {inventoryItem.level}
                   </Typography>
-                )}
-              </MenuItem>
-            ))}
+                  {inventoryItem.enchantment && (
+                    <Typography variant="subtitle2" sx={{ color: "info.main" }}>
+                      &nbsp;{getEnchantmentDisplay(inventoryItem.enchantment)}
+                    </Typography>
+                  )}
+                </MenuItem>
+              );
+            })}
           </Select>
         </FormControl>
       </div>

diff --git a/src/game/shop-items.graphql b/src/game/shop-items.graphql
@@ -4,5 +4,6 @@ query ShopItems {
     name
     cost
     type
+    level
   }
 }
diff --git a/src/game/shop/shop.tsx b/src/game/shop/shop.tsx
@@ -84,7 +84,7 @@ export function SellItemShop({
           onChange={(e) => {
             const itemId = e.target.value;
             const inventoryItem = hero.inventory.find(
-              (item) => item.id === itemId
+              (item) => item.id === itemId,
             );
             if (!inventoryItem) {
               return;
@@ -109,10 +109,25 @@ export function SellItemShop({
                   !sellItem || !!item.enchantment || isItemEquipped(hero, item)
                 }
               >
-                {sellItem?.cost &&
-                  `${itemDisplayName(
-                    item
-                  )}: ${sellItem.cost.toLocaleString()} Gold`}
+                {sellItem?.cost && (
+                  <>
+                    <Typography display="inline-block">
+                      {itemDisplayName(item)}
+                    </Typography>
+                    &nbsp;
+                    <Typography variant="caption" display="inline-block">
+                      Lvl. {item.level}
+                    </Typography>
+                    &nbsp;
+                    <Typography
+                      variant="subtitle2"
+                      display="inline-block"
+                      sx={{ color: "info.main" }}
+                    >
+                      {sellItem.cost.toLocaleString()} Gold
+                    </Typography>
+                  </>
+                )}
                 {!sellItem?.cost && item.name}{" "}
                 {isItemEquipped(hero, item) && "*EQUIPPED*"}
               </MenuItem>
@@ -158,17 +173,36 @@ export function ItemTypeShop({
           }
         }}
       >
-        {items.map((shopItem) => (
-          <MenuItem
-            key={shopItem.id}
-            value={shopItem.id}
-            disabled={!shopItem.cost || shopItem.cost > hero.gold}
-          >
-            {shopItem.cost &&
-              `${shopItem.name}: ${shopItem.cost.toLocaleString()} Gold`}
-            {!shopItem.cost && shopItem.name}
-          </MenuItem>
-        ))}
+        {items.map((shopItem) => {
+          return (
+            <MenuItem
+              key={shopItem.id}
+              value={shopItem.id}
+              disabled={!shopItem.cost || shopItem.cost > hero.gold}
+            >
+              {shopItem.cost && (
+                <>
+                  <Typography display="inline-block">
+                    {itemDisplayName(shopItem)}
+                  </Typography>
+                  &nbsp;
+                  <Typography variant="caption" display="inline-block">
+                    Lvl. {shopItem.level}
+                  </Typography>
+                  &nbsp;
+                  <Typography
+                    variant="subtitle2"
+                    display="inline-block"
+                    sx={{ color: "info.main" }}
+                  >
+                    {shopItem.cost.toLocaleString()} Gold
+                  </Typography>
+                </>
+              )}
+              {!shopItem.cost && shopItem.name}
+            </MenuItem>
+          );
+        })}
       </Select>
     </FormControl>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,5 +4,6 @@ query ShopItems { @@
         name
         cost
         type
+        level
       }
     }