apps/web/src/components/game/equipmentPanel.tsx

@@ -7,6 +7,7 @@
 /* eslint-disable react/no-multi-comp -- Sub-component is tightly coupled to the panel */
 /* eslint-disable max-lines-per-function -- Complex component with many render paths */
 /* eslint-disable complexity -- Complex component with many conditional render paths */
+/* eslint-disable max-lines -- Equipment panel with set bonus display and sort logic */
 import { type JSX, useState } from "react";
 import { useGame } from "../../context/gameContext.js";
 import { EQUIPMENT_SETS } from "../../data/equipmentSets.js";
@@ -188,6 +189,20 @@ const EquipmentCard = ({
   );
 };
 
+/**
+ * Computes a combined power score for sorting — sum of all bonus multipliers.
+ * Using the sum (rather than a single stat) keeps hybrid items in sensible order.
+ * @param item - The equipment piece whose bonus multipliers are summed.
+ * @returns The combined bonus value.
+ */
+const equipmentPower = (item: Equipment): number => {
+  return (
+    (item.bonus.combatMultiplier ?? 1)
+    + (item.bonus.goldMultiplier ?? 1)
+    + (item.bonus.clickMultiplier ?? 1)
+  );
+};
+
 const slotOrder: Array<EquipmentType> = [ "weapon", "armour", "trinket" ];
 const slotLabel: Record<EquipmentType, string> = {
   armour:  "🛡️ Armour",
@@ -320,6 +335,8 @@ const EquipmentPanel = (): JSX.Element => {
       {slotOrder.map((slotType) => {
         const items = equipment.filter((item) => {
           return item.type === slotType && (showLocked || item.owned);
+        }).sort((a, b) => {
+          return equipmentPower(a) - equipmentPower(b);
         });
         return (
           <div className="equipment-slot-section" key={slotType}>