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

Compare commits

base: OpenNeo:cd136aa6a5eeed7a51d0fbf5156bbfadf50088ae
Branches Tags
OpenNeo:main
OpenNeo:modeling-tests
OpenNeo:rainbow-pool
OpenNeo:simpler-item-previews
..
compare: OpenNeo:578528f4688e0fed725cadf3b3ad68624dbdc3f7
Branches Tags
OpenNeo:main
OpenNeo:modeling-tests
OpenNeo:rainbow-pool
OpenNeo:simpler-item-previews

No commits in common. "cd136aa6a5eeed7a51d0fbf5156bbfadf50088ae" and "578528f4688e0fed725cadf3b3ad68624dbdc3f7" have entirely different histories.
cd136aa6a5 ... 578528f468

7 changed files with 32 additions and 74 deletions
Show stats Expand all files Collapse all files

32
app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
View file

@ -77,22 +77,20 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
itemCount={outfitState.allItemIds.length} itemCount={outfitState.allItemIds.length}
/> />
) : ( ) : (
<> <TransitionGroup component={null}>
<TransitionGroup component={null}> {zonesAndItems.map(({ zoneId, zoneLabel, items }) => (
{zonesAndItems.map(({ zoneId, zoneLabel, items }) => ( <CSSTransition
<CSSTransition key={zoneId}
key={zoneId} {...fadeOutAndRollUpTransition(css)}
{...fadeOutAndRollUpTransition(css)} >
> <ItemZoneGroup
<ItemZoneGroup zoneLabel={zoneLabel}
zoneLabel={zoneLabel} items={items}
items={items} outfitState={outfitState}
outfitState={outfitState} dispatchToOutfit={dispatchToOutfit}
dispatchToOutfit={dispatchToOutfit} />
/> </CSSTransition>
</CSSTransition> ))}
))}
</TransitionGroup>
{incompatibleItems.length > 0 && ( {incompatibleItems.length > 0 && (
<ItemZoneGroup <ItemZoneGroup
zoneLabel="Incompatible" zoneLabel="Incompatible"
@ -111,7 +109,7 @@ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) {
isDisabled isDisabled
/> />
)} )}
</> </TransitionGroup>
)} )}
</Flex> </Flex>
</Box> </Box>

5
app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
View file

