app/assets/stylesheets/_layout.sass

@@ -83,15 +83,6 @@ input[type=text], input[type=password], input[type=search], input[type=number],
   &:focus, &:active
     color: inherit
 
-select:has(option[value='']:checked)
-  color: #666
-
-option[value='']
-  color: #666
-
-option:not([value=''])
-  color: $text-color
-
 textarea
   font: inherit
 

app/assets/stylesheets/application/rainbow-pool.sass

@@ -1,8 +1,6 @@
 @import "../partials/clean/constants"
 
 .rainbow-pool-filters
-	margin-block: .5em
-
 	fieldset
 		display: flex
 		flex-direction: row
@@ -59,16 +57,9 @@
 
 	.info
 		font-size: .85em
-		p
-			margin-block: .25em
 
 .rainbow-pool-pagination
 	margin-block: .5em
 	display: flex
 	justify-content: center
 	gap: 1em
-
-.rainbow-pool-no-results
-	margin-block: 1em
-	text-align: center
-	font-style: italic

app/assets/stylesheets/pet_states/show.sass

@@ -0,0 +1,5 @@
+outfit-viewer
+	margin: 0 auto
+
+dt
+	cursor: help

app/assets/stylesheets/pet_types/show.sass

@@ -2,7 +2,6 @@
 
 .rainbow-pool-list
 	--preview-base-width: 200px
-	margin-bottom: 2em
 
 	.glitched
 		cursor: help

app/controllers/pet_states_controller.rb

@@ -1,6 +1,9 @@
 class PetStatesController < ApplicationController
 	before_action :find_pet_state
-	before_action :support_staff_only
+	before_action :support_staff_only, except: [:show]
+
+	def show
+	end
 
 	def edit
 	end

app/controllers/pet_types_controller.rb

@@ -13,27 +13,17 @@ class PetTypesController < ApplicationController
 					@selected_color = Color.find_by!(name: params[:color])
 					@selected_color_name = @selected_color.human_name
 				end
-				@selected_order =
-					if @selected_species.present? || @selected_color.present?
-						:alphabetical
-					else
-						:newest
-					end
 
 				@pet_types = PetType.
 					includes(:color, :species, :pet_states).
+					order(created_at: :desc).
 					paginate(page: params[:page], per_page: 30)
 
-				@pet_types.where!(species_id: @selected_species) if @selected_species
+				if @selected_species
-				@pet_types.where!(color_id: @selected_color) if @selected_color
+					@pet_types = @pet_types.where(species_id: @selected_species)
-				if @selected_order == :newest
-					@pet_types.order!(created_at: :desc)
-				elsif @selected_order == :alphabetical
-					@pet_types.merge!(Color.alphabetical).merge!(Species.alphabetical)
 				end
-
+				if @selected_color
-				if @selected_species && @selected_color && @pet_types.size == 1
+					@pet_types = @pet_types.where(color_id: @selected_color)
-					redirect_to @pet_types.first
 				end
 			}
 

app/helpers/alt_styles_helper.rb

@@ -3,11 +3,7 @@ module AltStylesHelper
 		if support_staff?
 			edit_alt_style_path alt_style
 		else
-			wardrobe_path(
+			alt_style.preview_image_url
-				species: alt_style.species_id,
-				color: alt_style.color_id,
-				style: alt_style.id,
-			)
 		end
 	end
 end

app/helpers/pet_states_helper.rb

@@ -26,16 +26,11 @@ module PetStatesHelper
 		POSE_OPTIONS
 	end
 
-	def useful_pet_state_path(pet_type, pet_state)
+	def useful_pet_state_path(...)
 		if support_staff?
-			edit_pet_type_pet_state_path(pet_type, pet_state)
+			edit_pet_type_pet_state_path(...)
 		else
-			wardrobe_path(
+			pet_type_pet_state_path(...)
-				color: pet_type.color_id,
-				species: pet_type.species_id,
-				pose: pet_state.pose,
-				state: pet_state.id,
-			)
 		end
 	end
 end

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

