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

[WV2] Update migration status doc

Browse source
This commit is contained in:
Emi Matchu 2026-02-05 17:33:30 -08:00
parent b03b32c538
commit fd2940880f
1 changed files with 65 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
docs/wardrobe-v2-migration.md
View file

@ -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 `<outfit-viewer>` 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 `<species-color-picker>` 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 `<pose-picker-popover>` 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**
- `<species-color-picker>` - Auto-submit form on change ([species-color-picker.js](app/assets/javascripts/species-color-picker.js))
- `<outfit-viewer>` - Pet/item layer rendering ([outfit-viewer.js](app/assets/javascripts/outfit-viewer.js))
- `<pose-picker-popover>` - Auto-submit form on radio change, with CSS state for progressive enhancement ([pose-picker.js](app/assets/javascripts/pose-picker.js))
- `<outfit-viewer>` - Pet/item layer rendering, with Idiomorph integration for smooth DOM morphing across navigations ([outfit-viewer.js](app/assets/javascripts/outfit-viewer.js))
- `<outfit-layer>` - 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 `<pose-picker-popover>` 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`