app/assets/stylesheets/_layout.sass

@@ -74,7 +74,7 @@ $container_width: 800px
 input, button, select, label
   cursor: pointer
 
-input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], input[type=url], select, textarea
+input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
   border-radius: 3px
   background: #fff
   border: 1px solid $input-border-color

app/assets/stylesheets/alt_styles/_index.sass

@@ -0,0 +1,18 @@
+body.alt_styles-index
+	.alt-styles-header
+		margin-top: 1em
+		margin-bottom: .5em
+
+	.alt-styles-list
+		list-style: none
+		display: flex
+		flex-wrap: wrap
+		gap: 1.5em
+
+	.alt-style
+		text-align: center
+		width: 80px
+
+	.alt-style-thumbnail
+		width: 80px
+		height: 80px

app/assets/stylesheets/alt_styles/edit.sass

@@ -1,43 +0,0 @@
-.alt-style-preview
-	width: 300px
-	height: 300px
-	margin: 0 auto
-
-.alt-style-form
-	display: flex
-	flex-direction: column
-	gap: 1em
-	align-items: flex-start
-
-	fieldset
-		width: 100%
-		display: grid
-		grid-template-columns: auto 1fr
-		align-items: center
-		gap: 1em
-
-		> *:nth-child(2n)
-			width: 40rch
-			max-width: 100%
-			box-sizing: border-box
-
-	input[type=url]
-		font-size: .85em
-
-	label
-		font-weight: bold
-
-	.thumbnail-field
-		display: flex
-		align-items: center
-		gap: .25em
-
-		img
-			width: 40px
-			height: 40px
-
-		input
-			flex: 1 0 20ch
-
-	.field_with_errors
-		display: contents

app/assets/stylesheets/alt_styles/index.sass

@@ -1,3 +0,0 @@
-.rainbow-pool-list
-	.name span
-		display: inline-block

app/assets/stylesheets/application.css.sass

@@ -8,6 +8,7 @@
 
 @import partials/jquery.jgrowl
 
+@import alt_styles/index
 @import closet_hangers/index
 @import closet_lists/form
 @import neopets_page_import_tasks/new

app/assets/stylesheets/pet_types/index.sass

@@ -1,6 +1,6 @@
 @import "../partials/clean/constants"
 
-.rainbow-pool-filters
+.pet-filters
 	fieldset
 		display: flex
 		flex-direction: row
@@ -12,20 +12,19 @@
 		display: contents
 		font-weight: bold
 
-	select
+[role=navigation]
-		width: 16ch
+	margin-block: .5em
+	text-align: center
 
-.rainbow-pool-list
+.pet-types
 	list-style-type: none
 	display: flex
 	flex-wrap: wrap
 	justify-content: center
 	gap: .5em
 
-	--preview-base-width: 150px
-
 	> li
-		width: var(--preview-base-width)
+		width: 150px
 		max-width: calc(50% - .25em)
 		min-width: 150px
 		box-sizing: border-box
@@ -41,7 +40,7 @@
 			outline: 1px solid $module-border-color
 			background: $module-bg-color
 
-	.preview
+	img
 		width: 100%
 		height: auto
 		aspect-ratio: 1 / 1
@@ -54,9 +53,3 @@
 		margin: 0 auto
 		position: relative
 		z-index: 1
-
-.rainbow-pool-pagination
-	margin-block: .5em
-	display: flex
-	justify-content: center
-	gap: 1em

app/assets/stylesheets/pet_types/show.sass

@@ -1,7 +1,43 @@
 @import "../partials/clean/constants"
 
