Add html5 badge to new item previews

app/assets/stylesheets/items/_show.sass

@@ -255,6 +255,12 @@ body.items-show
     &:has(species-face-picker-options[inert])
       cursor: wait
 
+  .item-preview-meta-info
+    display: grid
+    grid-template-columns: 1fr auto
+    gap: .5em
+    align-items: center
+
   .item-zones-info
     h3
       display: inline
@@ -280,6 +286,37 @@ body.items-show
       font-style: italic
       text-decoration: underline dotted
 
+  // Many of these styles copied from Impress 2020 and its Chakra UI styles!
+  .item-html5-info
+    display: flex
+    align-items: center
+    border: 1px solid
+    border-radius: .375em
+    padding: 4px 8px
+    min-height: 30px
+    box-sizing: border-box
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
+
+    &[data-status=converted]
+      background: $module-bg-color
+      color: $text-color
+
+      svg:nth-of-type(2)
+        margin-right: -4px // spacing hacks!
+
+    &[data-status=unconverted]
+      background: $warning-bg-color
+      color: #975A16
+      gap: .25em // spacing hacks!
+
+    svg:first-of-type
+      width: 12px
+      height: 12px
+
+    svg:nth-of-type(2)
+      width: 20px
+      height: 20px
+
   #item-preview
     display: flex
     flex-direction: column
@@ -287,7 +324,7 @@ body.items-show
 
     @media (min-width: 600px)
       display: grid
-      grid-template-areas: "viewer faces" "picker zones"
+      grid-template-areas: "viewer faces" "picker meta"
       gap: .5em
 
       outfit-viewer
@@ -303,8 +340,8 @@ body.items-show
         max-height: 350px
         margin: -10px
 
-      .item-zones-info
+      .item-preview-meta-info
-        grid-area: zones
+        grid-area: meta
 
 @keyframes fade-in
   from

app/controllers/items_controller.rb

@@ -93,6 +93,7 @@ class ItemsController < ApplicationController
         @all_appearances = @item.appearances
         @appearances_by_occupied_zone = @item.appearances_by_occupied_zone.
           sort_by { |z, a| z.label }
+        @selected_item_appearance = @preview_outfit.item_appearances.first
 
         @preview_pet_type_options = PetType.where(color: @preview_outfit.color).
           includes(:species).merge(Species.alphabetical)

app/models/item.rb

@@ -508,6 +508,10 @@ class Item < ApplicationRecord
       {item:, body:, swf_assets:}
     end
 
+    def html5?
+      swf_assets.all?(&:html5?)
+    end
+
     def occupied_zone_ids
       swf_assets.map(&:zone_id).uniq.sort
     end

app/models/swf_asset.rb

@@ -236,6 +236,17 @@ class SwfAsset < ApplicationRecord
     self[:known_glitches] = new_known_glitches
   end
 
+  def html5?
+    # NOTE: This is slightly different than how Impress 2020 reasons about
+    #       this; it checks for an SVG or canvas movie. I *think* we did
+    #       this just to keep the API simpler, and this check is more
+    #       correct? But I do wonder if any assets have a manifest but are
+    #       arguably "not converted" because the manifest is just so bad.
+    # NOTE: Just checking `manifest_url` isn't enough, because there *are*
+    #       assets with a `manifest_url` saved but it 404s.
+    manifest.present?
+  end
+
   def restricted_zone_ids
     [].tap do |ids|
       zones_restrict.chars.each_with_index do |bit, index|

app/views/items/show.html.haml

@@ -53,30 +53,57 @@
             item_fits?(@item, pet_type) ? :happy : :sad,
             :face
 
-  .item-zones-info
+  .item-preview-meta-info
-    %section
+    .item-zones-info
-      %h3 Occupies
+      %section
-      - if @appearances_by_occupied_zone.present?
+        %h3 Occupies
-        %ul
+        - if @appearances_by_occupied_zone.present?
-          - @appearances_by_occupied_zone.each do |zone, appearances_in_zone|
+          %ul
-            %li
+            - @appearances_by_occupied_zone.each do |zone, appearances_in_zone|
-              = zone.label
+              %li
-              - if item_zone_partial_fit? appearances_in_zone, @all_appearances
+                = zone.label
-                %span.zone-species-info{
+                - if item_zone_partial_fit? appearances_in_zone, @all_appearances
-                  title: item_zone_species_list(appearances_in_zone)
+                  %span.zone-species-info{
-                }
+                    title: item_zone_species_list(appearances_in_zone)
-                  (#{appearances_in_zone.size} species)
+                  }
-      - else
+                    (#{appearances_in_zone.size} species)
-        %span.no-zones (None)
+        - else
+          %span.no-zones (None)
 
-    %section
+      %section
-      %h3 Restricts
+        %h3 Restricts
-      - if @item.restricted_zones.present?
+        - if @item.restricted_zones.present?
-        %ul
+          %ul
-          - @item.restricted_zones.sort_by(&:label).each do |zone|
+            - @item.restricted_zones.sort_by(&:label).each do |zone|
-            %li= zone.label
+              %li= zone.label
+        - else
+          %span.no-zones (None)
+
+    %div
+      - if @selected_item_appearance.html5?
+        .item-html5-info{
+          "data-status": "converted",
+          "aria-label": "HTML5 supported!",
+          title: "This item is converted to HTML5, and ready to use on Neopets.com!",
+        }
+          %svg{viewBox: "0 0 24 24"}
+            %path{fill: "currentColor", d: "M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"}
+          %svg{viewBox: "0 0 36 36"}
+            %path{fill: "currentColor", d: "M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"}
       - else
-        %span.no-zones (None)
+        .item-html5-info{
+          "data-status": "unconverted",
+          "aria-label": "HTML5 not supported",
+          title: "This item isn't converted to HTML5 yet, so it might not appear in " +
+                "Neopets.com customization yet. Once it's ready, it could look a " +
+                "bit different than our temporary preview here. It might even be " +
+                "animated!"
+        }
+          %svg{viewBox: "0 0 24 24"}
+            %path{fill: "currentColor", d: "M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"}
+          %svg{viewBox: "0 0 36 36"}
+            %path{fill: "currentColor", d: "M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"}
+            %path{fill: "#DD2E44", opacity: "0.75", d: "M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"}
 
 - unless @contributors_with_counts.empty?
   #item-contributors