114 lines
5.4 KiB
Text
114 lines
5.4 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 "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
|
|
|
|
.preview-controls
|
|
%species-color-picker
|
|
= form_with url: wardrobe_v2_path, method: :get do |f|
|
|
= outfit_state_params except: [:color, :species]
|
|
= select_tag :color,
|
|
options_from_collection_for_select(@colors, "id", "human_name",
|
|
@selected_color&.id),
|
|
"aria-label": "Pet color"
|
|
= select_tag :species,
|
|
options_from_collection_for_select(@species, "id", "human_name",
|
|
@selected_species&.id),
|
|
"aria-label": "Pet species"
|
|
= submit_tag "Go", name: nil
|
|
|
|
- if @pet_type
|
|
- pose_info = pose_emoji_and_label(@selected_pose)
|
|
%button#pose-picker-button.pose-picker-button{type: "button", popovertarget: "pose-picker-popover"}
|
|
%span.pose-emoji= pose_info[:emoji]
|
|
%span.pose-label= pose_info[:label]
|
|
%span.chevron ▾
|
|
|
|
%pose-picker-popover#pose-picker-popover{popover: "auto"}
|
|
= form_with url: wardrobe_v2_path, method: :get, class: "pose-picker-form" do |f|
|
|
= outfit_state_params except: [:pose]
|
|
%table.pose-picker-table
|
|
%thead
|
|
%tr
|
|
%th
|
|
%th
|
|
%span.emoji-icon{title: "Happy"} 😀
|
|
%th
|
|
%span.emoji-icon{title: "Sad"} 😢
|
|
%th
|
|
%span.emoji-icon{title: "Sick"} 🤢
|
|
%tbody
|
|
%tr
|
|
%th
|
|
%span.emoji-icon{title: "Masculine"} 💁♂️
|
|
%td
|
|
= render "pose_option", pose: "HAPPY_MASC", pet_state: @available_poses["HAPPY_MASC"], selected: @selected_pose == "HAPPY_MASC"
|
|
%td
|
|
= render "pose_option", pose: "SAD_MASC", pet_state: @available_poses["SAD_MASC"], selected: @selected_pose == "SAD_MASC"
|
|
%td
|
|
= render "pose_option", pose: "SICK_MASC", pet_state: @available_poses["SICK_MASC"], selected: @selected_pose == "SICK_MASC"
|
|
%tr
|
|
%th
|
|
%span.emoji-icon{title: "Feminine"} 💁♀️
|
|
%td
|
|
= render "pose_option", pose: "HAPPY_FEM", pet_state: @available_poses["HAPPY_FEM"], selected: @selected_pose == "HAPPY_FEM"
|
|
%td
|
|
= render "pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: @selected_pose == "SAD_FEM"
|
|
%td
|
|
= render "pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: @selected_pose == "SICK_FEM"
|
|
= submit_tag "Change pose", name: nil, class: "pose-submit-button"
|
|
|
|
.outfit-controls-section
|
|
= form_with url: wardrobe_v2_path, method: :get, class: "item-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|
|
|
%li.item-card
|
|
.item-thumbnail
|
|
= image_tag item.thumbnail_url, alt: item.name, loading: "lazy"
|
|
.item-info
|
|
.item-name= item.name
|
|
.item-badges
|
|
= render "items/badges/kind", item: item
|
|
= render "items/badges/first_seen", item: item
|
|
= button_to wardrobe_v2_path, method: :get, class: "item-remove-button", title: "Remove #{item.name}", "aria-label": "Remove #{item.name}" do
|
|
❌
|
|
= outfit_state_params @outfit.without_item(item)
|