-.rainbow-pool-list
+.pet-states
-	--preview-base-width: 200px
+	list-style-type: none
+	display: flex
+	flex-wrap: wrap
+	justify-content: center
+	gap: .5em
+
+	> li
+		width: 200px
+		max-width: calc(50% - .25em)
+		min-width: 150px
+		box-sizing: border-box
+		text-align: center
+
+		a
+			display: block
+			border-radius: 1em
+			padding: .5em
+			background: white
+			text-decoration: none
+			&:hover
+				outline: 1px solid $module-border-color
+				background: $module-bg-color
+
+	outfit-viewer
+		width: 100%
+		height: auto
+		aspect-ratio: 1 / 1
+		position: relative
+		z-index: 0
+		margin-bottom: -1em
+
+	.name
+		background: inherit
+		padding: .25em .5em
+		border-radius: .5em
+		position: relative
+		z-index: 1
 
 	.glitched
 		cursor: help

app/controllers/alt_styles_controller.rb

@@ -1,28 +1,14 @@
 class AltStylesController < ApplicationController
-	before_action :support_staff_only, except: [:index]
-
 	def index
-		@all_alt_styles = AltStyle.includes(:species, :color)
+		@alt_styles = AltStyle.includes(:species, :color, :swf_assets).
+			order(:species_id, :color_id)
 
-		@all_colors = @all_alt_styles.map(&:color).uniq.sort_by(&:name)
+		if params[:species_id]
-		@all_species = @all_alt_styles.map(&:species).uniq.sort_by(&:name)
+			@species = Species.find(params[:species_id])
+			@alt_styles = @alt_styles.merge(@species.alt_styles)
+		end
 
-		@all_series_names = @all_alt_styles.map(&:series_name).uniq.sort
+		# We're going to link to the HTML5 image URL, so make sure we have all the
-		@all_color_names = @all_colors.map(&:human_name)
-		@all_species_names = @all_species.map(&:human_name)
-
-		@series_name = params[:series]
-		@color = find_color
-		@species = find_species
-
-		@alt_styles = @all_alt_styles.includes(:swf_assets).
-			by_creation_date.order(:color_id, :species_id, :series_name).
-			paginate(page: params[:page], per_page: 30)
-		@alt_styles.where!(series_name: @series_name) if @series_name.present?
-		@alt_styles.merge!(@color.alt_styles) if @color
-		@alt_styles.merge!(@species.alt_styles) if @species
-
-		# We're using the HTML5 image for our preview, so make sure we have all the
 		# manifests ready!
 		SwfAsset.preload_manifests @alt_styles.map(&:swf_assets).flatten
 
@@ -44,39 +30,4 @@ class AltStylesController < ApplicationController
 			}
 		end
 	end
-
-	def edit
-		@alt_style = AltStyle.find params[:id]
-	end
-
-	def update
-		@alt_style = AltStyle.find params[:id]
-
-		if @alt_style.update(alt_style_params)
-			flash[:notice] = "\"#{@alt_style.full_name}\" successfully saved!"
-			redirect_to alt_styles_path
-		else
-			render action: :edit, status: :bad_request
-		end
-	end
-
-	protected
-
-	def alt_style_params
-		params.require(:alt_style).permit(:series_name, :thumbnail_url)
-	end
-
-	def find_color
-		if params[:color]
-			Color.find_by(name: params[:color])
-		end
-	end
-
-	def find_species
-		if params[:species_id]
-			Species.find_by(id: params[:species_id])
-		elsif params[:species]
-			Species.find_by(name: params[:species])
-		end
-	end
 end

app/helpers/alt_styles_helper.rb

@@ -1,9 +0,0 @@
-module AltStylesHelper
-	def view_or_edit_alt_style_url(alt_style)
-		if support_staff?
-			edit_alt_style_path alt_style
-		else
-			alt_style.preview_image_url
-		end
-	end
-end

app/helpers/outfits_helper.rb

@@ -70,11 +70,16 @@ module OutfitsHelper
     text_field_tag 'name', nil, options
   end
 
-  def outfit_viewer(outfit=nil, pet_state: nil, **html_options)
+  def outfit_viewer(outfit_or_options)
-    outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present?
+    outfit = if outfit_or_options.is_a? Hash
-    raise "outfit_viewer must have outfit or pet state" if outfit.nil?
+      Outfit.new(outfit_or_options)
+    elsif outfit_or_options.is_a? Outfit
+      outfit_or_options
+    else
+      raise TypeError, "must be an outfit or hash of options to create one"
+    end
 
