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

SpeciesColorPicker docs

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-04-26 01:44:26 -07:00
parent 864e275769
commit 821aa7f663
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app/SpeciesColorPicker.js
View file

@ -5,6 +5,12 @@ import { Box, Flex, Select, Text, useToast } from "@chakra-ui/core";
import { Delay } from "./util"; import { Delay } from "./util";
/**
* SpeciesColorPicker lets the user pick the species/color of their pet.
*
* It preloads all species, colors, and valid species/color pairs; and then
* ensures that the outfit is always in a valid state.
*/
function SpeciesColorPicker({ function SpeciesColorPicker({
outfitState, outfitState,
dispatchToOutfit, dispatchToOutfit,
@ -39,6 +45,8 @@ function SpeciesColorPicker({
allColors.sort((a, b) => a.name.localeCompare(b.name)); allColors.sort((a, b) => a.name.localeCompare(b.name));
const allSpecies = (data && [...data.allSpecies]) || []; const allSpecies = (data && [...data.allSpecies]) || [];
allSpecies.sort((a, b) => a.name.localeCompare(b.name)); allSpecies.sort((a, b) => a.name.localeCompare(b.name));
// Build a large Set where we can quickly look up species/color pairs!
const allValidSpeciesColorPairs = React.useMemo( const allValidSpeciesColorPairs = React.useMemo(
() => () =>
new Set( new Set(
@ -67,6 +75,8 @@ function SpeciesColorPicker({
); );
} }
// When the color changes, check if the new pair is valid, and update the
// outfit if so!
const onChangeColor = (e) => { const onChangeColor = (e) => {
const speciesId = outfitState.speciesId; const speciesId = outfitState.speciesId;
const colorId = e.target.value; const colorId = e.target.value;
@ -83,6 +93,8 @@ function SpeciesColorPicker({
} }
}; };
// When the species changes, check if the new pair is valid, and update the
// outfit if so!
const onChangeSpecies = (e) => { const onChangeSpecies = (e) => {
const colorId = outfitState.colorId; const colorId = outfitState.colorId;
const speciesId = e.target.value; const speciesId = e.target.value;