Show alt style name in the pose picker button when selected

To help with space, I'm just showing the word "Nostalgic" (or "???" if
it's from a series we don't recognize, this is hardcoded by ID), and
trusting that from context it will be obvious that it's the "Nostalgic
Faerie" case or whatever. (Moreover, in both the button and the select
we're omitting the species name, by similar reasoning!)

Note that this _still_ doesn't actually apply the style to the outfit
whatsoever; this is all just local state as we're continuing to play
with UI concepts. Actually applying it is probably next though! (Though
there's a couple more UI things I want to do, like some affordances to
clarify that a Style is applied and that Expression changes won't work.)

app/controllers/alt_styles_controller.rb

@@ -12,7 +12,7 @@ class AltStylesController < ApplicationController
 			format.html { render }
 			format.json {
 				render json: @alt_styles.as_json(
-					methods: [:adjective_name, :thumbnail_url],
+					methods: [:series_name, :adjective_name, :thumbnail_url],
 				)
 			}
 		end

app/javascript/wardrobe-2020/WardrobePage/PosePicker.js

@@ -87,6 +87,9 @@ function PosePicker({
   const poseInfos = posesQuery.poseInfos;
   const altStyles = altStylesQuery.data ?? [];
 
+  const [styleId, setStyleId] = React.useState(null);
+  const altStyle = altStyles.find((s) => s.id === styleId);
+
   const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
 
   // Resize the Popover when we toggle support mode, because it probably will
@@ -174,6 +177,7 @@ function PosePicker({
           <PopoverTrigger>
             <PosePickerButton
               pose={pose}
+              altStyle={altStyle}
               isOpen={isOpen}
               loading={loading}
               {...props}
@@ -234,7 +238,9 @@ function PosePicker({
                   </TabPanel>
                   <TabPanel paddingX="4" paddingY="0">
                     <StyleSelect
+                      selectedStyleId={styleId}
                       altStyles={altStyles}
+                      onChange={setStyleId}
                       initialFocusRef={initialFocusRef}
                     />
                     <StyleExplanation />
@@ -250,9 +256,12 @@ function PosePicker({
   );
 }
 
-function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
+function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
   const theme = useTheme();
 
+  const icon = altStyle != null ? twemojiSunglasses : getIcon(pose);
+  const label = altStyle != null ? altStyle.seriesName : getLabel(pose);
+
   return (
     <ClassNames>
       {({ css, cx }) => (
@@ -300,9 +309,9 @@ function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
           {...props}
           ref={ref}
         >
-          <EmojiImage src={getIcon(pose)} alt="Style" />
+          <EmojiImage src={icon} alt="Style" />
           <Box width=".5em" />
-          {getLabel(pose)}
+          {label}
           <Box width=".5em" />
           <ChevronDownIcon />
         </Button>
@@ -586,9 +595,12 @@ function PosePickerEmptyExplanation() {
   );
 }
 
-function StyleSelect({ altStyles, initialFocusRef }) {
+function StyleSelect({
-  const [selectedStyleId, setSelectedStyleId] = React.useState(null);
+  selectedStyleId,
-
+  altStyles,
+  onChange,
+  initialFocusRef,
+}) {
   const defaultStyle = { id: null, adjectiveName: "Default" };
 
   const styles = [defaultStyle, ...altStyles];
@@ -607,7 +619,7 @@ function StyleSelect({ altStyles, initialFocusRef }) {
           key={altStyle.id}
           altStyle={altStyle}
           checked={selectedStyleId === altStyle.id}
-          onChange={setSelectedStyleId}
+          onChange={onChange}
           inputRef={selectedStyleId === altStyle.id ? initialFocusRef : null}
         />
       ))}

app/javascript/wardrobe-2020/images/twemoji/paintbrush.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#3B88C3" d="M14.57 27.673c2.814-1.692 6.635-3.807 9.899-7.071 7.03-7.029 12.729-16.97 11.314-18.385C34.369.803 24.428 6.502 17.398 13.531c-3.265 3.265-5.379 7.085-7.071 9.899l4.243 4.243z"/><path fill="#C1694F" d="M.428 34.744s7.071 1.414 12.021-3.536c2.121-2.121 2.121-4.949 2.121-4.949l-2.829-2.829s-3.535.708-4.95 2.122c-1.414 1.414-2.518 4.232-2.888 5.598-.676 2.502-3.475 3.594-3.475 3.594z"/><path fill="#CCD6DD" d="M17.882 25.328l-5.168-5.168c-.391-.391-.958-.326-1.27.145l-1.123 1.705c-.311.471-.271 1.142.087 1.501l4.122 4.123c.358.358 1.03.397 1.501.087l1.705-1.124c.472-.311.536-.878.146-1.269z"/><path fill="#A0041E" d="M11.229 32.26c-1.191.769-1.826.128-1.609-.609.221-.751-.12-1.648-1.237-1.414-1.117.233-1.856-.354-1.503-1.767.348-1.393-1.085-1.863-1.754-.435-.582 1.16-1.017 2.359-1.222 3.115-.677 2.503-3.476 3.595-3.476 3.595s5.988 1.184 10.801-2.485z"/></svg>

app/javascript/wardrobe-2020/loaders/alt-styles.js

@@ -32,6 +32,7 @@ function normalizeAltStyle(altStyleData) {
 		speciesId: altStyleData.species_id,
 		colorId: altStyleData.color_id,
 		bodyId: altStyleData.body_id,
+		seriesName: altStyleData.series_name,
 		adjectiveName: altStyleData.adjective_name,
 		thumbnailUrl: altStyleData.thumbnail_url,
 	};

app/models/alt_style.rb

@@ -6,13 +6,25 @@ class AltStyle < ApplicationRecord
   has_many :swf_assets, through: :parent_swf_asset_relationships
   has_many :contributions, as: :contributed, inverse_of: :contributed
 
+  SERIES_ID_RANGES = {
+    nostalgic: (87249..87503)
+  }
+
   def name
     I18n.translate('pet_types.human_name', color_human_name: color.human_name,
                    species_human_name: species.human_name)
   end
 
+  def series_name
+    if SERIES_ID_RANGES[:nostalgic].include?(id)
+      "Nostalgic"
+    else
+      "???"
+    end
+  end
+
   def adjective_name
-    "Nostalgic #{color.human_name}"
+    "#{series_name} #{color.human_name}"
   end
 
   def thumbnail_url