Put the new item preview in a Turbo frame

Nice, gotta say, this is a pretty neat way of making things feel more
app-y! There's some missing pieces here about like, loading state etc,
but the vibes are pretty good, and the implementation was dead-easy!

.solargraph.yml

@@ -0,0 +1,24 @@
+---
+include:
+  - "app/**/*.rb"
+  - "config/**/*.rb"
+exclude:
+  - "spec/**/*"
+  - "test/**/*"
+  - "vendor/**/*"
+  - ".bundle/**/*"
+require:
+  - actioncable
+  - actionmailer
+  - actionpack
+  - actionview
+  - activemodel
+  - activerecord
+  - activesupport
+plugins:
+  - solargraph-rails
+domains: []
+reporters:
+  - require_not_found
+require_paths: []
+max_files: 5000

Gemfile

@@ -85,3 +85,7 @@ gem "sentry-rails", "~> 5.12"
 
 # For tasks that use shell commands.
 gem "shell", "~> 0.8.1"
+
+# For workspace autocomplete.
+gem "solargraph", "~> 0.50.0", group: :development
+gem "solargraph-rails", "~> 1.1", group: :development

Gemfile.lock

@@ -84,6 +84,7 @@ GEM
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     aes_key_wrap (1.1.0)
+    ast (2.4.2)
     async (2.8.1)
       console (~> 1.10)
       fiber-annotation
@@ -111,8 +112,10 @@ GEM
     babel-transpiler (0.7.0)
       babel-source (>= 4.0, < 6)
       execjs (~> 2.0)
+    backport (1.2.0)
     base64 (0.2.0)
     bcrypt (3.1.20)
+    benchmark (0.3.0)
     bigdecimal (3.1.6)
     bindata (2.5.0)
     bindex (0.8.1)
@@ -136,6 +139,7 @@ GEM
       warden (~> 1.2.3)
     devise-encryptable (0.2.0)
       devise (>= 2.1.0)
+    diff-lcs (1.5.1)
     dotenv (2.8.1)
     dotenv-rails (2.8.1)
       dotenv (= 2.8.1)
@@ -187,6 +191,7 @@ GEM
     irb (1.11.2)
       rdoc
       reline (>= 0.4.2)
+    jaro_winkler (1.6.0)
     jsbundling-rails (1.3.0)
       railties (>= 6.0.0)
     json (2.7.1)
@@ -197,6 +202,11 @@ GEM
       bindata
       faraday (~> 2.0)
       faraday-follow_redirects
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    language_server-protocol (3.17.0.3)
     launchy (2.5.2)
       addressable (~> 2.8)
     letter_opener (1.9.0)
@@ -261,6 +271,9 @@ GEM
     openssl (3.2.0)
     orm_adapter (0.5.0)
     parallel (1.24.0)
+    parser (3.3.3.0)
+      ast (~> 2.4.1)
+      racc
     process-metrics (0.2.1)
       console (~> 1.8)
       samovar (~> 2.1)
@@ -332,7 +345,9 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
+    rainbow (3.1.1)
     rake (13.1.0)
+    rbs (2.8.4)
     rdiscount (2.2.7.3)
     rdoc (6.6.2)
       psych (>= 4.0.0)
@@ -344,11 +359,30 @@ GEM
       tilt
     record_tag_helper (1.0.1)
       actionview (>= 5)
+    regexp_parser (2.9.2)
     reline (0.4.2)
       io-console (~> 0.5)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
+    reverse_markdown (2.1.1)
+      nokogiri
+    rexml (3.3.1)
+      strscan
+    rubocop (1.64.1)
+      json (~> 2.3)
+      language_server-protocol (>= 3.17.0)
+      parallel (~> 1.10)
+      parser (>= 3.3.0.2)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 3.0)
+    rubocop-ast (1.31.3)
+      parser (>= 3.3.1.0)
+    ruby-progressbar (1.13.0)
     ruby2_keywords (0.0.5)
     samovar (2.2.0)
       console (~> 1.0)
@@ -374,6 +408,25 @@ GEM
     shell (0.8.1)
       e2mmap
       sync
+    solargraph (0.50.0)
+      backport (~> 1.2)
+      benchmark
+      bundler (~> 2.0)
+      diff-lcs (~> 1.4)
+      e2mmap
+      jaro_winkler (~> 1.5)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.1)
+      parser (~> 3.0)
+      rbs (~> 2.0)
+      reverse_markdown (~> 2.0)
+      rubocop (~> 1.38)
+      thor (~> 1.0)
+      tilt (~> 2.0)
+      yard (~> 0.9, >= 0.9.24)
+    solargraph-rails (1.1.0)
+      activesupport
+      solargraph
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -383,6 +436,7 @@ GEM
       sprockets (>= 3.0.0)
     stackprof (0.2.26)
     stringio (3.1.0)
