diff --git a/docs/wardrobe-v2-migration.md b/docs/wardrobe-v2-migration.md index a94b015e..7945cdc4 100644 --- a/docs/wardrobe-v2-migration.md +++ b/docs/wardrobe-v2-migration.md @@ -13,7 +13,7 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a ## Current Status -**Wardrobe V2 is in early prototype/proof-of-concept stage.** It's accessible at `/wardrobe/v2` but is not yet linked from the main UI. +**Wardrobe V2 is in active development.** It's accessible at `/wardrobe/v2` but is not yet linked from the main UI. Core outfit editing works: species/color/pose selection, item search, add/remove items. ### What's Implemented @@ -21,7 +21,7 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a **Route & Controller** ([wardrobe_controller.rb](app/controllers/wardrobe_controller.rb)) - `GET /wardrobe/v2` - Main wardrobe endpoint -- Takes URL params: `species`, `color`, `objects[]` (item IDs) +- Takes URL params: `species`, `color`, `pose`, `objects[]` (item IDs) - Returns full HTML page (no layout, designed to work standalone) - Defaults to Blue Acara if no pet specified @@ -29,8 +29,10 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a - Full-page layout with preview (left) and controls (right) - Responsive: stacks vertically on mobile (< 800px) - Uses existing `outfit_viewer` partial for rendering +- Split into partials: `_species_color_picker`, `_pose_picker`, `_pose_option`, `_item_card`, `_search_results` - Custom CSS in [wardrobe/show.css](app/assets/stylesheets/wardrobe/show.css) - Minimal JavaScript in [wardrobe/show.js](app/assets/javascripts/wardrobe/show.js) +- Uses Idiomorph for DOM morphing on full-page navigations, so `` layers are reused across navigations (smooth transitions instead of full re-renders) **Pet Selection** ([show.html.haml:31-42](app/views/wardrobe/show.html.haml#L31-L42)) - Species/color picker using `` web component @@ -40,7 +42,19 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a - Filters colors to only those compatible with selected species - Advanced fallback: if species+color combo doesn't exist, falls back to simple color ([wardrobe_controller.rb:13-16](app/controllers/wardrobe_controller.rb#L13-L16)) -**Item Display** ([show.html.haml:47-64](app/views/wardrobe/show.html.haml#L47-L64)) +**Pose Selection** ([_pose_picker.html.haml](app/views/wardrobe/_pose_picker.html.haml)) +- Pose picker button in preview overlay, showing emoji + label (e.g., "😀 Happy") +- Opens popover with 3×2 grid: Happy/Sad/Sick × Masc/Fem +- Visual thumbnails: each pose option renders a tiny `outfit-viewer` of the pet in that pose +- Unavailable poses shown grayed out with ❓ indicator +- Auto-submits form on radio button change via `` web component +- Progressive enhancement: submit button fallback if JS disabled +- Uses native HTML popover API with CSS anchor positioning +- `pose` URL param preserved across all interactions +- Falls back to canonical pose if selected pose isn't available for the pet type +- Controller preloads SwfAsset manifests for all pose thumbnails for efficient rendering + +**Item Display** ([show.html.haml](app/views/wardrobe/show.html.haml)) - Groups worn items by zone (Hat, Jacket, Wings, etc.) - Smart multi-zone simplification: hides redundant single-item zones - Shows items that occupy multiple zones in conflict zones only @@ -91,9 +105,14 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a - Displays pet + item layers using HTML5 Canvas/iframes - Reused from existing codebase (also used on item pages, alt style pages, etc.) +**`pose_emoji_and_label`** ([wardrobe_helper.rb](app/helpers/wardrobe_helper.rb)) +- Maps pose strings to emoji + text label (e.g., `HAPPY_MASC` → `{emoji: "😀", label: "Happy"}`) +- Used by pose picker button display + **Web Components** - `` - Auto-submit form on change ([species-color-picker.js](app/assets/javascripts/species-color-picker.js)) -- `` - Pet/item layer rendering ([outfit-viewer.js](app/assets/javascripts/outfit-viewer.js)) +- `` - Auto-submit form on radio change, with CSS state for progressive enhancement ([pose-picker.js](app/assets/javascripts/pose-picker.js)) +- `` - Pet/item layer rendering, with Idiomorph integration for smooth DOM morphing across navigations ([outfit-viewer.js](app/assets/javascripts/outfit-viewer.js)) - `` - Individual layer loading/error states #### Model Support @@ -111,7 +130,7 @@ Replace the complex React outfit editor (`app/javascript/wardrobe-2020/`) with a - Returns array of `SwfAsset` layers to render - Combines pet biology layers + compatible item layers - Filters by zone restrictions -- Note: Doesn't currently handle alt styles (TODO in code) +- Handles alt styles: switches biology layers to alt_style, filters item layers to body_id=0 **`Item.appearances_for`** - Batch-loads item appearances for multiple items on a pet type @@ -162,15 +181,14 @@ Below is a comprehensive comparison with the full feature set of Wardrobe 2020 ( **Pose/Emotion Selection** - ✅ Has: Species and color pickers -- ❌ No pose picker UI -- ❌ Locked to canonical pose for pet type +- ✅ Has: Pose picker UI with 3×2 emotion grid (Happy/Sad/Sick × Masc/Fem) +- ✅ Has: Visual pose preview thumbnails (tiny outfit-viewer renders) +- ✅ Has: Pose availability indicators (grayed out with ❓) +- ✅ Has: Auto-recovery when pose becomes invalid (falls back to canonical) +- ✅ Has: `pose` URL param preserved across interactions - ❌ Missing from Wardrobe 2020: - Tabbed interface (Expressions tab, Styles tab) - - Expression grid (3×2 matrix: Happy/Sad/Sick × Masc/Fem) - - Visual pose preview thumbnails - Unconverted (UC) pose option with warning - - Pose availability indicators (grayed out with "?") - - Auto-recovery when pose becomes invalid - Alt Styles/Pet Styles picker (Styles tab) - "Default" option to return to normal appearance - Visual thumbnails for each alt style @@ -220,14 +238,12 @@ Below is a comprehensive comparison with the full feature set of Wardrobe 2020 ( - ❌ Can't filter search by owned/wanted items **URL State** -- ✅ Has: Basic state (species, color, items) +- ✅ Has: Species, color, pose, items - ❌ Missing parameters: - `name` - Outfit name - - `pose` - Pose string (e.g., HAPPY_FEM) - - `style` - Alt Style ID + - `style` - Alt Style ID (model supports it, but not wired to URL yet) - `state` - Appearance ID (pose version pinning) - `closet[]` - Closeted items array -- ❌ No browser back/forward support (full page reloads) - ❌ No legacy URL format support (#params) #### UI/UX Gaps @@ -254,6 +270,7 @@ Below is a comprehensive comparison with the full feature set of Wardrobe 2020 ( **Performance** - ❌ No optimistic updates (every change is full page navigation) +- ✅ Has: Idiomorph DOM morphing for full-page navigations (outfit-viewer layers reused smoothly) - ❌ Could benefit from Turbo Frames for partial updates - ❌ No prefetching/preloading - ❌ Missing from Wardrobe 2020: @@ -382,7 +399,7 @@ Browser displays (instant if Turbo, full page otherwise) ### Data Model Gaps **Current Issues:** -- Alt style support not implemented in `visible_layers` +- ~~Alt style support not implemented in `visible_layers`~~ (Done! Handles biology layers + body_id=0 filtering) - Outfit model designed around saved outfits (has `user_id`, `name`) - Need to handle unsaved/anonymous outfits better @@ -390,11 +407,12 @@ Browser displays (instant if Turbo, full page otherwise) **Full Page Loads** - Every species/color/item change triggers new page load -- Could use Turbo Frames to update only changed sections +- Mitigated by Idiomorph: DOM morphing reuses outfit-viewer layers across navigations, avoiding full re-renders +- Could further optimize with Turbo Frames for partial updates - Need to measure actual performance impact **Asset Preloading** -- Currently preloads all visible layer manifests ([outfits_controller.rb:112](app/controllers/outfits_controller.rb#L112)) +- Preloads all visible layer manifests + pose thumbnail manifests ([wardrobe_controller.rb](app/controllers/wardrobe_controller.rb)) - Good for parallelization, but loads data that might not be needed - Could be more selective @@ -420,6 +438,11 @@ Browser displays (instant if Turbo, full page otherwise) ## Next Steps **Recently Completed:** +- ✅ Pose selection (January 2026) + - 3×2 emotion grid with visual thumbnails + - Pose availability indicators and canonical fallback + - `pose` URL param with state preservation + - Progressive enhancement via `` web component - ✅ Basic item search functionality (November 2025) - Text search with auto-filtering by pet compatibility - Pagination with 30 items per page @@ -459,22 +482,22 @@ Browser displays (instant if Turbo, full page otherwise) - [ ] Navigation blocking for unsaved changes - [ ] Outfit menu (Delete, Edit a Copy) -3. **Pose Selection** 🟡 Important - - [ ] Pose picker UI (emotion grid) - - [ ] Visual pose thumbnails (tiny pet renders) - - [ ] Update pet_state via URL params - - [ ] Handle missing/invalid poses gracefully - - [ ] Add `pose` param to URL state +3. **Pose Selection** 🟢 Complete (core), 🟡 Enhancements pending + - [x] Pose picker UI (3×2 emotion grid with popover) + - [x] Visual pose thumbnails (tiny outfit-viewer renders) + - [x] Update pet_state via URL params + - [x] Handle missing/invalid poses gracefully (canonical fallback) + - [x] Add `pose` param to URL state + - [x] Pose availability indicators (gray out unavailable with ❓) + - [x] Auto-recovery when pose becomes invalid - Optional enhancements: - [ ] Tabbed interface (Expressions / Styles) - - [ ] Pose availability indicators (gray out unavailable) - - [ ] Auto-recovery when pose becomes invalid 4. **Alt Styles Support** 🟡 Important - - [ ] Alt styles picker (Styles tab in pose picker?) + - [ ] Alt styles picker UI (Styles tab in pose picker?) - [ ] Visual thumbnails for each style - [ ] Add `style` param to URL state - - [ ] Update `Outfit#visible_layers` to handle alt styles + - [x] `Outfit#visible_layers` handles alt styles (biology layers + body_id=0 filtering) - [ ] "Default" option to return to normal - Optional enhancements: - [ ] Link to Rainbow Pool Styles info @@ -556,7 +579,8 @@ Browser displays (instant if Turbo, full page otherwise) - [ ] Item restoration logic 14. **URL Enhancements** - - [ ] Add missing params (pose, style, state, closet[]) + - [x] `pose` param + - [ ] Add missing params (style, state, closet[]) - [ ] Browser back/forward support (Turbo handles this?) - [ ] Legacy URL format support (#params) - [ ] Clean URL generation @@ -622,12 +646,12 @@ Browser displays (instant if Turbo, full page otherwise) ### Success Criteria for Each Phase **Phase 1 (MVP):** -- ✅ Can search for and add items -- ✅ Can remove items -- ✅ Can change species/color/pose +- ✅ Can search for and add items *(done)* +- ✅ Can remove items *(done)* +- ✅ Can change species/color/pose *(done)* - ✅ Can save and load outfits - ✅ Can use alt styles -- ✅ Works without JavaScript (progressive enhancement) +- ✅ Works without JavaScript (progressive enhancement) *(done)* **Phase 2 (Polish):** - ✅ Feels responsive and smooth @@ -971,13 +995,19 @@ This section documents ALL features in the React-based Wardrobe 2020 for referen **Wardrobe V2 Files:** - Controller: [app/controllers/wardrobe_controller.rb](../app/controllers/wardrobe_controller.rb) - View: [app/views/wardrobe/show.html.haml](../app/views/wardrobe/show.html.haml) -- Search results partial: [app/views/wardrobe/_search_results.html.haml](../app/views/wardrobe/_search_results.html.haml) +- Partials: + - [app/views/wardrobe/_species_color_picker.html.haml](../app/views/wardrobe/_species_color_picker.html.haml) + - [app/views/wardrobe/_pose_picker.html.haml](../app/views/wardrobe/_pose_picker.html.haml) + - [app/views/wardrobe/_pose_option.html.haml](../app/views/wardrobe/_pose_option.html.haml) + - [app/views/wardrobe/_item_card.html.haml](../app/views/wardrobe/_item_card.html.haml) + - [app/views/wardrobe/_search_results.html.haml](../app/views/wardrobe/_search_results.html.haml) - Helpers: [app/helpers/wardrobe_helper.rb](../app/helpers/wardrobe_helper.rb) - Tests: [spec/helpers/wardrobe_helper_spec.rb](../spec/helpers/wardrobe_helper_spec.rb) - Styles: [app/assets/stylesheets/wardrobe/show.css](../app/assets/stylesheets/wardrobe/show.css) - JavaScript: [app/assets/javascripts/wardrobe/show.js](../app/assets/javascripts/wardrobe/show.js) - Web Components: - [app/assets/javascripts/species-color-picker.js](../app/assets/javascripts/species-color-picker.js) + - [app/assets/javascripts/pose-picker.js](../app/assets/javascripts/pose-picker.js) - [app/assets/javascripts/outfit-viewer.js](../app/assets/javascripts/outfit-viewer.js) **Wardrobe 2020 Files (React):** @@ -991,5 +1021,5 @@ This section documents ALL features in the React-based Wardrobe 2020 for referen --- **Document Status:** Living document - update as migration progresses -**Last Updated:** 2025-11-03 +**Last Updated:** 2026-02-05 **Current Branch:** `feature/wardrobe-v2`