-    render partial: "outfit_viewer", locals: {outfit:, html_options:}
+    render partial: "outfit_viewer", locals: {outfit:}
   end
 end
 

app/models/alt_style.rb

@@ -9,8 +9,6 @@ class AltStyle < ApplicationRecord
   has_many :contributions, as: :contributed, inverse_of: :contributed
 
   validates :body_id, presence: true
-  validates :series_name, presence: true, allow_nil: true
-  validates :thumbnail_url, presence: true
 
   before_create :infer_series_name
   before_create :infer_thumbnail_url
@@ -20,17 +18,12 @@ class AltStyle < ApplicationRecord
     species = Species.find_by_name!(species_name)
     where(series_name:, color_id: color.id, species_id: species.id)
   }
-  scope :by_creation_date, -> {
-    order("DATE(created_at) DESC")
-  }
 
-  def pet_name
+  def name
     I18n.translate('pet_types.human_name', color_human_name: color.human_name,
                    species_human_name: species.human_name)
   end
 
-  alias_method :name, :pet_name
-
   # If the series_name hasn't yet been set manually by support staff, show the
   # string "<New?>" instead. But it won't be searchable by that string—that is,
   # `fits:<New?>-faerie-draik` intentionally will not work, and the canonical
@@ -49,10 +42,6 @@ class AltStyle < ApplicationRecord
     "#{series_name} #{color.human_name}"
   end
 
-  def full_name
-    "#{series_name} #{name}"
-  end
-
   def preview_image_url
     swf_asset = swf_assets.first
     return nil if swf_asset.nil?

app/models/color.rb

@@ -1,6 +1,5 @@
 class Color < ApplicationRecord
   has_many :pet_types
-  has_many :alt_styles
   
   scope :alphabetical, -> { order(:name) }
   scope :basic, -> { where(basic: true) }

app/views/alt_styles/_alt_style.html.haml

@@ -1,6 +1,4 @@
-%li
+%li.alt-style
-	= link_to view_or_edit_alt_style_url(alt_style) do
+	= link_to alt_style.preview_image_url do
-		= image_tag alt_style.preview_image_url, class: "preview", loading: "lazy"
+		= image_tag alt_style.thumbnail_url, class: 'alt-style-thumbnail'
-		.name
+		.alt-style-name= alt_style.name
-			%span= alt_style.series_name
-			%span= alt_style.pet_name

app/views/alt_styles/edit.html.haml

@@ -1,35 +0,0 @@
-- title @alt_style.full_name
-- use_responsive_design
-
-%ol.breadcrumbs
-	%li= link_to "Alt Styles", alt_styles_path
-	%li
-		= link_to @alt_style.color.human_name,
-		          alt_styles_path(color: @alt_style.color.human_name)
-	%li{"data-relation-to-prev": "sibling"}
-		= link_to @alt_style.species.human_name,
-		          alt_styles_path(species: @alt_style.species.human_name)
-	%li= @alt_style.series_name
-
-= image_tag @alt_style.preview_image_url, class: "alt-style-preview"
-
-= form_with model: @alt_style, class: "alt-style-form" do |f|
-	- if @alt_style.errors.any?
-		%p
-			Could not save:
-			%ul.errors
-				- @alt_style.errors.each do |error|
-					%li= error.full_message
-	%fieldset
-		= f.label :series_name, "Series"
-		= f.text_field :series_name
-		= f.label :thumbnail_url, "Thumbnail"
-		.thumbnail-field
-			- if @alt_style.thumbnail_url?
-				= image_tag @alt_style.thumbnail_url
-			= f.url_field :thumbnail_url
-	= f.submit "Save changes"
-
-- content_for :stylesheets do
-	= stylesheet_link_tag "application/breadcrumbs"
-	= page_stylesheet_link_tag "alt_styles/edit"

app/views/alt_styles/index.html.haml

@@ -1,5 +1,4 @@
 - title "Styling Studio"
