From d92e3288ab02c4ac01a48ea56f97dceebc539593 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sat, 7 Dec 2024 09:58:24 -0800 Subject: [PATCH] Add layers table to pet appearance edit page Gonna add some more functionality here too, but right now we at least have this! --- .../pet_states/support-outfit-viewer.js | 0 app/assets/stylesheets/pet_states/edit.sass | 4 +-- .../pet_states/support-outfit-viewer.sass | 31 +++++++++++++++++++ app/controllers/pet_states_controller.rb | 7 ++++- app/helpers/outfits_helper.rb | 24 +++++++++++--- app/models/swf_asset.rb | 14 ++++++++- .../_support_outfit_viewer.html.haml | 25 +++++++++++++++ app/views/pet_states/edit.html.haml | 8 +++-- 8 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 app/assets/javascripts/pet_states/support-outfit-viewer.js create mode 100644 app/assets/stylesheets/pet_states/support-outfit-viewer.sass create mode 100644 app/views/pet_states/_support_outfit_viewer.html.haml diff --git a/app/assets/javascripts/pet_states/support-outfit-viewer.js b/app/assets/javascripts/pet_states/support-outfit-viewer.js new file mode 100644 index 00000000..e69de29b diff --git a/app/assets/stylesheets/pet_states/edit.sass b/app/assets/stylesheets/pet_states/edit.sass index 61617637..cd4a91ff 100644 --- a/app/assets/stylesheets/pet_states/edit.sass +++ b/app/assets/stylesheets/pet_states/edit.sass @@ -1,5 +1,5 @@ -outfit-viewer - margin: 0 auto +support-outfit-viewer + margin-block: 1em .fields li[data-type=radio-grid] --num-columns: 3 diff --git a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass new file mode 100644 index 00000000..77def8d3 --- /dev/null +++ b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass @@ -0,0 +1,31 @@ +@import "../partials/clean/constants" + +support-outfit-viewer + display: flex + gap: 2em + flex-wrap: wrap + justify-content: center + + outfit-viewer + flex: 0 0 auto + border: 1px solid $module-border-color + border-radius: 1em + + > table + flex: 0 0 auto + border-collapse: collapse + table-layout: fixed + border-radius: .5em + + th, td + border: 1px solid $soft-border-color + font-size: .85em + padding: .25em .5em + text-align: left + + > tbody + > tr > :nth-child(3) // links column + ul + list-style-type: none + display: flex + gap: .5em diff --git a/app/controllers/pet_states_controller.rb b/app/controllers/pet_states_controller.rb index 4d6ee064..38c313fd 100644 --- a/app/controllers/pet_states_controller.rb +++ b/app/controllers/pet_states_controller.rb @@ -1,6 +1,7 @@ class PetStatesController < ApplicationController - before_action :find_pet_state before_action :support_staff_only + before_action :find_pet_state + before_action :preload_assets def edit end @@ -22,6 +23,10 @@ class PetStatesController < ApplicationController @reference_pet_type = @pet_type.reference end + def preload_assets + SwfAsset.preload_manifests @pet_state.swf_assets + end + def pet_state_params params.require(:pet_state).permit(:pose, :glitched) end diff --git a/app/helpers/outfits_helper.rb b/app/helpers/outfits_helper.rb index 511f6894..d130213d 100644 --- a/app/helpers/outfits_helper.rb +++ b/app/helpers/outfits_helper.rb @@ -65,11 +65,25 @@ module OutfitsHelper text_field_tag 'name', nil, options end - def outfit_viewer(outfit=nil, pet_state: nil, **html_options) - outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present? - raise "outfit_viewer must have outfit or pet state" if outfit.nil? + def outfit_viewer(...) + render partial: "outfit_viewer", + locals: parse_outfit_viewer_options(...) + end - render partial: "outfit_viewer", locals: {outfit:, html_options:} + def support_outfit_viewer(...) + render partial: "support_outfit_viewer", + locals: parse_outfit_viewer_options(...) + end + + private + + def parse_outfit_viewer_options(outfit=nil, pet_state: nil, **html_options) + outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present? + + if outfit.nil? + raise ArgumentError, "outfit viewer must have outfit or pet state" + end + + {outfit:, html_options:} end end - diff --git a/app/models/swf_asset.rb b/app/models/swf_asset.rb index 8b2b283d..d2a6a960 100644 --- a/app/models/swf_asset.rb +++ b/app/models/swf_asset.rb @@ -41,7 +41,7 @@ class SwfAsset < ApplicationRecord { swf: url, png: image_url, - svg: manifest_asset_urls[:svg], + svg: svg_url, canvas_library: manifest_asset_urls[:js], manifest: manifest_url, } @@ -186,6 +186,18 @@ class SwfAsset < ApplicationRecord nil end + def image_url? + image_url.present? + end + + def svg_url + manifest_asset_urls[:svg] + end + + def svg_url? + svg_url.present? + end + def canvas_movie? canvas_movie_library_url.present? end diff --git a/app/views/pet_states/_support_outfit_viewer.html.haml b/app/views/pet_states/_support_outfit_viewer.html.haml new file mode 100644 index 00000000..1a80ddc4 --- /dev/null +++ b/app/views/pet_states/_support_outfit_viewer.html.haml @@ -0,0 +1,25 @@ += content_tag "support-outfit-viewer", **html_options do + = outfit_viewer outfit + %table + %thead + %tr + %th{scope: "col"} DTI ID + %th{scope: "col"} Zone + %th{scope: "col"} Links + %tbody + - outfit.visible_layers.each do |swf_asset| + %tr + %th{scope: "row"} + = swf_asset.id + %td + = swf_asset.zone.label + (##{swf_asset.zone.id}) + %td + %ul + - if swf_asset.image_url? + %li= link_to "PNG", swf_asset.image_url, target: "_blank" + - if swf_asset.svg_url? + %li= link_to "SVG", swf_asset.svg_url, target: "_blank" + %li= link_to "SWF", swf_asset.url, target: "_blank" + - if swf_asset.manifest_url? + %li= link_to "Manifest", swf_asset.manifest_url, target: "_blank" \ No newline at end of file diff --git a/app/views/pet_states/edit.html.haml b/app/views/pet_states/edit.html.haml index 70e94b30..a118bf82 100644 --- a/app/views/pet_states/edit.html.haml +++ b/app/views/pet_states/edit.html.haml @@ -6,16 +6,16 @@ = link_to "Rainbow Pool", pet_types_path %li = link_to @pet_type.possibly_new_color.human_name, - pet_types_path(color: @pet_type.possibly_new_color.human_name) + pet_types_path(color: @pet_type.possibly_new_color.human_name) %li{"data-relation-to-prev": "sibling"} = link_to @pet_type.possibly_new_species.human_name, - pet_types_path(species: @pet_type.possibly_new_species.human_name) + pet_types_path(species: @pet_type.possibly_new_species.human_name) %li = link_to "Appearances", @pet_type %li \##{@pet_state.id} -= outfit_viewer pet_state: @pet_state += support_outfit_viewer pet_state: @pet_state = support_form_with model: [@pet_type, @pet_state] do |f| = f.errors @@ -47,7 +47,9 @@ = stylesheet_link_tag "application/breadcrumbs" = stylesheet_link_tag "application/outfit-viewer" = stylesheet_link_tag "application/support-form" + = stylesheet_link_tag "pet_states/support-outfit-viewer" = page_stylesheet_link_tag "pet_states/edit" - content_for :javascripts do = javascript_include_tag "outfit-viewer" + = javascript_include_tag "pet_states/support-outfit-viewer"