OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Add html5 badge to new item previews

Browse source
This commit is contained in:
Emi Matchu 2024-09-05 18:48:41 -07:00
parent edcb21558a
commit 6f08abc3aa
5 changed files with 105 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/assets/stylesheets/items/_show.sass
View file

@ -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

1
app/controllers/items_controller.rb
View file

@ -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)

4
app/models/item.rb
View file

@ -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

11
app/models/swf_asset.rb
View file

@ -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|

27
app/views/items/show.html.haml
View file

@ -53,6 +53,7 @@
item_fits?(@item, pet_type) ? :happy : :sad,
:face
.item-preview-meta-info
.item-zones-info
%section
%h3 Occupies
@ -78,6 +79,32 @@
- 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
.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
%header #{t '.contributors.header'}: