# Match-a-Sock — UX Layout Prototypes

Static HTML/CSS/JS mockups for Vitally’s laundry puzzle. **Not the real game** — no repo clone; demos use select→destination only (no drag-drop).

## How to open

### Desktop / box

```bash
cd /workspace/match-a-sock-ux
python3 -m http.server 8765
# → http://localhost:8765/variants/
```

Or open `variants/index.html` via `file://`.

### Phone (same Wi‑Fi / tunnel)

1. Serve the folder (above) so the phone can reach the host.
2. On the phone browser open `http://<host-ip>:8765/variants/` (or your hosted URL).
3. Use portrait ~375–430px width — layouts are mobile-first.
4. On the gallery, pick **UI layout** (A / B / C) → **Open selected UI**. Choice persists in `localStorage` key `mas-ux-variant`.
5. Inside a prototype, use **Menu** (gallery) or **UI: … ▾** to switch layouts without losing the stored preference.

Safe-area padding is applied for notched devices (`viewport-fit=cover` + `env(safe-area-inset-*)`).

| Path | What |
|------|------|
| `variants/index.html` | Gallery + UI layout toggle (B default / recommended) |
| `variants/A-room-map/index.html` | Spatial room · 3-row echo · stacks on phone |
| `variants/B-pipeline/index.html` | Flow pipeline · **default pick** · vertical stack on narrow |
| `variants/C-focus-peek/index.html` | One focus + peek rail |

## UI layout toggle

- **Gallery:** segmented radios A / B / C + primary **Open selected UI**; quick-link cards still work.
- **Persistence:** `localStorage['mas-ux-variant']` = `A` \| `B` \| `C` (defaults to `B`).
- **In-variant:** compact header control `UI: … ▾` switches to the other two; **Menu** / ☰ returns to the gallery. Opening a variant writes the same key.

## Stations & actions (kept recognizable)

**Stations:** basket-0/1/2, washer, table (pile), hanger, dry.  
**Actions demoed:** pour (basket↔basket), load→washer, cold/hot wash, reagents (when washer focused), unload, hang, take-off, peg, dry, dump, undo, menu.

Real game’s 3-row room (hanger top · washer+table mid · baskets bottom) is echoed in **A**; **B** and **C** map the same stations without requiring that geometry.

## Mobile notes

| | Phone behavior |
|--|----------------|
| A Room map | Absolute room → vertical station stack ≤430px; scrollable; ≥44px garments & dock |
| B Pipeline | Column stack ≤720px (and tighter at ≤430px); baskets full-width; peek sheet safe-area |
| C Focus+peek | Horizontal peek rail (scroll-snap); baskets 1-col on narrow; dock wraps |

Critical actions are tap-based (no hover-only). Hover scale is disabled on narrow screens where it fought fat-finger taps.

## Friction these mocks try to ease

| Today | Prototype approach |
|-------|-------------------|
| Chip / tally / hint clutter | Thin chrome (score + icon buttons); capacity as fill bars + small fractions |
| Multi-hop modal stacks | B: one peek sheet for overflow; C: peek rail instead of stacked modals |
| Hover-only property titles | `title` + `aria-label` on garments; glyphs carry color/pattern |
| 36px tokens | ≥44px garment tiles & dock buttons |
| Text walls | Icons / silhouettes; minimal permanent English |
| Long mobile scroll | B stacks the pipeline; C keeps one focus viewport; A stacks on phone |

## What to compare

| | A Room map | B Pipeline *(recommended)* | C Focus + peek |
|---|---|---|---|
| Metaphor | Top-down room (3-row) | Baskets→Washer→Table→Hanger→Dry | Large focus + peeks |
| Strength | Spatial memory | Clear next step, capacity, action dock | Depth on one station |
| Risk | Busy on small phones (mitigated by stack) | Wide on desktop (OK stacked) | Extra switch tap |
| Empty capacity | Slot ghosts | Slot ghosts + fill bars | Slot ghosts + peek fill |
| Select→dest | Stations glow | Stations/baskets glow | Peeks + focus glow |

**Demo path:** tap garment → legal destinations glow → tap destination; Wash → Unload → Hang; Peg when a matching pair is on the hanger; Dry scores.

See also [COMPARISON.md](COMPARISON.md).

## Palette

Soft laundry chrome (warm gray-lavender / sage). High-contrast garment solids + stripe/dot/check overlays.