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

24
src/useOutfitState.js
View file

@ -199,29 +199,31 @@ function getZonesAndItems(itemsById, wornItemIds, closetedItemIds) {
.map((id) => itemsById[id]) .map((id) => itemsById[id])
.filter((i) => i); .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 allItems = [...wornItems, ...closetedItems];
const zonesById = new Map(); const itemsByZoneLabel = new Map();
const itemsByZoneId = new Map();
for (const item of allItems) { for (const item of allItems) {
for (const layer of item.appearanceOn.layers) { for (const layer of item.appearanceOn.layers) {
const zoneId = layer.zone.id; const zoneLabel = layer.zone.label;
zonesById.set(zoneId, layer.zone);
if (!itemsByZoneId.has(zoneId)) { if (!itemsByZoneLabel.has(zoneLabel)) {
itemsByZoneId.set(zoneId, []); itemsByZoneLabel.set(zoneLabel, []);
} }
itemsByZoneId.get(zoneId).push(item); itemsByZoneLabel.get(zoneLabel).push(item);
} }
} }
const zonesAndItems = Array.from(itemsByZoneId.entries()).map( const zonesAndItems = Array.from(itemsByZoneLabel.entries()).map(
([zoneId, items]) => ({ ([zoneLabel, items]) => ({
zone: zonesById.get(zoneId), zoneLabel: zoneLabel,
items: [...items].sort((a, b) => a.name.localeCompare(b.name)), 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; return zonesAndItems;
} }