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

@@ -23,11 +23,14 @@
 		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
 
 	.glitched
 		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