feat: sort equipment by combined stat power within each slot
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m5s
CI / Lint, Build & Test (pull_request) Successful in 1m9s

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
This commit is contained in:
2026-03-18 18:35:05 -07:00
committed by Naomi Carrigan
parent 798efb3fb6
commit 84be2aab8a
@@ -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}>