Add Rainbow Pool homepage, with basic filter form

app/assets/stylesheets/pet_types/index.sass

@@ -0,0 +1,32 @@
+.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
+
+	img
+		width: 100%
+		height: auto
+		aspect-ratio: 1 / 1
+		position: relative
+		z-index: -1
+		margin-bottom: -1em
+
+	.name
+		background: white
+		padding: .25em .5em
+		border-radius: .5em
+		margin: 0 auto

app/assets/stylesheets/pet_types/show.sass

@@ -1,33 +1,36 @@
 @import "../partials/clean/constants"
 
 .pet-states
-    list-style-type: none
+	list-style-type: none
-    display: flex
+	display: flex
-    flex-wrap: wrap
+	flex-wrap: wrap
-    justify-content: center
+	justify-content: center
-    gap: .5em
+	gap: .5em
 
-    > li
+	> li
-        width: 200px
+		width: 200px
-        max-width: calc(50% - .25em)
+		max-width: calc(50% - .25em)
-        min-width: 150px
+		min-width: 150px
-        box-sizing: border-box
+		box-sizing: border-box
-        text-align: center
+		text-align: center
 
-        a
+		a
-            display: block
+			display: block
-            border-radius: 1em
+			border-radius: 1em
-            padding: .5em
+			padding: .5em
 
-    outfit-viewer
+	outfit-viewer
-        width: 100%
+		width: 100%
-        height: auto
+		height: auto
-        aspect-ratio: 1 / 1
+		aspect-ratio: 1 / 1
-        z-index: -1
+		position: relative
-        margin-bottom: -1em
+		z-index: -1
+		margin-bottom: -1em
 
-    .name
+	.name
-        background: white
+		background: white
+		padding: .25em .5em
+		border-radius: .5em
 
-    .glitched
+	.glitched
-        cursor: help
+		cursor: help

app/controllers/pet_types_controller.rb

@@ -1,4 +1,30 @@
 class PetTypesController < ApplicationController
+	def index
+		@species_names = Species.order(:name).map(&:human_name)
+		@color_names = Color.order(:name).map(&:human_name)
+
+		if params[:species].present?
+			@selected_species = Species.find_by!(name: params[:species])
+			@selected_species_name = @selected_species.human_name
+		end
+		if params[:color].present?
+			@selected_color = Color.find_by!(name: params[:color])
+			@selected_color_name = @selected_color.human_name
+		end
+
+		@pet_types = PetType.
+			includes(:color, :species).
+			order(created_at: :desc).
+			paginate(page: params[:page], per_page: 30)
+
+		if @selected_species
+			@pet_types = @pet_types.where(species_id: @selected_species)
+		end
+		if @selected_color
+			@pet_types = @pet_types.where(color_id: @selected_color)
+		end
+	end
+
 	def show
 		@pet_type = find_pet_type
 

app/views/pet_states/_pet_state.html.haml

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

app/views/pet_types/_pet_type.html.haml

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

app/views/pet_types/index.html.haml

@@ -0,0 +1,16 @@
+- title "Rainbow Pool"
+- use_responsive_design
+
+= form_with method: :get do |form|
+    = 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 "Filter"
+
+= will_paginate @pet_types
+
+%ui.pet-types= render @pet_types
+
+= will_paginate @pet_types
+
+- content_for :stylesheets do
+    = stylesheet_link_tag "pet_types/index"

config/routes.rb

@@ -37,7 +37,8 @@ OpenneoImpressItems::Application.routes.draw do
   end
   resources :alt_styles, path: 'alt-styles', only: [:index]
   resources :swf_assets, path: 'swf-assets', only: [:show]
-  resources :pet_types, path: 'rainbow-pool', only: [:show], param: "name" do
+  resources :pet_types, path: 'rainbow-pool', param: "name",
+            only: [:index, :show] do
     resources :pet_states, only: [:show], path: "forms"
   end