@@ -777,13 +777,8 @@ function StyleExplanation() {
 			opacity="0.7"
 			marginTop="2"
 		>
-			<Box
+			<Box as="a" href="/alt-styles" target="_blank" textDecoration="underline">
-				as="a"
+				Alt Styles
-				href="/rainbow-pool/styles"
-				target="_blank"
-				textDecoration="underline"
-			>
-				Pet Styles
 			</Box>{" "}
 			are NC items that override the pet's appearance via the{" "}
 			<Box
@@ -794,7 +789,7 @@ function StyleExplanation() {
 			>
 				Styling Chamber
 			</Box>
-			. Not all items fit all Pet Styles. The pet's color doesn't have to match.
+			. Not all items fit Alt Style pets. The pet's color doesn't have to match.
 		</Box>
 	);
 }

app/views/alt_styles/index.html.haml

@@ -1,25 +1,18 @@
-- title "NC Pet Styles"
+- title "Styling Studio"
 - use_responsive_design
 
-%ul.breadcrumbs
+%p
-	%li= link_to "Rainbow Pool", pet_types_path
+	Here's all the new NC Pet Styles we have! They're available in the app too,
-	%li Pet Styles
+	by opening the emotion picker and clicking the "Styles" tab.
 
-:markdown
+%p
-	Pet Styles drastically change the appearance of your pet! They're [available
+	If you have an Alt Style we don't, please model it by entering your pet's
-	in the NC Mall][1], or via "NC Trading". They're generally reminiscent of
-	classic Neopets designs from long ago.
-
-	Pet Styles only fit pets of the same species—but the *color* of the pet
-	doesn't matter! A Blue Acara can wear the "Nostalgic Faerie Acara" Pet Style.
-
-	Only some items fit pets wearing Pet Styles: mostly Backgrounds, Foregrounds,
-	and other items that aren't designed to fit a specific body shape.
-
-	If you have an Pet Style we don't, please model it by entering your pet's
 	name on the homepage! Thank you! 💖
 
-	[1]: https://www.neopets.com/mall/stylingstudio/
+%p
+	Also, heads-up: Because our system can only collect "item data" for normal
+	wearable items, there's not a great way for us to get style tokens onto
+	tradelists… this may change someday, but probably not soon, sorry!
 
 = form_with url: alt_styles_path, method: :get,
             class: "rainbow-pool-filters" do |f|
@@ -40,6 +33,5 @@
 = will_paginate @alt_styles, class: "rainbow-pool-pagination"
 
 - content_for :stylesheets do
-	= stylesheet_link_tag "application/breadcrumbs"
 	= stylesheet_link_tag "application/rainbow-pool"
 	= page_stylesheet_link_tag "alt_styles/index"

app/views/layouts/application.html.haml

@@ -73,7 +73,6 @@
             = link_to t('.footer.terms', date: terms_updated_timestamp),
               terms_path
           %li= link_to t('.footer.blog'), "https://blog.openneo.net/"
-          %li= link_to t('modeling_hub'), bulk_pets_path
         
         %div
           #{t('.footer.contact')}:

app/views/outfits/new.html.haml

@@ -72,18 +72,16 @@
       = submit_tag t('.infinite_closet.item_search.submit')
     
   %li
-    %h3= link_to t('rainbow_pool'), pet_types_path
+    %h3= link_to t('modeling_hub'), bulk_pets_path
     = link_to bulk_pets_path do
-      = image_tag 'rainbow_pool.png'
+      = image_tag 'https://images.neopets.com/items/mall_ac_garland_spotlight.gif'
     .section-info
-      %strong= t('.rainbow_pool.tagline')
+      %strong= t '.modeling_hub.tagline'
-      %p= t('.rainbow_pool.description')
+      %p= t '.modeling_hub.description'
-    = form_with url: pet_types_path, method: 'GET' do |form|
+    = form_tag load_pet_path, method: 'POST' do
-      = form.select :color, @colors.map(&:human_name),
+      = pet_name_tag placeholder: t('.modeling_hub.load_pet.placeholder'),
-                    include_blank: t('.rainbow_pool.filters.color')
+        required: true
-      = form.select :species, @species.map(&:human_name),
+      = submit_tag t('.modeling_hub.load_pet.submit')
-                    include_blank: t('.rainbow_pool.filters.species')
-      = form.submit t('.rainbow_pool.filters.submit'), name: nil
 
 - if @latest_contribution  # will be nil for a fresh copy of the site ;P
   #latest-contribution