+    strscan (3.1.0)
     swd (2.0.3)
       activesupport (>= 3)
       attr_required (>= 0.0.5)
@@ -404,6 +458,7 @@ GEM
       railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
+    unicode-display_width (2.5.0)
     uri (0.13.0)
     validate_url (1.0.15)
       activemodel (>= 3.0.0)
@@ -424,6 +479,7 @@ GEM
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     will_paginate (4.0.0)
+    yard (0.9.36)
     zeitwerk (2.6.13)
 
 PLATFORMS
@@ -463,6 +519,8 @@ DEPENDENCIES
   sentry-rails (~> 5.12)
   sentry-ruby (~> 5.12)
   shell (~> 0.8.1)
+  solargraph (~> 0.50.0)
+  solargraph-rails (~> 1.1)
   sprockets (~> 4.2)
   stackprof (~> 0.2.25)
   terser (~> 1.1, >= 1.1.17)

app/assets/stylesheets/items/_show.sass

@@ -37,3 +37,34 @@ body.items-show
   .nc-icon
     height: 16px
     width: 16px
+
+  outfit-viewer
+    position: relative
+    display: block
+    width: 300px
+    height: 300px
+    border: 1px solid $module-border-color
+    border-radius: 1em
+    overflow: hidden
+
+    margin: 0 auto .75em
+
+    outfit-layer
+      display: block
+      position: absolute
+      inset: 0
+
+      img
+        width: 100%
+        height: 100%
+
+  .species-color-picker
+    .error-icon
+      cursor: help
+      margin-right: .25em
+
+    &[data-is-valid="false"]
+      select
+        border-color: $error-border-color
+        color: $error-color
+

app/controllers/items_controller.rb

@@ -82,6 +82,17 @@ class ItemsController < ApplicationController
             group_by_owned
           @current_user_quantities = current_user.item_quantities_for(@item)
         end
+
+        @selected_preview_pet_type = load_selected_preview_pet_type
+        @preview_pet_type = load_preview_pet_type
+
+        @item_layers = @item.appearance_for(
+          @preview_pet_type, swf_asset_includes: [:zone]
+        ).swf_assets
+        @pet_layers = @preview_pet_type.canonical_pet_state.swf_assets.
+          includes(:zone)
+
+        @preview_error = validate_preview
       end
 
       format.gif do
@@ -189,6 +200,38 @@ class ItemsController < ApplicationController
       end
   end
 
+  def load_selected_preview_pet_type
+    color_id = params.dig(:preview, :color_id)
+    species_id = params.dig(:preview, :species_id)
+
+    return load_default_preview_pet_type if color_id.nil? || species_id.nil?
+
+    PetType.find_or_initialize_by(color_id:, species_id:)
+  end
+
+  def load_preview_pet_type
+    if @selected_preview_pet_type.persisted?
+      @selected_preview_pet_type
+    else
+      load_default_preview_pet_type
+    end
+  end
+
+  def load_default_preview_pet_type
+    PetType.find_by_color_id_and_species_id(
+      Color.find_by_name("Blue"),
+      Species.find_by_name("Acara"),
+    )
+  end
+
+  def validate_preview
+    if @selected_preview_pet_type.new_record?
+      :pet_type_does_not_exist
+    elsif @item_layers.empty?
+      :no_item_data
+    end
+  end
+  
   def search_error(e)
     @items = []
     @query = params[:q]

app/helpers/items_helper.rb

@@ -244,5 +244,15 @@ module ItemsHelper
   def item_header_user_lists_form_state
     cookies.fetch("DTIItemPageUserListsFormState", "closed")
   end
+
+  def outfit_viewer_layers(swf_assets)
+    swf_assets.map { |a| outfit_viewer_layer(a) }.join("\n").html_safe
+  end
+
+  def outfit_viewer_layer(swf_asset)
+    content_tag "outfit-layer", style: "z-index: #{swf_asset.zone.depth}" do
+      image_tag swf_asset.image_url, alt: ""
+    end
+  end
 end
 

app/javascript/item-page.js

@@ -1,15 +1,2 @@
-import React from "react";
-import ReactDOM from "react-dom";
-
-import { AppProvider, ItemPageOutfitPreview } from "./wardrobe-2020";
-
-const rootNode = document.querySelector("#outfit-preview-root");
-const itemId = rootNode.getAttribute("data-item-id");
-// TODO: Use the new React 18 APIs instead!
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(
-  <AppProvider>
-    <ItemPageOutfitPreview itemId={itemId} />
-  </AppProvider>,
-  rootNode,
-);
+// eslint-disable-next-line no-console
+console.log("OwO!");

app/models/item.rb

@@ -595,6 +595,10 @@ class Item < ApplicationRecord
     end
   end
 
+  def appearance_for(target, ...)
+    Item.appearances_for([id], target, ...)[id]
+  end
+
   # Given a list of item IDs, return how they look on the given target (either
   # a pet type or an alt style).
   def self.appearances_for(item_ids, target, swf_asset_includes: [])

