From 84be2aab8ad4a7628e09da6a702fe5ff803e5469 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Wed, 18 Mar 2026 18:35:05 -0700
Subject: [PATCH] feat: sort equipment by combined stat power within each slot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Equipment cards within each slot (weapon/armour/trinket) now render in
ascending order of combined bonus power — the sum of all multiplier bonuses
— so stronger items always appear further down the list. Hybrid items such
as Volcanic Plate sort correctly without needing a per-slot primary stat.

Closes #55
---
 apps/web/src/components/game/equipmentPanel.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/web/src/components/game/equipmentPanel.tsx b/apps/web/src/components/game/equipmentPanel.tsx
index 376df27..004bd0e 100644
--- a/apps/web/src/components/game/equipmentPanel.tsx
+++ b/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}>