Better alt styles page layout

I had tested this with less variety in the list of styles, now that I'm
seeing it live I realize we need more consistency and more space!

app/assets/stylesheets/alt_styles/_index.sass

@@ -0,0 +1,11 @@
+body.alt_styles-index
+	.alt-styles-list
+		list-style: none
+		display: flex
+		justify-content: center
+		flex-wrap: wrap
+		gap: 1.5em
+
+	.alt-style
+		text-align: center
+		width: 80px

app/assets/stylesheets/application.css.sass

@@ -7,6 +7,7 @@
 
 @import partials/jquery.jgrowl
 
+@import alt_styles/index
 @import campaigns/show
 @import closet_hangers/index
 @import closet_hangers/petpage

app/controllers/alt_styles_controller.rb

@@ -0,0 +1,6 @@
+class AltStylesController < ApplicationController
+	def index
+		@alt_styles = AltStyle.includes(:species, :color, :swf_assets).
+			order(:species_id, :color_id).all
+	end
+end

app/helpers/alt_styles_helper.rb

@@ -0,0 +1,2 @@
+module AltStylesHelper
+end

app/helpers/contribution_helper.rb

@@ -43,13 +43,7 @@ module ContributionHelper
     span = content_tag(:span, alt_style.name, class: 'contributed-name')
     output = translate("contributions.contributed_description.main.alt_style_html",
                        alt_style_name: span)
-    # HACK: Just assume this is a Nostalgic Alt Style, and that the thumbnail
+    output << image_tag(alt_style.thumbnail_url) if show_image
-    # is named reliably!
-    if show_image
-      thumbnail_url = "https://images.neopets.com/items/nostalgic_" +
-        "#{alt_style.color.name.downcase}_#{alt_style.species.name.downcase}.gif"
-      output << image_tag(thumbnail_url)
-    end
     output
   end
   

app/models/alt_style.rb

@@ -11,6 +11,28 @@ class AltStyle < ApplicationRecord
                    species_human_name: species.human_name)
   end
 
+  def thumbnail_url
+    # HACK: Just assume this is a Nostalgic Alt Style, and that the thumbnail
+    # is named reliably!
+    "https://images.neopets.com/items/nostalgic_" +
+      "#{color.name.downcase}_#{species.name.downcase}.gif"
+  end
+
+  MANIFEST_PATTERN = %r{^https://images.neopets.com/(?<prefix>.+)/(?<id>[0-9]+)(?<hash_part>_[^/]+)?/manifest\.json}
+  def preview_image_url
+    swf_asset = swf_assets.first
+    return nil if swf_asset.nil?
+
+    # HACK: Just assuming all of these were well-formed by the same process,
+    # and infer the image URL from the manifest URL! But strictly speaking we
+    # should be reading the manifest to check!
+    match = swf_asset.manifest_url.match(MANIFEST_PATTERN)
+    return nil if match.nil?
+    
+    "https://images.neopets.com/#{match[:prefix]}/" +
+      "#{match[:id]}#{match[:hash_part]}/#{match[:id]}.png"
+  end
+
   def biology=(biology)
     # TODO: This is very similar to what `PetState` does, but like… much much
     # more compact? Idk if I'm missing something, or if I was just that much
@@ -19,4 +41,11 @@ class AltStyle < ApplicationRecord
       SwfAsset.from_biology_data(self.body_id, asset_data)
     end
   end
+
+  # For convenience in the console!
+  def self.find_by_name(color_name, species_name)
+    color = Color.find_by_name(color_name)
+    species = Species.find_by_name(species_name)
+    where(color_id: color, species_id: species).first
+  end
 end

app/models/pet.rb

@@ -37,20 +37,35 @@ class Pet < ApplicationRecord
     raise UnexpectedDataFormat unless pet_data[:color_id]
     raise UnexpectedDataFormat unless pet_data[:body_id]
 
+    has_alt_style = pet_data[:alt_style].present?
+
     self.pet_type = PetType.find_or_initialize_by(
       species_id: pet_data[:species_id].to_i,
       color_id: pet_data[:color_id].to_i
     )
-    self.pet_type.body_id = pet_data[:body_id]
     self.pet_type.origin_pet = self
 
-    pet_state_biology = pet_data[:alt_style] ?
+    # With an alt style, `body_id` in the biology data refers to the body ID of
-      pet_data[:original_biology] : pet_data[:biology_by_zone]
+    # the *alt* style, not the usual pet type. (We have `original_biology` for
+    # *some* of the pet type's situation, but not it's body ID!)
+    #
+    # So, in the alt style case, don't update `body_id` - but if this is our
+    # first time seeing this pet type and it doesn't *have* a `body_id` yet,
+    # let's not be creating it without one. We'll need to model it without the
+    # alt style first. (I don't bother with a clear error message though 😅)
+    self.pet_type.body_id = pet_data[:body_id] unless has_alt_style
+    if self.pet_type.body_id.nil?
+      raise UnexpectedDataFormat,
+        "can't process alt style on first occurrence of pet type"
+    end
+
+    pet_state_biology = has_alt_style ? pet_data[:original_biology] :
+      pet_data[:biology_by_zone]
     raise UnexpectedDataFormat if pet_state_biology.empty?
     pet_state_biology[0] = nil # remove effects if present
     @pet_state = self.pet_type.add_pet_state_from_biology! pet_state_biology
 
-    if pet_data[:alt_style]
+    if has_alt_style
       raise UnexpectedDataFormat unless pet_data[:alt_color]
       raise UnexpectedDataFormat if pet_data[:biology_by_zone].empty?
 

app/views/alt_styles/_alt_style.html.haml

@@ -0,0 +1,4 @@
+%li.alt-style
+	= link_to alt_style.preview_image_url do
+		= image_tag alt_style.thumbnail_url, class: 'alt-style-thumbnail'
+		.alt-style-name= alt_style.name

app/views/alt_styles/index.html.haml

@@ -0,0 +1,11 @@
+- title "Styling Studio"
+
+%p
+	We're getting set up with the new NC Pet Styles! They're not ready in the app
+	yet, but here's what we have so far!
+
+%p
+	If you have one we don't, please model it by entering your pet's name on the
+	homepage! Thank you! 💖
+
+%ul.alt-styles-list= render partial: "alt_style", collection: @alt_styles

app/views/outfits/new.html.haml

@@ -4,10 +4,10 @@
 
 .notice
   %strong Happy NC UC day!
-  We're still working on Alt Styles support, but other pets can be loaded as
+  We're working on Styling Studio support,
-  usual!
+  = link_to("here's what we have so far", alt_styles_path) + "!"
   %br
-  Excited to have them for you soon!
+  Thank you for helping us model the new styles, we appreciate it lots!!! 💖
 
 %p#pet-not-found.alert= t 'pets.load.not_found'
 

config/routes.rb

@@ -35,6 +35,7 @@ OpenneoImpressItems::Application.routes.draw do
   resources :colors, only: [] do
     resources :pet_types, only: [:index]
   end
+  resources :alt_styles, path: 'alt-styles', only: [:index]
 
   # Loading and modeling pets!
   post '/pets/load' => 'pets#load', :as => :load_pet