OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

merge zones with the same name in the items UI

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 00:46:25 -07:00
parent 8b8d67e5b1
commit 4045844e4b
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/ItemsPanel.js
View file

@ -37,9 +37,9 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
))}
{!loading && (
<TransitionGroup component={null}>
{zonesAndItems.map(({ zone, items }) => (
{zonesAndItems.map(({ zoneLabel, items }) => (
<CSSTransition
key={zone.id}
key={zoneLabel}
classNames="items-panel-zone"
timeout={500}
onExit={(e) => {
@ -47,7 +47,7 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
}}
>
<Box mb="10">
<Heading2>{zone.label}</Heading2>
<Heading2>{zoneLabel}</Heading2>
<ItemList
items={items}
outfitState={outfitState}

24
src/useOutfitState.js
View file

@ -199,29 +199,31 @@ function getZonesAndItems(itemsById, wornItemIds, closetedItemIds) {
.map((id) => itemsById[id])
.filter((i) => i);
// We use zone label here, rather than ID, because some zones have the same
// label and we *want* to over-simplify that in this UI. (e.g. there are
// multiple Hat zones, and some items occupy different ones, but mostly let's
// just group them and if they don't conflict then all the better!)
const allItems = [...wornItems, ...closetedItems];
const zonesById = new Map();
const itemsByZoneId = new Map();
const itemsByZoneLabel = new Map();
for (const item of allItems) {
for (const layer of item.appearanceOn.layers) {
const zoneId = layer.zone.id;
zonesById.set(zoneId, layer.zone);
const zoneLabel = layer.zone.label;
if (!itemsByZoneId.has(zoneId)) {
itemsByZoneId.set(zoneId, []);
if (!itemsByZoneLabel.has(zoneLabel)) {
itemsByZoneLabel.set(zoneLabel, []);
}
itemsByZoneId.get(zoneId).push(item);
itemsByZoneLabel.get(zoneLabel).push(item);
}
}
const zonesAndItems = Array.from(itemsByZoneId.entries()).map(
([zoneId, items]) => ({
zone: zonesById.get(zoneId),
const zonesAndItems = Array.from(itemsByZoneLabel.entries()).map(
([zoneLabel, items]) => ({
zoneLabel: zoneLabel,
items: [...items].sort((a, b) => a.name.localeCompare(b.name)),
})
);
zonesAndItems.sort((a, b) => a.zone.label.localeCompare(b.zone.label));
zonesAndItems.sort((a, b) => a.zoneLabel.localeCompare(b.zoneLabel));
return zonesAndItems;
}