[WIP] Species face compatibility UI

Now, when a species isn't compatible with an item, we gray out and sadden the pet, like on Classic DTI!

For now, I've hardcoded only the Zafara body ID to match. Let's do server connection next!
This commit is contained in:
Emi Matchu 2021-02-02 14:47:17 -08:00
parent b0a8b41c80
commit 93c00c5e79

View file

@ -687,8 +687,8 @@ function ItemPageOutfitPreview({ itemId }) {
</Box> </Box>
</VStack> </VStack>
<SpeciesFacesPicker <SpeciesFacesPicker
itemId={itemId}
selectedSpeciesId={petState.speciesId} selectedSpeciesId={petState.speciesId}
compatibleBodyIds={["180"]}
onChange={({ speciesId, colorId }) => onChange={({ speciesId, colorId }) =>
setPetState({ setPetState({
speciesId, speciesId,
@ -752,34 +752,22 @@ function PlayPauseButton({ isPaused, onClick }) {
); );
} }
function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) { function SpeciesFacesPicker({
const selectedBorderColor = useColorModeValue("green.600", "green.400"); selectedSpeciesId,
const selectedBackgroundColor = useColorModeValue("green.200", "green.600"); compatibleBodyIds,
const focusBorderColor = "blue.400"; onChange,
const focusBackgroundColor = "blue.100"; isLoading,
const [ }) {
selectedBorderColorValue,
selectedBackgroundColorValue,
focusBorderColorValue,
focusBackgroundColorValue,
] = useToken("colors", [
selectedBorderColor,
selectedBackgroundColor,
focusBorderColor,
focusBackgroundColor,
]);
const lgShadow = useToken("shadows", "xl");
const allSpeciesFaces = speciesFaces.sort((a, b) => const allSpeciesFaces = speciesFaces.sort((a, b) =>
a.speciesName.localeCompare(b.speciesName) a.speciesName.localeCompare(b.speciesName)
); );
const focusBorderColorValue = useToken("colors", "blue.100");
return ( return (
<ClassNames>
{({ css }) => (
<Box <Box
_focusWithin={{ _focusWithin={{
boxShadow: `${focusBackgroundColorValue} 0 0 1px 2px`, boxShadow: `${focusBorderColorValue} 0 0 1px 2px`,
}} }}
maxWidth="400px" maxWidth="400px"
boxSizing="content-box" boxSizing="content-box"
@ -796,32 +784,92 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
overflow={{ base: "auto", md: "visible" }} overflow={{ base: "auto", md: "visible" }}
padding={{ base: "8px", md: "0" }} padding={{ base: "8px", md: "0" }}
> >
{allSpeciesFaces.map( {allSpeciesFaces.map((speciesFace) => (
({ speciesId, speciesName, colorId, neopetsImageHash }) => ( <WrapItem key={speciesFace.speciesId}>
<WrapItem <SpeciesFaceOption
key={speciesId} speciesId={speciesFace.speciesId}
as="label" speciesName={speciesFace.speciesName}
cursor={isLoading ? "wait" : "pointer"} colorId={speciesFace.colorId}
position="relative" neopetsImageHash={speciesFace.neopetsImageHash}
> isCompatible={compatibleBodyIds.includes(speciesFace.bodyId)}
isSelected={speciesFace.speciesId === selectedSpeciesId}
onChange={onChange}
isLoading={isLoading}
/>
</WrapItem>
))}
</Wrap>
</Box>
);
}
function SpeciesFaceOption({
speciesId,
speciesName,
colorId,
neopetsImageHash,
isCompatible,
isSelected,
onChange,
isLoading,
}) {
const selectedBorderColor = useColorModeValue("green.600", "green.400");
const selectedBackgroundColor = useColorModeValue("green.200", "green.600");
const focusBorderColor = "blue.400";
const focusBackgroundColor = "blue.100";
const [
selectedBorderColorValue,
selectedBackgroundColorValue,
focusBorderColorValue,
focusBackgroundColorValue,
] = useToken("colors", [
selectedBorderColor,
selectedBackgroundColor,
focusBorderColor,
focusBackgroundColor,
]);
const xlShadow = useToken("shadows", "xl");
const isHappy = isLoading || isCompatible;
const emotionId = isHappy ? "1" : "2";
const tooltipLabel = isCompatible ? (
speciesName
) : (
<div style={{ textAlign: "center" }}>
{speciesName}
<div style={{ fontStyle: "italic", fontSize: "0.75em" }}>
(Not compatible yet)
</div>
</div>
);
const cursor = isLoading ? "wait" : !isCompatible ? "not-allowed" : "pointer";
return (
<ClassNames>
{({ css }) => (
<Tooltip label={tooltipLabel} placement="top" gutter={-12}>
<Box as="label" cursor={cursor}>
<VisuallyHidden <VisuallyHidden
as="input" as="input"
type="radio" type="radio"
aria-label={speciesName} aria-label={speciesName}
name="species-faces-picker" name="species-faces-picker"
value={speciesId} value={speciesId}
checked={speciesId === selectedSpeciesId} checked={isSelected}
disabled={isLoading} disabled={isLoading || !isCompatible}
onChange={() => onChange({ speciesId, colorId })} onChange={() => onChange({ speciesId, colorId })}
/> />
<Box <Box
overflow="hidden" overflow="hidden"
transition="all 0.2s" transition="all 0.2s"
position="relative"
className={css` className={css`
input:checked + & { input:checked + & {
background: ${selectedBackgroundColorValue}; background: ${selectedBackgroundColorValue};
border-radius: 6px; border-radius: 6px;
box-shadow: ${lgShadow}, box-shadow: ${xlShadow},
${selectedBorderColorValue} 0 0 2px 2px; ${selectedBorderColorValue} 0 0 2px 2px;
transform: scale(1.2); transform: scale(1.2);
z-index: 1; z-index: 1;
@ -829,22 +877,21 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
input:focus + & { input:focus + & {
background: ${focusBackgroundColorValue}; background: ${focusBackgroundColorValue};
box-shadow: ${lgShadow}, box-shadow: ${xlShadow}, ${focusBorderColorValue} 0 0 0 3px;
${focusBorderColorValue} 0 0 0 3px;
} }
`} `}
> >
<Box <Box
as="img" as="img"
src={`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/1/1.png`} src={`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png`}
srcSet={ srcSet={
`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/1/1.png 1x, ` + `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png 1x, ` +
`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/1/6.png 2x` `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/6.png 2x`
} }
alt={speciesName} alt={speciesName}
width={50} width={50}
height={50} height={50}
filter="saturate(90%)" filter={isCompatible ? "saturate(90%)" : "saturate(0%)"}
opacity="0.9" opacity="0.9"
transition="all 0.2s" transition="all 0.2s"
className={css` className={css`
@ -855,11 +902,8 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
`} `}
/> />
</Box> </Box>
</WrapItem>
)
)}
</Wrap>
</Box> </Box>
</Tooltip>
)} )}
</ClassNames> </ClassNames>
); );
@ -873,334 +917,389 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
const colors = { BLUE: "8", RED: "61", GREEN: "34", YELLOW: "84" }; const colors = { BLUE: "8", RED: "61", GREEN: "34", YELLOW: "84" };
const speciesFaces = [ const speciesFaces = [
{ {
speciesId: "1",
neopetsImageHash: "obxdjm88",
colorId: colors.GREEN,
speciesName: "Acara", speciesName: "Acara",
speciesId: "1",
colorId: colors.GREEN,
bodyId: "93",
neopetsImageHash: "obxdjm88",
}, },
{ {
speciesId: "2",
neopetsImageHash: "n9ozx4z5",
colorId: colors.BLUE,
speciesName: "Aisha", speciesName: "Aisha",
speciesId: "2",
colorId: colors.BLUE,
bodyId: "106",
neopetsImageHash: "n9ozx4z5",
}, },
{ {
speciesId: "3",
neopetsImageHash: "kfonqhdc",
colorId: colors.YELLOW,
speciesName: "Blumaroo", speciesName: "Blumaroo",
speciesId: "3",
colorId: colors.YELLOW,
bodyId: "47",
neopetsImageHash: "kfonqhdc",
}, },
{ {
speciesId: "4",
neopetsImageHash: "sc2hhvhn",
colorId: colors.YELLOW,
speciesName: "Bori", speciesName: "Bori",
speciesId: "4",
colorId: colors.YELLOW,
bodyId: "84",
neopetsImageHash: "sc2hhvhn",
}, },
{ {
speciesId: "5",
neopetsImageHash: "wqz8xn4t",
colorId: colors.YELLOW,
speciesName: "Bruce", speciesName: "Bruce",
speciesId: "5",
colorId: colors.YELLOW,
bodyId: "146",
neopetsImageHash: "wqz8xn4t",
}, },
{ {
speciesId: "6",
neopetsImageHash: "jc9klfxm",
colorId: colors.YELLOW,
speciesName: "Buzz", speciesName: "Buzz",
speciesId: "6",
colorId: colors.YELLOW,
bodyId: "250",
neopetsImageHash: "jc9klfxm",
}, },
{ {
speciesId: "7",
neopetsImageHash: "4lrb4n3f",
colorId: colors.RED,
speciesName: "Chia", speciesName: "Chia",
speciesId: "7",
colorId: colors.RED,
bodyId: "212",
neopetsImageHash: "4lrb4n3f",
}, },
{ {
speciesId: "8",
neopetsImageHash: "bdml26md",
colorId: colors.YELLOW,
speciesName: "Chomby", speciesName: "Chomby",
speciesId: "8",
colorId: colors.YELLOW,
bodyId: "74",
neopetsImageHash: "bdml26md",
}, },
{ {
speciesId: "9",
neopetsImageHash: "xl6msllv",
colorId: colors.GREEN,
speciesName: "Cybunny", speciesName: "Cybunny",
speciesId: "9",
colorId: colors.GREEN,
bodyId: "94",
neopetsImageHash: "xl6msllv",
}, },
{ {
speciesId: "10",
neopetsImageHash: "bob39shq",
colorId: colors.YELLOW,
speciesName: "Draik", speciesName: "Draik",
speciesId: "10",
colorId: colors.YELLOW,
bodyId: "132",
neopetsImageHash: "bob39shq",
}, },
{ {
speciesId: "11",
neopetsImageHash: "jhhhbrww",
colorId: colors.RED,
speciesName: "Elephante", speciesName: "Elephante",
speciesId: "11",
colorId: colors.RED,
bodyId: "56",
neopetsImageHash: "jhhhbrww",
}, },
{ {
speciesId: "12",
neopetsImageHash: "6kngmhvs",
colorId: colors.RED,
speciesName: "Eyrie", speciesName: "Eyrie",
speciesId: "12",
colorId: colors.RED,
bodyId: "90",
neopetsImageHash: "6kngmhvs",
}, },
{ {
speciesId: "13",
neopetsImageHash: "47vt32x2",
colorId: colors.GREEN,
speciesName: "Flotsam", speciesName: "Flotsam",
speciesId: "13",
colorId: colors.GREEN,
bodyId: "136",
neopetsImageHash: "47vt32x2",
}, },
{ {
speciesId: "14",
neopetsImageHash: "5nrd2lvd",
colorId: colors.YELLOW,
speciesName: "Gelert", speciesName: "Gelert",
speciesId: "14",
colorId: colors.YELLOW,
bodyId: "138",
neopetsImageHash: "5nrd2lvd",
}, },
{ {
speciesId: "15",
neopetsImageHash: "6c275jcg",
colorId: colors.BLUE,
speciesName: "Gnorbu", speciesName: "Gnorbu",
speciesId: "15",
colorId: colors.BLUE,
bodyId: "166",
neopetsImageHash: "6c275jcg",
}, },
{ {
speciesId: "16",
neopetsImageHash: "j7q65fv4",
colorId: colors.BLUE,
speciesName: "Grarrl", speciesName: "Grarrl",
speciesId: "16",
colorId: colors.BLUE,
bodyId: "119",
neopetsImageHash: "j7q65fv4",
}, },
{ {
speciesId: "17",
neopetsImageHash: "5xn4kjf8",
colorId: colors.GREEN,
speciesName: "Grundo", speciesName: "Grundo",
speciesId: "17",
colorId: colors.GREEN,
bodyId: "126",
neopetsImageHash: "5xn4kjf8",
}, },
{ {
speciesId: "18",
neopetsImageHash: "jsfvcqwt",
colorId: colors.RED,
speciesName: "Hissi", speciesName: "Hissi",
speciesId: "18",
colorId: colors.RED,
bodyId: "67",
neopetsImageHash: "jsfvcqwt",
}, },
{ {
speciesId: "19",
neopetsImageHash: "w32r74vo",
colorId: colors.GREEN,
speciesName: "Ixi", speciesName: "Ixi",
speciesId: "19",
colorId: colors.GREEN,
bodyId: "163",
neopetsImageHash: "w32r74vo",
}, },
{ {
speciesId: "20",
neopetsImageHash: "kz43rnld",
colorId: colors.YELLOW,
speciesName: "Jetsam", speciesName: "Jetsam",
speciesId: "20",
colorId: colors.YELLOW,
bodyId: "147",
neopetsImageHash: "kz43rnld",
}, },
{ {
speciesId: "21",
neopetsImageHash: "m267j935",
colorId: colors.GREEN,
speciesName: "Jubjub", speciesName: "Jubjub",
speciesId: "21",
colorId: colors.GREEN,
bodyId: "80",
neopetsImageHash: "m267j935",
}, },
{ {
speciesId: "22",
neopetsImageHash: "4gsrb59g",
colorId: colors.YELLOW,
speciesName: "Kacheek", speciesName: "Kacheek",
speciesId: "22",
colorId: colors.YELLOW,
bodyId: "117",
neopetsImageHash: "4gsrb59g",
}, },
{ {
speciesId: "23",
neopetsImageHash: "ktlxmrtr",
colorId: colors.BLUE,
speciesName: "Kau", speciesName: "Kau",
speciesId: "23",
colorId: colors.BLUE,
bodyId: "201",
neopetsImageHash: "ktlxmrtr",
}, },
{ {
speciesId: "24",
neopetsImageHash: "42j5q3zx",
colorId: colors.GREEN,
speciesName: "Kiko", speciesName: "Kiko",
speciesId: "24",
colorId: colors.GREEN,
bodyId: "51",
neopetsImageHash: "42j5q3zx",
}, },
{ {
speciesId: "25",
neopetsImageHash: "ncfn87wk",
colorId: colors.GREEN,
speciesName: "Koi", speciesName: "Koi",
speciesId: "25",
colorId: colors.GREEN,
bodyId: "208",
neopetsImageHash: "ncfn87wk",
}, },
{ {
speciesId: "26",
neopetsImageHash: "omx9c876",
colorId: colors.RED,
speciesName: "Korbat", speciesName: "Korbat",
speciesId: "26",
colorId: colors.RED,
bodyId: "196",
neopetsImageHash: "omx9c876",
}, },
{ {
speciesId: "27",
neopetsImageHash: "rfsbh59t",
colorId: colors.BLUE,
speciesName: "Kougra", speciesName: "Kougra",
speciesId: "27",
colorId: colors.BLUE,
bodyId: "143",
neopetsImageHash: "rfsbh59t",
}, },
{ {
speciesId: "28",
neopetsImageHash: "hxgsm5d4",
colorId: colors.BLUE,
speciesName: "Krawk", speciesName: "Krawk",
speciesId: "28",
colorId: colors.BLUE,
bodyId: "150",
neopetsImageHash: "hxgsm5d4",
}, },
{ {
speciesId: "29",
neopetsImageHash: "blxmjgbk",
colorId: colors.YELLOW,
speciesName: "Kyrii", speciesName: "Kyrii",
speciesId: "29",
colorId: colors.YELLOW,
bodyId: "175",
neopetsImageHash: "blxmjgbk",
}, },
{ {
speciesId: "30",
neopetsImageHash: "8r94jhfq",
colorId: colors.YELLOW,
speciesName: "Lenny", speciesName: "Lenny",
speciesId: "30",
colorId: colors.YELLOW,
bodyId: "173",
neopetsImageHash: "8r94jhfq",
}, },
{ {
speciesId: "31",
neopetsImageHash: "z42535zh",
colorId: colors.YELLOW,
speciesName: "Lupe", speciesName: "Lupe",
speciesId: "31",
colorId: colors.YELLOW,
bodyId: "199",
neopetsImageHash: "z42535zh",
}, },
{ {
speciesId: "32",
neopetsImageHash: "qgg6z8s7",
colorId: colors.BLUE,
speciesName: "Lutari", speciesName: "Lutari",
speciesId: "32",
colorId: colors.BLUE,
bodyId: "52",
neopetsImageHash: "qgg6z8s7",
}, },
{ {
speciesId: "33",
neopetsImageHash: "kk2nn2jr",
colorId: colors.YELLOW,
speciesName: "Meerca", speciesName: "Meerca",
speciesId: "33",
colorId: colors.YELLOW,
bodyId: "109",
neopetsImageHash: "kk2nn2jr",
}, },
{ {
speciesId: "34",
neopetsImageHash: "jgkoro5z",
colorId: colors.GREEN,
speciesName: "Moehog", speciesName: "Moehog",
speciesId: "34",
colorId: colors.GREEN,
bodyId: "134",
neopetsImageHash: "jgkoro5z",
}, },
{ {
speciesId: "35",
neopetsImageHash: "xwlo9657",
colorId: colors.BLUE,
speciesName: "Mynci", speciesName: "Mynci",
speciesId: "35",
colorId: colors.BLUE,
bodyId: "95",
neopetsImageHash: "xwlo9657",
}, },
{ {
speciesId: "36",
neopetsImageHash: "bx7fho8x",
colorId: colors.BLUE,
speciesName: "Nimmo", speciesName: "Nimmo",
speciesId: "36",
colorId: colors.BLUE,
bodyId: "96",
neopetsImageHash: "bx7fho8x",
}, },
{ {
speciesId: "37",
neopetsImageHash: "rjzmx24v",
colorId: colors.YELLOW,
speciesName: "Ogrin", speciesName: "Ogrin",
speciesId: "37",
colorId: colors.YELLOW,
bodyId: "154",
neopetsImageHash: "rjzmx24v",
}, },
{ {
speciesId: "38",
neopetsImageHash: "kokc52kh",
colorId: colors.RED,
speciesName: "Peophin", speciesName: "Peophin",
speciesId: "38",
colorId: colors.RED,
bodyId: "55",
neopetsImageHash: "kokc52kh",
}, },
{ {
speciesId: "39",
neopetsImageHash: "fw6lvf3c",
colorId: colors.GREEN,
speciesName: "Poogle", speciesName: "Poogle",
}, speciesId: "39",
{
speciesId: "40",
neopetsImageHash: "tjhwbro3",
colorId: colors.RED,
speciesName: "Pteri",
},
{
speciesId: "41",
neopetsImageHash: "jdto7mj4",
colorId: colors.YELLOW,
speciesName: "Quiggle",
},
{
speciesId: "42",
neopetsImageHash: "qsgbm5f6",
colorId: colors.BLUE,
speciesName: "Ruki",
},
{
speciesId: "43",
neopetsImageHash: "hkjoncsx",
colorId: colors.RED,
speciesName: "Scorchio",
},
{
speciesId: "44",
neopetsImageHash: "mmvn4tkg",
colorId: colors.YELLOW,
speciesName: "Shoyru",
},
{
speciesId: "45",
neopetsImageHash: "fc4cxk3t",
colorId: colors.RED,
speciesName: "Skeith",
},
{
speciesId: "46",
neopetsImageHash: "84gvowmj",
colorId: colors.YELLOW,
speciesName: "Techo",
},
{
speciesId: "47",
neopetsImageHash: "jd433863",
colorId: colors.BLUE,
speciesName: "Tonu",
},
{
speciesId: "48",
neopetsImageHash: "q39wn6vq",
colorId: colors.YELLOW,
speciesName: "Tuskaninny",
},
{
speciesId: "49",
neopetsImageHash: "njzvoflw",
colorId: colors.GREEN, colorId: colors.GREEN,
speciesName: "Uni", bodyId: "76",
neopetsImageHash: "fw6lvf3c",
}, },
{ {
speciesId: "50", speciesName: "Pteri",
neopetsImageHash: "rox4mgh5", speciesId: "40",
colorId: colors.RED, colorId: colors.RED,
speciesName: "Usul", bodyId: "156",
neopetsImageHash: "tjhwbro3",
}, },
{ {
speciesId: "51", speciesName: "Quiggle",
neopetsImageHash: "dnr2kj4b", speciesId: "41",
colorId: colors.YELLOW, colorId: colors.YELLOW,
speciesName: "Wocky", bodyId: "78",
neopetsImageHash: "jdto7mj4",
}, },
{ {
speciesId: "52", speciesName: "Ruki",
neopetsImageHash: "tdkqr2b6", speciesId: "42",
colorId: colors.RED,
speciesName: "Xweetok",
},
{
speciesId: "53",
neopetsImageHash: "h95cs547",
colorId: colors.RED,
speciesName: "Yurble",
},
{
speciesId: "54",
neopetsImageHash: "x8c57g2l",
colorId: colors.BLUE, colorId: colors.BLUE,
speciesName: "Zafara", bodyId: "191",
neopetsImageHash: "qsgbm5f6",
}, },
{ {
speciesId: "55", speciesName: "Scorchio",
neopetsImageHash: "xkntzsww", speciesId: "43",
colorId: colors.RED,
bodyId: "187",
neopetsImageHash: "hkjoncsx",
},
{
speciesName: "Shoyru",
speciesId: "44",
colorId: colors.YELLOW, colorId: colors.YELLOW,
bodyId: "46",
neopetsImageHash: "mmvn4tkg",
},
{
speciesName: "Skeith",
speciesId: "45",
colorId: colors.RED,
bodyId: "178",
neopetsImageHash: "fc4cxk3t",
},
{
speciesName: "Techo",
speciesId: "46",
colorId: colors.YELLOW,
bodyId: "100",
neopetsImageHash: "84gvowmj",
},
{
speciesName: "Tonu",
speciesId: "47",
colorId: colors.BLUE,
bodyId: "130",
neopetsImageHash: "jd433863",
},
{
speciesName: "Tuskaninny",
speciesId: "48",
colorId: colors.YELLOW,
bodyId: "188",
neopetsImageHash: "q39wn6vq",
},
{
speciesName: "Uni",
speciesId: "49",
colorId: colors.GREEN,
bodyId: "257",
neopetsImageHash: "njzvoflw",
},
{
speciesName: "Usul",
speciesId: "50",
colorId: colors.RED,
bodyId: "206",
neopetsImageHash: "rox4mgh5",
},
{
speciesName: "Vandagyre", speciesName: "Vandagyre",
speciesId: "55",
colorId: colors.YELLOW,
bodyId: "306",
neopetsImageHash: "xkntzsww",
},
{
speciesName: "Wocky",
speciesId: "51",
colorId: colors.YELLOW,
bodyId: "101",
neopetsImageHash: "dnr2kj4b",
},
{
speciesName: "Xweetok",
speciesId: "52",
colorId: colors.RED,
bodyId: "68",
neopetsImageHash: "tdkqr2b6",
},
{
speciesName: "Yurble",
speciesId: "53",
colorId: colors.RED,
bodyId: "182",
neopetsImageHash: "h95cs547",
},
{
speciesName: "Zafara",
speciesId: "54",
colorId: colors.BLUE,
bodyId: "180",
neopetsImageHash: "x8c57g2l",
}, },
]; ];