@ -24,7 +24,6 @@ import {
Switch, Switch,
Tooltip, Tooltip,
UnorderedList, UnorderedList,
useBreakpointValue,
useClipboard, useClipboard,
useToast, useToast,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
@ -79,8 +78,6 @@ function OutfitControls({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
const toast = React.useMemo(() => _toast, []); const toast = React.useMemo(() => _toast, []);
const speciesColorPickerSize = useBreakpointValue({ base: "sm", md: "md" });
const onSpeciesColorChange = React.useCallback( const onSpeciesColorChange = React.useCallback(
(species, color, isValid, closestPose) => { (species, color, isValid, closestPose) => {
if (isValid) { if (isValid) {
@ -211,7 +208,6 @@ function OutfitControls({
{outfitState.speciesId && outfitState.colorId && ( {outfitState.speciesId && outfitState.colorId && (
<Flex <Flex
gridArea="picker" gridArea="picker"
align="center"
justify="center" justify="center"
onClick={maybeUnlockFocus} onClick={maybeUnlockFocus}
> >
@ -227,7 +223,6 @@ function OutfitControls({
idealPose={outfitState.pose} idealPose={outfitState.pose}
onChange={onSpeciesColorChange} onChange={onSpeciesColorChange}
stateMustAlwaysBeValid stateMustAlwaysBeValid
size={speciesColorPickerSize}
speciesTestId="wardrobe-species-picker" speciesTestId="wardrobe-species-picker"
colorTestId="wardrobe-color-picker" colorTestId="wardrobe-color-picker"
/> />

7
app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
View file

@ -293,7 +293,7 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
{({ css, cx }) => ( {({ css, cx }) => (
<Button <Button
variant="unstyled" variant="unstyled"
textShadow={`${theme.colors.blackAlpha["700"]} 0 1px 2px`} boxShadow="md"
d="flex" d="flex"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
@ -307,11 +307,10 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
className={cx( className={cx(
css` css`
border: 1px solid transparent !important; border: 1px solid transparent !important;
color: ${theme.colors.gray["100"]}; color: ${theme.colors.gray["300"]};
cursor: ${loading ? "wait" : "pointer"} !important; cursor: ${loading ? "wait" : "pointer"} !important;
transition: transition:
color 0.2s, color 0.2s,
background: 0.2s,
border-color 0.2s !important; border-color 0.2s !important;
padding-left: 0.75em; padding-left: 0.75em;
padding-right: 0.5em; padding-right: 0.5em;
@ -320,8 +319,6 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
&.is-open { &.is-open {
border-color: ${theme.colors.gray["50"]} !important; border-color: ${theme.colors.gray["50"]} !important;
color: ${theme.colors.gray["50"]}; color: ${theme.colors.gray["50"]};
background: ${theme.colors.blackAlpha["600"]};
text-shadow: transparent 0 1px 2px;
} }
&:focus { &:focus {

19
app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js
View file

@ -129,7 +129,6 @@ function useOutfitState() {
$allItemIds: [ID!]! $allItemIds: [ID!]!
$speciesId: ID! $speciesId: ID!
$colorId: ID! $colorId: ID!
$altStyleId: ID
) { ) {
items(ids: $allItemIds) { items(ids: $allItemIds) {
# TODO: De-dupe this from SearchPanel? # TODO: De-dupe this from SearchPanel?
@ -141,11 +140,7 @@ function useOutfitState() {
currentUserOwnsThis currentUserOwnsThis
currentUserWantsThis currentUserWantsThis
appearanceOn( appearanceOn(speciesId: $speciesId, colorId: $colorId) {
speciesId: $speciesId
colorId: $colorId
altStyleId: $altStyleId
) {
# This enables us to quickly show the item when the user clicks it! # This enables us to quickly show the item when the user clicks it!
...ItemAppearanceForOutfitPreview ...ItemAppearanceForOutfitPreview
@ -171,7 +166,7 @@ function useOutfitState() {
${itemAppearanceFragment} ${itemAppearanceFragment}
`, `,
{ {
variables: { allItemIds, speciesId, colorId, altStyleId }, variables: { allItemIds, speciesId, colorId },
context: { sendAuth: true }, context: { sendAuth: true },
// Skip if this outfit has no items, as an optimization; or if we don't // Skip if this outfit has no items, as an optimization; or if we don't
// have the species/color ID loaded yet because we're waiting on the // have the species/color ID loaded yet because we're waiting on the
@ -453,7 +448,7 @@ function getOutfitStateFromOutfitData(outfit) {
} }
function findItemConflicts(itemIdToAdd, state, apolloClient) { function findItemConflicts(itemIdToAdd, state, apolloClient) {
const { wornItemIds, speciesId, colorId, altStyleId } = state; const { wornItemIds, speciesId, colorId } = state;
const { items } = apolloClient.readQuery({ const { items } = apolloClient.readQuery({
query: gql` query: gql`
@ -461,15 +456,10 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) {
$itemIds: [ID!]! $itemIds: [ID!]!
$speciesId: ID! $speciesId: ID!
$colorId: ID! $colorId: ID!
$altStyleId: ID
) { ) {
items(ids: $itemIds) { items(ids: $itemIds) {
id id
appearanceOn( appearanceOn(speciesId: $speciesId, colorId: $colorId) {
speciesId: $speciesId
colorId: $colorId
altStyleId: $altStyleId
) {
layers { layers {
zone { zone {
id id
@ -487,7 +477,6 @@ function findItemConflicts(itemIdToAdd, state, apolloClient) {
itemIds: [itemIdToAdd, ...wornItemIds], itemIds: [itemIdToAdd, ...wornItemIds],
speciesId, speciesId,
colorId, colorId,
altStyleId,
}, },
}); });
const itemToAdd = items.find((i) => i.id === itemIdToAdd); const itemToAdd = items.find((i) => i.id === itemIdToAdd);

12
app/javascript/wardrobe-2020/WardrobePage/useSearchResults.js
View file

@ -14,7 +14,7 @@ export function useSearchResults(
currentPageNumber, currentPageNumber,
{ skip = false } = {}, { skip = false } = {},
) { ) {
const { speciesId, colorId, altStyleId } = outfitState; const { speciesId, colorId } = outfitState;
// We debounce the search query, so that we don't resend a new query whenever // We debounce the search query, so that we don't resend a new query whenever
// the user types anything. // the user types anything.
@ -56,7 +56,6 @@ export function useSearchResults(
$zoneIds: [ID!]! $zoneIds: [ID!]!
$speciesId: ID! $speciesId: ID!
$colorId: ID! $colorId: ID!
$altStyleId: ID
$offset: Int! $offset: Int!
$perPage: Int! $perPage: Int!
) { ) {
@ -79,11 +78,7 @@ export function useSearchResults(
currentUserOwnsThis currentUserOwnsThis
currentUserWantsThis currentUserWantsThis
appearanceOn( appearanceOn(speciesId: $speciesId, colorId: $colorId) {
speciesId: $speciesId
colorId: $colorId
altStyleId: $altStyleId
) {
# This enables us to quickly show the item when the user clicks it! # This enables us to quickly show the item when the user clicks it!
...ItemAppearanceForOutfitPreview ...ItemAppearanceForOutfitPreview
@ -109,13 +104,12 @@ export function useSearchResults(
{ {
variables: { variables: {
query: debouncedQuery.value, query: debouncedQuery.value,
fitsPet: { speciesId, colorId, altStyleId }, fitsPet: { speciesId, colorId },
itemKind: debouncedQuery.filterToItemKind, itemKind: debouncedQuery.filterToItemKind,
currentUserOwnsOrWants: debouncedQuery.filterToCurrentUserOwnsOrWants, currentUserOwnsOrWants: debouncedQuery.filterToCurrentUserOwnsOrWants,
zoneIds: filterToZoneIds, zoneIds: filterToZoneIds,
speciesId, speciesId,
colorId, colorId,
altStyleId,
offset, offset,
perPage: SEARCH_PER_PAGE, perPage: SEARCH_PER_PAGE,
}, },

23
app/javascript/wardrobe-2020/apolloClient.js
View file

@ -53,26 +53,17 @@ const typePolicies = {
return appearance; return appearance;
} }
const { speciesId, colorId, altStyleId } = args;
console.debug(
"[appearanceOn] seeking cached appearance",
speciesId,
colorId,
altStyleId,
readField("id"),
);
// If this is an alt style, don't try to mess with clever caching.
// (Note that, if it's already in the cache, the first condition will
// catch that! This won't *always* force a fresh load!)
if (altStyleId != null) {
return undefined;
}
// Otherwise, we're going to see if this is a standard color, in which // Otherwise, we're going to see if this is a standard color, in which
// case we can reuse the standard color appearance if we already have // case we can reuse the standard color appearance if we already have
// it! This helps for fast loading when switching between standard // it! This helps for fast loading when switching between standard
// colors. // colors.
const { speciesId, colorId } = args;
console.debug(
"[appearanceOn] seeking cached appearance",
speciesId,
colorId,
readField("id"),
);
const speciesStandardBodyId = readField( const speciesStandardBodyId = readField(
"standardBodyId", "standardBodyId",
toReference({ __typename: "Species", id: speciesId }), toReference({ __typename: "Species", id: speciesId }),

8
app/javascript/wardrobe-2020/components/useOutfitAppearance.js
View file

@ -83,17 +83,12 @@ export default function useOutfitAppearance(outfitState) {
query OutfitItemsAppearance( query OutfitItemsAppearance(
$speciesId: ID! $speciesId: ID!
$colorId: ID! $colorId: ID!
$altStyleId: ID
$wornItemIds: [ID!]! $wornItemIds: [ID!]!
) { ) {
items(ids: $wornItemIds) { items(ids: $wornItemIds) {
id id
name # HACK: This is for HTML5 detection UI in OutfitControls! name # HACK: This is for HTML5 detection UI in OutfitControls!
appearance: appearanceOn( appearance: appearanceOn(speciesId: $speciesId, colorId: $colorId) {
speciesId: $speciesId
colorId: $colorId
altStyleId: $altStyleId
) {
...ItemAppearanceForOutfitPreview ...ItemAppearanceForOutfitPreview
} }
} }
@ -104,7 +99,6 @@ export default function useOutfitAppearance(outfitState) {
variables: { variables: {
speciesId, speciesId,
colorId, colorId,
altStyleId,
wornItemIds, wornItemIds,
}, },
skip: speciesId == null || colorId == null || wornItemIds.length === 0, skip: speciesId == null || colorId == null || wornItemIds.length === 0,