# Match-a-Sock UX — quick comparison

Static prototypes under `variants/`. Not the shipped game. Select→destination only.

## How to try on a phone

1. Host `match-a-sock-ux` (e.g. `python3 -m http.server 8765`) or open the hosted URL.
2. Open **`/variants/`** in portrait (target ~390×844).
3. Choose layout on the gallery (**Open selected UI**) or use **UI: … ▾** inside a prototype.
4. Preference key: `localStorage.mas-ux-variant` (`A` / `B` / `C`; default **B**).

## Side-by-side

| Dimension | A Room map | B Pipeline ★ | C Focus + peek |
|-----------|------------|--------------|----------------|
| Metaphor | Spatial laundry room | Linear wash flow | One station at a time |
| Phone layout | Vertical station stack + scroll | Pipeline stacks; full-width baskets | Peek rail + large focus |
| Capacity read | Fill bars + ghosts | Fill bars + caps + overflow peek | Peek fill + focus ghosts |
| Action dock | Cold / Hot / Unload / Dry (+ Peg in-room) | Full dock + reagents on washer focus | Full dock; reagents in focus |
| Best when… | You want room geography | You want “what’s next” clarity | You want detail on one station |
| Watch out for… | Still more scrolling | Tall stack on small phones | Extra tap to change station |

★ **Recommended default** for playtests: **B Pipeline**.

## Shared UX rules (all three)

- Viewport meta + `viewport-fit=cover`; safe-area insets on chrome/dock.
- Touch targets ≥44px for garments, dock, picker, switcher.
- No critical hover-only affordances; legal destinations use glow + tap.
- Gallery + in-page **UI** switcher stay in sync via `mas-ux-variant`.

## Demo smoke path (any variant)

1. Tap a sock in a basket → destinations glow.  
2. Tap washer → load. Cold or Hot → Unload → table.  
3. Move to hanger → Peg if a pair matches → Dry to score.  
4. Undo / Dump / Menu (gallery) still available in chrome.