-- use_responsive_design
 
 %p
 	Here's all the new NC Pet Styles we have! They're available in the app too,
@@ -14,24 +13,6 @@
 	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,
+- @alt_styles.group_by(&:species).each do |species, species_styles|
-            class: "rainbow-pool-filters" do |f|
+	%h2.alt-styles-header= species.human_name
-	%fieldset
+	%ul.alt-styles-list= render partial: "alt_style", collection: species_styles
-		%legend Filter by:
-		= f.select :series, @all_series_names,
-		           selected: @series_name, include_blank: "Style…"
-		= f.select :color, @all_color_names,
-		           selected: @color&.human_name, include_blank: "Color…"
-		= f.select :species, @all_species_names,
-		           selected: @species&.human_name, include_blank: "Species…"
-		= f.submit "Go"
-
-= will_paginate @alt_styles, class: "rainbow-pool-pagination"
-
-%ul.rainbow-pool-list= render @alt_styles
-
-= will_paginate @alt_styles, class: "rainbow-pool-pagination"
-
-- content_for :stylesheets do
-	= stylesheet_link_tag "application/rainbow-pool"
-	= page_stylesheet_link_tag "alt_styles/index"

app/views/application/_outfit_viewer.html.haml

@@ -1,5 +1,4 @@
-- html_options = {} unless defined? html_options
+%outfit-viewer
-= content_tag "outfit-viewer", **html_options do
   .loading-indicator= render partial: "hanger_spinner"
 
   %label.play-pause-button{title: "Pause/play animations"}

app/views/pet_states/_pet_state.html.haml

@@ -1,6 +1,6 @@
 %li
 	= link_to useful_pet_state_path(pet_state.pet_type, pet_state) do
-		= outfit_viewer pet_state:, class: "preview"
+		= outfit_viewer pet_state:
 		.name= pose_name pet_state.pose
 		- if pet_state.glitched?
 			%span.glitched{title: "Glitched"} 👾

app/views/pet_types/_pet_type.html.haml

@@ -1,4 +1,4 @@
 %li
     = link_to pet_type do
-        = pet_type_image pet_type, :happy, :thumb, class: "preview"
+        = pet_type_image pet_type, :happy, :thumb
         .name= pet_type.human_name

app/views/pet_types/index.html.haml

@@ -1,18 +1,18 @@
 - title "Rainbow Pool"
 - use_responsive_design
 
-= form_with method: :get, class: "rainbow-pool-filters" do |form|
+= form_with method: :get, class: "pet-filters" do |form|
     %fieldset
         %legend Filter by:
         = 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.submit "Go"
 
-= will_paginate @pet_types, class: "rainbow-pool-pagination"
+= will_paginate @pet_types
 
-%ui.rainbow-pool-list= render @pet_types
+%ui.pet-types= render @pet_types
 
-= will_paginate @pet_types, class: "rainbow-pool-pagination"
+= will_paginate @pet_types
 
 - content_for :stylesheets do
-    = stylesheet_link_tag "application/rainbow-pool"
+    = page_stylesheet_link_tag "pet_types/index"

app/views/pet_types/show.html.haml

@@ -13,7 +13,7 @@
 	%li
 		Appearances
 
-%ul.rainbow-pool-list
+%ul.pet-states
 	= render @pet_states[:canonical]
 
 - if @pet_states[:other].present?
@@ -26,7 +26,6 @@
 	= stylesheet_link_tag "application/breadcrumbs"
 	= stylesheet_link_tag "application/hanger-spinner"
 	= stylesheet_link_tag "application/outfit-viewer"
-	= stylesheet_link_tag "application/rainbow-pool"
 	= page_stylesheet_link_tag "pet_types/show"
 
 - content_for :javascripts do

config/routes.rb

@@ -35,7 +35,7 @@ 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 :alt_styles, path: 'alt-styles', only: [:index]
   resources :swf_assets, path: 'swf-assets', only: [:show]
   resources :pet_types, path: 'rainbow-pool', param: "name",
             only: [:index, :show] do