app/views/pet_states/edit.html.haml

@@ -13,7 +13,9 @@
 	%li
 		= link_to "Appearances", @pet_type
 	%li
-		\##{@pet_state.id}
+		= link_to "\##{@pet_state.id}", [@pet_type, @pet_state]
+	%li
+		Edit
 
 = outfit_viewer pet_state: @pet_state
 

app/views/pet_states/show.html.haml

@@ -0,0 +1,54 @@
+- title "#{@pet_type.human_name}: #{pose_name @pet_state.pose}"
+- use_responsive_design
+
+%ol.breadcrumbs
+	%li
+		= link_to "Rainbow Pool", pet_types_path
+	%li
+		= link_to @pet_type.color.human_name,
+		          pet_types_path(color: @pet_type.color.human_name)
+	%li{"data-relation-to-prev": "sibling"}
+		= link_to @pet_type.species.human_name,
+		          pet_types_path(species: @pet_type.species.human_name)
+	%li
+		= link_to "Appearances", @pet_type
+	%li
+		\##{@pet_state.id}
+	- if support_staff?
+		%li{"data-relation-to-prev": "menu"}
+			= link_to "Edit", edit_pet_type_pet_state_path(@pet_type, @pet_state)
+
+= outfit_viewer pet_state: @pet_state
+
+%dl
+	%dt{title: "Pose usually affects just the eyes and mouth. Neopets " +
+			   "genders these as Male/Female, but I don't like those " +
+	           "terms for like… it's just eyelashes! Sheesh!"}
+		Pose
+	%dd
+		= pose_name @pet_state.pose
+		- if @pet_state.pose == "UNCONVERTED"
+			(Retired, replaced by #{link_to "Alt Styles", alt_styles_path})
+
+	%dt{title: "This is our own internal ID number, nothing to do with " +
+	           "Neopets's official data."}
+		DTI ID
+	%dd= @pet_state.id
+
+	%dt{title: "When we notice a form looks wrong, we mark it Glitched, to " +
+	           "tell our systems to prefer other forms for this pose instead."}
+		Glitched?
+	%dd
+		- if @pet_state.glitched?
+			👾 Yes, it's bad news bonko'd
+		- else
+			✅ Not marked as Glitched
+
+- content_for :stylesheets do
+	= stylesheet_link_tag "application/breadcrumbs"
+	= stylesheet_link_tag "application/hanger-spinner"
+	= stylesheet_link_tag "application/outfit-viewer"
+	= page_stylesheet_link_tag "pet_states/show"
+
+- content_for :javascripts do
+	= javascript_include_tag "outfit-viewer", async: true

app/views/pet_types/_pet_type.html.haml

@@ -1,21 +1,15 @@
 %li
-	= link_to pet_type do
+    = link_to pet_type do
-		= pet_type_image pet_type, :happy, :thumb, class: "preview"
+        = pet_type_image pet_type, :happy, :thumb, class: "preview"
-		.name= pet_type.human_name
+        .name= pet_type.human_name
-		.info
+        - if support_staff?
-			- if support_staff?
+            .info
-				%p
+                - if pet_type.num_unlabeled_states > 0
-					- if pet_type.num_unlabeled_states > 0
+                    %span{title: "Unlabeled states"}
-						%span{title: "Unlabeled states"}
+                        ❓️ #{pet_type.num_unlabeled_states} +
-							❓️ #{pet_type.num_unlabeled_states} +
+                %span{title: "Labeled main poses"}
-					%span{title: "Labeled main poses"}
+                    - if pet_type.fully_labeled?
-						- if pet_type.fully_labeled?
+                        ✅ #{pet_type.num_poses}/#{pet_type.num_poses}
-							✅ #{pet_type.num_poses}/#{pet_type.num_poses}
+                    - else
-						- else
+                        = moon_progress pet_type.num_poses, pet_type.num_poses + pet_type.num_missing_poses
-							= moon_progress pet_type.num_poses, pet_type.num_poses + pet_type.num_missing_poses
+                        #{pet_type.num_poses}/#{pet_type.num_poses + pet_type.num_missing_poses}
-							#{pet_type.num_poses}/#{pet_type.num_poses + pet_type.num_missing_poses}
-			%p
-				Added
-				= time_tag pet_type.created_at,
-					title: pet_type.created_at.to_formatted_s(:long_nst) do
-					= time_with_only_month_if_old pet_type.created_at

app/views/pet_types/index.html.haml

@@ -1,28 +1,18 @@
 - title "Rainbow Pool"
 - use_responsive_design
 
-:markdown
-	Welcome, welcome! These are all the colors and species of pet we've seen
-	before. You can also check out our [NC Pet Styles][1] listings, too!
-
-	If you've seen a new kind of pet, you can enter its name on the homepage to
-	show us! Thank you so much 💖
-
-	[1]: #{alt_styles_path}
-
 = form_with method: :get, class: "rainbow-pool-filters" do |form|
-	%fieldset
+    %fieldset
-		%legend Filter by:
+        %legend Filter by:
-		= form.select :color, @color_names, selected: @selected_color&.human_name, include_blank: "Color…"
+        = form.select :color, @color_names, selected: @selected_color&.human_name, include_blank: "Color…"
-		= form.select :species, @species_names, selected: @selected_species&.human_name, include_blank: "Species…"
+        = form.select :species, @species_names, selected: @selected_species&.human_name, include_blank: "Species…"
-		= form.submit "Go", name: nil
+        = form.submit "Go", name: nil
 
-- if @pet_types.present?
+= will_paginate @pet_types, class: "rainbow-pool-pagination"
-	= will_paginate @pet_types, class: "rainbow-pool-pagination"
+
-	%ui.rainbow-pool-list= render @pet_types
+%ui.rainbow-pool-list= render @pet_types
-	= will_paginate @pet_types, class: "rainbow-pool-pagination"
+
-- else
+= will_paginate @pet_types, class: "rainbow-pool-pagination"
-	%p.rainbow-pool-no-results No matching pets found!
 
 - content_for :stylesheets do
-	= stylesheet_link_tag "application/rainbow-pool"
+    = stylesheet_link_tag "application/rainbow-pool"

app/views/pet_types/show.html.haml

@@ -13,37 +13,14 @@
 	%li
 		Appearances
 
-%p
-	These are the various appearances we've seen for this pet! We've hand-labeled
-	them by their emotion and their gender expression, as best we can.
-
-%p
-	If you've seen another kind of #{@pet_type.human_name}, you can enter its
-	name on the homepage to show us! Thank you 💖
-
-- if @pet_states[:canonical].any?(&:glitched?)
-	%p
-		Some of these appearances are marked as "glitched", but it's still the
-		best sample we have. If someone models an unglitched alternative for us,
-		we'll use that instead!
-
 %ul.rainbow-pool-list
 	= render @pet_states[:canonical]
 
 - if @pet_states[:other].present?
-	%h3 Other appearances
+	%details
-
+		%summary Other
-	%p
+		%ul.rainbow-pool-list
-		These are some other appearances we've seen over time!
+			= render @pet_states[:other]
-		- if @pet_states[:other].any?(&:labeled?)
-			The labeled appearances here don't appear in the outfit editor by
-			default anymore, because they've been replaced by better alternatives.
-		- unless @pet_states[:other].all?(&:labeled?)
-			The unlabeled appearances here <em>might</em> be what we show in the
-			outfit editor later, once we have the chance to label them.
-
-%ul.rainbow-pool-list
-	= render @pet_states[:other]
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/breadcrumbs"

config/initializers/date_formats.rb

@@ -1,5 +1 @@
 Date::DATE_FORMATS[:month_and_day] = "%B %e"
-Time::DATE_FORMATS[:long_nst] = lambda { |time|
-	time.in_time_zone("Pacific Time (US & Canada)").
-		to_formatted_s(:long) + " NST"
-}

config/locales/en-MEEP.yml

@@ -554,6 +554,14 @@ en-MEEP:
         item_search:
           placeholder: meep an item…
           submit: meep
+      modeling_hub:
+        tagline: Found somemeep?
+        description:
+          Meep a pet's meep here and we'll meep a meep of what it's wearing.
+          Thanks so meep!
+        load_pet:
+          placeholder: meep a pet…
+          submit: meep
       latest_contribution:
         header: Contribumeeps
         description_html: "%{user_link} meeped us %{contributed_description}.

config/locales/en.yml

@@ -4,7 +4,6 @@ en:
   your_items: Your Items
   infinite_closet: Infinite Closet
   modeling_hub: Modeling Hub
-  rainbow_pool: Rainbow Pool
   locale_name: English
 
   activerecord:
@@ -33,7 +32,7 @@ en:
 
       footer:
         source_code: Source Code
-        terms: Terms of Use (%{date})
+        terms: Terms of Use (updated %{date})
         blog: Blog
         contact: Contact
         email: Questions, comments, bugs
@@ -678,15 +677,14 @@ en:
         item_search:
           placeholder: find an item…
           submit: search
-      rainbow_pool:
+      modeling_hub:
-        tagline: Explore your options!
+        tagline: Found something?
         description:
-          Browse the colors you can paint your pets, and the "style" options
+          Enter a pet's name here and we'll keep a copy of what it's wearing.
-          from the NC Mall!
+          Thanks so much!
-        filters:
+        load_pet:
-          species: Species…
+          placeholder: model a pet…
-          color: Color…
+          submit: submit
-          submit: Go
       latest_contribution:
         header: Contributions
         description_html: "%{user_link} showed us %{contributed_description}.

config/locales/es.yml

@@ -452,6 +452,12 @@ es:
         item_search:
           placeholder: buscar un objeto...
           submit: buscar
+      modeling_hub:
+        tagline: ¿Has encontrado algo?
+        description: Si no encuentras un objeto y sabes de un pet que lo lleve ¡Escribe su nombre aquí!
+        load_pet:
+          placeholder: desfilar con un pet...
+          submit: enviar
       latest_contribution:
         header: Contribuciones
         description_html: "%{user_link} nos ha mostrado %{contributed_description}. ¡Muchas gracias, %{user_link}!"

config/locales/pt.yml

@@ -448,6 +448,12 @@ pt:
         item_search:
           placeholder: Procurar um item…
           submit: Vai!
+      modeling_hub:
+        tagline: Encontrou alguma coisa?
+        description: Digite o nome do pet aqui e nós vamos copiar o que ele está vestindo. Muito Obrigado.
+        load_pet:
+          placeholder: modele um pet…
+          submit: Enviar
       latest_contribution:
         header: Contribuições
         description_html: "%{user_link} nos mostrou %{contributed_description}. Obrigado, %{user_link}!"

config/routes.rb

@@ -35,14 +35,11 @@ OpenneoImpressItems::Application.routes.draw do
     end
     resources :alt_styles, path: 'alt-styles', only: [:index]
   end
+  resources :alt_styles, path: 'alt-styles', only: [:index, :edit, :update]
   resources :swf_assets, path: 'swf-assets', only: [:show]
-  scope "rainbow-pool" do
-    resources :alt_styles, path: 'alt-styles', only: [:index, :edit, :update],
-      path: 'styles'
-  end
   resources :pet_types, path: 'rainbow-pool', param: "name",
             only: [:index, :show] do
-    resources :pet_states, only: [:edit, :update], path: "appearances"
+    resources :pet_states, only: [:show, :edit, :update], path: "appearances"
   end
 
   # Loading and modeling pets!