Emi Matchu
5e68d3809c
Reproduce: 1. Add an item with animations, and play them. 2. Remove the item. 3. Add it back. 4. Observe the button shows up in "Paused" state, even though it's playing. This is because the server-side template wasn't doing anything to try to keep the play/pause button it renders in sync with the current saved state in the cookies, so it was always causing a morph to the pause state. Now we listen to the cookie instead! I also updated the JS behavior to be a bit more consistent: treat the behavior as defaulting to true, unless it's explicitly set to the string "false".
70 lines
2.7 KiB
Text
70 lines
2.7 KiB
Text
- title "Wardrobe v2"
|
|
|
|
!!! 5
|
|
%html
|
|
%head
|
|
%meta{charset: 'utf-8'}
|
|
%meta{name: 'viewport', content: 'width=device-width, initial-scale=1'}
|
|
%title= yield :title
|
|
%link{href: image_path('favicon.png'), rel: 'icon'}
|
|
= stylesheet_link_tag "application/hanger-spinner"
|
|
= stylesheet_link_tag "application/outfit-viewer"
|
|
= page_stylesheet_link_tag "wardrobe/show"
|
|
= javascript_include_tag "application", async: true
|
|
= javascript_include_tag "idiomorph", async: true
|
|
= javascript_include_tag "outfit-viewer", async: true
|
|
= javascript_include_tag "species-color-picker", async: true
|
|
= javascript_include_tag "pose-picker", async: true
|
|
= javascript_include_tag "tab-panel", async: true
|
|
= javascript_include_tag "wardrobe/show", async: true
|
|
= csrf_meta_tags
|
|
%meta{name: 'outfit-viewer-morph-mode', value: 'full-page'}
|
|
%body.wardrobe-v2
|
|
.wardrobe-container
|
|
.outfit-preview-section
|
|
- if @pet_type.nil?
|
|
.no-preview-message
|
|
%p
|
|
We haven't seen this kind of pet before! Try a different species/color
|
|
combination.
|
|
- else
|
|
= outfit_viewer @outfit, id: "wardrobe-outfit-viewer",
|
|
preferred_image_format: :svg # TODO: Make this a selectable option
|
|
|
|
.preview-controls
|
|
.preview-controls-top
|
|
%outfit-viewer-play-pause-toggle{for: "wardrobe-outfit-viewer"}
|
|
%label.play-pause-control-button.button
|
|
%input{type: "checkbox", checked: cookies[:DTIOutfitViewerIsPlaying] != "false"}
|
|
%span.paused-label Paused
|
|
%span.playing-label Playing
|
|
|
|
.preview-controls-bottom
|
|
= render "species_color_picker"
|
|
|
|
- if @pet_type
|
|
= render "pose_picker"
|
|
|
|
.outfit-controls-section
|
|
.item-search-form
|
|
- if @search_mode
|
|
= button_to wardrobe_v2_path, method: :get, class: "back-button" do
|
|
←
|
|
= outfit_state_params except: [:q]
|
|
= form_with url: wardrobe_v2_path, method: :get, class: "search-form" do |f|
|
|
= outfit_state_params
|
|
= f.text_field "q[name]", placeholder: "Search for items...", value: params.dig(:q, :name), "aria-label": "Search for items"
|
|
= f.submit "Search"
|
|
|
|
- if @search_mode
|
|
= render "search_results"
|
|
- else
|
|
%h1 Untitled outfit
|
|
- if @outfit.worn_items.any?
|
|
.worn-items
|
|
- outfit_items_by_zone(@outfit).each do |zone_group|
|
|
.zone-group
|
|
%h3.zone-label= zone_group[:zone_label]
|
|
%ul.items-list
|
|
- zone_group[:items].each do |item|
|
|
= render "item_card", item: item
|