generated from nhcarrigan/template
feat: sort equipment by combined stat power within each slot
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:
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user