app/views/items/show.html.haml

@@ -13,7 +13,27 @@
     how we handle zones. Until then, these items will be <em>very</em> buggy,
     sorry!
 
-#outfit-preview-root{'data-item-id': @item.id}
+= turbo_frame_tag "item-preview" do
+  %outfit-viewer
+    %outfit-pet-appearance
+      = outfit_viewer_layers @pet_layers
+    %outfit-item-appearance
+      = outfit_viewer_layers @item_layers
+
+  = form_for item_path(@item), method: :get, class: "species-color-picker",
+    data: {"is-valid": @preview_error.nil?} do |f|
+    - if @preview_error == :pet_type_does_not_exist
+      %span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
+    - elsif @preview_error == :no_item_data
+      %span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
+
+    = select_tag "preview[color_id]",
+      options_from_collection_for_select(Color.funny.alphabetical,
+        "id", "human_name", @selected_preview_pet_type.color_id)
+    = select_tag "preview[species_id]",
+      options_from_collection_for_select(Species.alphabetical,
+        "id", "human_name", @selected_preview_pet_type.species_id)
+    = submit_tag "Go", name: nil
 
 - unless @contributors_with_counts.empty?
   #item-contributors

bin/bundle

@@ -1,3 +1,109 @@
 #!/usr/bin/env ruby
-ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
-load Gem.bin_path('bundler', 'bundle')
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'bundle' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "rubygems"
+
+m = Module.new do
+  module_function
+
+  def invoked_as_script?
+    File.expand_path($0) == File.expand_path(__FILE__)
+  end
+
+  def env_var_version
+    ENV["BUNDLER_VERSION"]
+  end
+
+  def cli_arg_version
+    return unless invoked_as_script? # don't want to hijack other binstubs
+    return unless "update".start_with?(ARGV.first || " ") # must be running `bundle update`
+    bundler_version = nil
+    update_index = nil
+    ARGV.each_with_index do |a, i|
+      if update_index && update_index.succ == i && a.match?(Gem::Version::ANCHORED_VERSION_PATTERN)
+        bundler_version = a
+      end
+      next unless a =~ /\A--bundler(?:[= ](#{Gem::Version::VERSION_PATTERN}))?\z/
+      bundler_version = $1
+      update_index = i
+    end
+    bundler_version
+  end
+
+  def gemfile
+    gemfile = ENV["BUNDLE_GEMFILE"]
+    return gemfile if gemfile && !gemfile.empty?
+
+    File.expand_path("../Gemfile", __dir__)
+  end
+
+  def lockfile
+    lockfile =
+      case File.basename(gemfile)
+      when "gems.rb" then gemfile.sub(/\.rb$/, ".locked")
+      else "#{gemfile}.lock"
+      end
+    File.expand_path(lockfile)
+  end
+
+  def lockfile_version
+    return unless File.file?(lockfile)
+    lockfile_contents = File.read(lockfile)
+    return unless lockfile_contents =~ /\n\nBUNDLED WITH\n\s{2,}(#{Gem::Version::VERSION_PATTERN})\n/
+    Regexp.last_match(1)
+  end
+
+  def bundler_requirement
+    @bundler_requirement ||=
+      env_var_version ||
+      cli_arg_version ||
+      bundler_requirement_for(lockfile_version)
+  end
+
+  def bundler_requirement_for(version)
+    return "#{Gem::Requirement.default}.a" unless version
+
+    bundler_gem_version = Gem::Version.new(version)
+
+    bundler_gem_version.approximate_recommendation
+  end
+
+  def load_bundler!
+    ENV["BUNDLE_GEMFILE"] ||= gemfile
+
+    activate_bundler
+  end
+
+  def activate_bundler
+    gem_error = activation_error_handling do
+      gem "bundler", bundler_requirement
+    end
+    return if gem_error.nil?
+    require_error = activation_error_handling do
+      require "bundler/version"
+    end
+    return if require_error.nil? && Gem::Requirement.new(bundler_requirement).satisfied_by?(Gem::Version.new(Bundler::VERSION))
+    warn "Activating bundler (#{bundler_requirement}) failed:\n#{gem_error.message}\n\nTo install the version of bundler this project requires, run `gem install bundler -v '#{bundler_requirement}'`"
+    exit 42
+  end
+
+  def activation_error_handling
+    yield
+    nil
+  rescue StandardError, LoadError => e
+    e
+  end
+end
+
+m.load_bundler!
+
+if m.invoked_as_script?
+  load Gem.bin_path("bundler", "bundle")
+end

bin/solargraph

@@ -0,0 +1,27 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'solargraph' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__)
+
+bundle_binstub = File.expand_path("bundle", __dir__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300).include?("This file was generated by Bundler")
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("solargraph", "solargraph")