Refactor Rainbow Pool to use shared styles for the list elements

The lists of pet types and pet states had very similar styles, which I
mostly copy-pasted. Now that I want to use them for Alt Styles too, I'm
refactoring!

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

@@ -1,3 +1,5 @@
+@import "../partials/clean/constants"
+
 .rainbow-pool-filters
 	fieldset
 		display: flex
@@ -9,3 +11,43 @@
 	legend
 		display: contents
 		font-weight: bold
+
+.rainbow-pool-list
+	list-style-type: none
+	display: flex
+	flex-wrap: wrap
+	justify-content: center
+	gap: .5em
+
+	--preview-base-width: 150px
+
+	> li
+		width: var(--preview-base-width)
+		max-width: calc(50% - .25em)
+		min-width: 150px
+		box-sizing: border-box
+		text-align: center
+
+	a
+		display: block
+		border-radius: 1em
+		padding: .5em
+		text-decoration: none
+		background: white
+		&:hover
+			outline: 1px solid $module-border-color
+			background: $module-bg-color
+
+	.preview
+		width: 100%
+		height: auto
+		aspect-ratio: 1 / 1
+		margin-bottom: -1em
+
+	.name
+		background: inherit
+		padding: .25em .5em
+		border-radius: .5em
+		margin: 0 auto
+		position: relative
+		z-index: 1

app/assets/stylesheets/pet_types/index.sass

@@ -1,43 +1,3 @@
-@import "../partials/clean/constants"
-
 [role=navigation]
 	margin-block: .5em
 	text-align: center
-
-.pet-types
-	list-style-type: none
-	display: flex
-	flex-wrap: wrap
-	justify-content: center
-	gap: .5em
-
-	> li
-		width: 150px
-		max-width: calc(50% - .25em)
-		min-width: 150px
-		box-sizing: border-box
-		text-align: center
-
-	a
-		display: block
-		border-radius: 1em
-		padding: .5em
-		text-decoration: none
-		background: white
-		&:hover
-			outline: 1px solid $module-border-color
-			background: $module-bg-color
-
-	img
-		width: 100%
-		height: auto
-		aspect-ratio: 1 / 1
-		margin-bottom: -1em
-
-	.name
-		background: inherit
-		padding: .25em .5em
-		border-radius: .5em
-		margin: 0 auto
-		position: relative
-		z-index: 1

app/assets/stylesheets/pet_types/show.sass

@@ -1,43 +1,7 @@
 @import "../partials/clean/constants"
 
-.pet-states
+.rainbow-pool-list
-	list-style-type: none
+	--preview-base-width: 200px
-	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/helpers/outfits_helper.rb

@@ -70,16 +70,11 @@ module OutfitsHelper
     text_field_tag 'name', nil, options
   end
 
-  def outfit_viewer(outfit_or_options)
+  def outfit_viewer(outfit=nil, pet_state: nil, **html_options)
-    outfit = if outfit_or_options.is_a? Hash
+    outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present?
-      Outfit.new(outfit_or_options)
+    raise "outfit_viewer must have outfit or pet state" if outfit.nil?
-    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:}
+    render partial: "outfit_viewer", locals: {outfit:, html_options:}
   end
 end
 

app/views/application/_outfit_viewer.html.haml

@@ -1,4 +1,5 @@
-%outfit-viewer
+- html_options = {} unless defined? html_options
+= 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:
+		= outfit_viewer pet_state:, class: "preview"
 		.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
+        = pet_type_image pet_type, :happy, :thumb, class: "preview"
         .name= pet_type.human_name

app/views/pet_types/index.html.haml

@@ -10,7 +10,7 @@
 
 = will_paginate @pet_types
 
-%ui.pet-types= render @pet_types
+%ui.rainbow-pool-list= render @pet_types
 
 = will_paginate @pet_types
 

app/views/pet_types/show.html.haml

@@ -13,7 +13,7 @@
 	%li
 		Appearances
 
-%ul.pet-states
+%ul.rainbow-pool-list
 	= render @pet_states[:canonical]
 
 - if @pet_states[:other].present?
@@ -26,6 +26,7 @@
 	= 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