diff --git a/src/app/ModelingPage.js b/src/app/ModelingPage.js
index e8a4716..5538ea4 100644
--- a/src/app/ModelingPage.js
+++ b/src/app/ModelingPage.js
@@ -1,15 +1,17 @@
import React from "react";
-import { Box } from "@chakra-ui/core";
+import { Badge, Box, SimpleGrid } from "@chakra-ui/core";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
import HangerSpinner from "./components/HangerSpinner";
-import { Heading1 } from "./util";
+import { Heading1, Heading2 } from "./util";
+import ItemSummary, { ItemSummaryBadgeList } from "./components/ItemSummary";
function ModelingPage() {
return (
Modeling Hub
+ Item models we need
);
@@ -42,24 +44,35 @@ function ItemModelsList() {
return {error.message};
}
- const items = [...data.itemsThatNeedModels].sort((a, b) =>
- a.name.localeCompare(b.name)
- );
+ const items = data.itemsThatNeedModels
+ // enough MMEs are broken that I just don't want to deal right now!
+ .filter((item) => !item.name.includes("MME"))
+ .sort((a, b) => a.name.localeCompare(b.name));
return (
-
+
{items.map((item) => (
-
+
))}
+
+ );
+}
+
+function ItemModelCard({ item, ...props }) {
+ return (
+
+ } />
);
}
-function ItemModelCard({ item }) {
+function ItemModelBadges({ item }) {
return (
-
- {item.name}
-
+
+ {item.speciesThatNeedModels.map((species) => (
+ {species.name}
+ ))}
+
);
}
diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js
index a220bce..b96b0f8 100644
--- a/src/app/WardrobePage/Item.js
+++ b/src/app/WardrobePage/Item.js
@@ -5,10 +5,8 @@ import {
Box,
Flex,
IconButton,
- Image,
Skeleton,
Tooltip,
- Wrap,
useColorModeValue,
useTheme,
} from "@chakra-ui/core";
@@ -20,7 +18,7 @@ import {
} from "@chakra-ui/icons";
import loadable from "@loadable/component";
-import { safeImageUrl } from "../util";
+import ItemSummary, { ItemSummaryBadgeList } from "../components/ItemSummary";
import SupportOnly from "./support/SupportOnly";
const LoadableItemSupportDrawer = loadable(() =>
@@ -56,59 +54,19 @@ function Item({
}) {
const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false);
- const occupiedZoneLabels = getZoneLabels(
- item.appearanceOn.layers.map((l) => l.zone)
- );
- const restrictedZoneLabels = getZoneLabels(
- item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems)
- );
-
return (
<>
-
-
+ }
+ itemNameId={itemNameId}
isWorn={isWorn}
- isDisabled={isDisabled}
+ isDiabled={isDisabled}
+ focusSelector={containerHasFocus}
/>
-
-
- {item.name}
-
-
- {item.isNc ? (
-
- NC
-
- ) : (
- // The main purpose of the NP badge is alignment: if there are
- // zone badges, we want them to start at the same rough position,
- // even if there's an NC badge at the start. But if this view
- // generally avoids zone badges, we'd rather have the NC badge be
- // a little extra that might pop up and hide the NP case, rather
- // than try to line things up like a table.
-
- NP
-
- )}
- {occupiedZoneLabels.map((zoneLabel) => (
-
- ))}
- {restrictedZoneLabels.map((zoneLabel) => (
-
- ))}
-
-
{isInOutfit && (
l.zone)
);
-
- const focusBorderColor = useColorModeValue(
- theme.colors.green["600"],
- "transparent"
+ const restrictedZoneLabels = getZoneLabels(
+ item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems)
);
return (
-
-
-
-
-
- );
-}
-
-/**
- * ItemName shows the item's name, including some hover/focus and worn/unworn
- * states.
- */
-function ItemName({ children, isDisabled, ...props }) {
- const theme = useTheme();
-
- return (
-
- {children}
-
+
+ {item.isNc ? (
+
+ NC
+
+ ) : (
+ // The main purpose of the NP badge is alignment: if there are
+ // zone badges, we want them to start at the same rough position,
+ // even if there's an NC badge at the start. But if this view
+ // generally avoids zone badges, we'd rather have the NC badge be
+ // a little extra that might pop up and hide the NP case, rather
+ // than try to line things up like a table.
+
+ NP
+
+ )}
+ {occupiedZoneLabels.map((zoneLabel) => (
+
+ ))}
+ {restrictedZoneLabels.map((zoneLabel) => (
+
+ ))}
+
);
}
diff --git a/src/app/components/ItemSummary.js b/src/app/components/ItemSummary.js
new file mode 100644
index 0000000..06347c0
--- /dev/null
+++ b/src/app/components/ItemSummary.js
@@ -0,0 +1,151 @@
+import React from "react";
+import { css } from "emotion";
+import { Box, Image, Wrap, useColorModeValue, useTheme } from "@chakra-ui/core";
+
+import { safeImageUrl } from "../util";
+
+function ItemSummary({
+ item,
+ badges,
+ isWorn,
+ isDisabled,
+ itemNameId,
+ focusSelector,
+}) {
+ return (
+
+
+
+
+
+
+ {item.name}
+
+
+ {badges}
+
+
+ );
+}
+
+/**
+ * ItemThumbnail shows a small preview image for the item, including some
+ * hover/focus and worn/unworn states.
+ */
+function ItemThumbnail({ src, isWorn, isDisabled, focusSelector }) {
+ const theme = useTheme();
+
+ const borderColor = useColorModeValue(
+ theme.colors.green["700"],
+ "transparent"
+ );
+
+ const focusBorderColor = useColorModeValue(
+ theme.colors.green["600"],
+ "transparent"
+ );
+
+ return (
+
+
+
+
+
+ );
+}
+
+/**
+ * ItemName shows the item's name, including some hover/focus and worn/unworn
+ * states.
+ */
+function ItemName({ children, isDisabled, focusSelector, ...props }) {
+ const theme = useTheme();
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function ItemSummaryBadgeList({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default ItemSummary;