diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index 2ae0a2b0..15a44ecc 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/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 - grid-area: zones + .item-preview-meta-info + grid-area: meta @keyframes fade-in from diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb index 649a4aa2..68362600 100644 --- a/app/controllers/items_controller.rb +++ b/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) diff --git a/app/models/item.rb b/app/models/item.rb index 9c81e70d..40abf60c 100644 --- a/app/models/item.rb +++ b/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 diff --git a/app/models/swf_asset.rb b/app/models/swf_asset.rb index f06b955c..14f9f83f 100644 --- a/app/models/swf_asset.rb +++ b/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| diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index e2c778eb..05d0029a 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -53,30 +53,57 @@ item_fits?(@item, pet_type) ? :happy : :sad, :face - .item-zones-info - %section - %h3 Occupies - - if @appearances_by_occupied_zone.present? - %ul - - @appearances_by_occupied_zone.each do |zone, appearances_in_zone| - %li - = zone.label - - if item_zone_partial_fit? appearances_in_zone, @all_appearances - %span.zone-species-info{ - title: item_zone_species_list(appearances_in_zone) - } - (#{appearances_in_zone.size} species) - - else - %span.no-zones (None) + .item-preview-meta-info + .item-zones-info + %section + %h3 Occupies + - if @appearances_by_occupied_zone.present? + %ul + - @appearances_by_occupied_zone.each do |zone, appearances_in_zone| + %li + = zone.label + - if item_zone_partial_fit? appearances_in_zone, @all_appearances + %span.zone-species-info{ + title: item_zone_species_list(appearances_in_zone) + } + (#{appearances_in_zone.size} species) + - else + %span.no-zones (None) - %section - %h3 Restricts - - if @item.restricted_zones.present? - %ul - - @item.restricted_zones.sort_by(&:label).each do |zone| - %li= zone.label + %section + %h3 Restricts + - if @item.restricted_zones.present? + %ul + - @item.restricted_zones.sort_by(&:label).each do |zone| + %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