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 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 max-lines-per-function -- Complex component with many render paths */
|
||||||
/* eslint-disable complexity -- Complex component with many conditional 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 { type JSX, useState } from "react";
|
||||||
import { useGame } from "../../context/gameContext.js";
|
import { useGame } from "../../context/gameContext.js";
|
||||||
import { EQUIPMENT_SETS } from "../../data/equipmentSets.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 slotOrder: Array<EquipmentType> = [ "weapon", "armour", "trinket" ];
|
||||||
const slotLabel: Record<EquipmentType, string> = {
|
const slotLabel: Record<EquipmentType, string> = {
|
||||||
armour: "🛡️ Armour",
|
armour: "🛡️ Armour",
|
||||||
@@ -320,6 +335,8 @@ const EquipmentPanel = (): JSX.Element => {
|
|||||||
{slotOrder.map((slotType) => {
|
{slotOrder.map((slotType) => {
|
||||||
const items = equipment.filter((item) => {
|
const items = equipment.filter((item) => {
|
||||||
return item.type === slotType && (showLocked || item.owned);
|
return item.type === slotType && (showLocked || item.owned);
|
||||||
|
}).sort((a, b) => {
|
||||||
|
return equipmentPower(a) - equipmentPower(b);
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className="equipment-slot-section" key={slotType}>
|
<div className="equipment-slot-section" key={slotType}>
|
||||||
|
|||||||
Reference in New Issue
Block a user