# Swapple Editorial Orchard Redesign

This is a non-invasive design prototype made from a copied Swapple repo/context packet. It does not touch the real app or production repo.

The point is to give you a finished-feeling design direction you can open, click through, and compare against your current Swapple. If you like pieces of it, your Codex can selectively port them into your real codebase.

## Fastest Preview

From this folder, run:

```bash
python3 start_preview.py
```

On Windows, this may be:

```powershell
py start_preview.py
```

Then open the URL it prints, usually:

```text
http://127.0.0.1:5180/prototype/index.html
```

The prototype loads React and Babel from `unpkg.com`, so it needs internet access for the first load.

## What To Look At

Open the prototype and start with the leaderboard. The current lead direction is the Olympian-style leaderboard: top-three apple medals, podium blocks, a current-player rank card, and then the ranked score list.

The prototype leaderboard itself has been updated to match that direction, so the screenshots are not just references; the clickable prototype now uses the same mobile-first layout.

Best first screenshots:

- `screenshots/olympian-leaderboard/10_mobile_olympian_leaderboard_light.png`
- `screenshots/olympian-leaderboard/11_mobile_olympian_leaderboard_dark.png`
- `screenshots/olympian-leaderboard/12_iab_mobile_leaderboard_light.png`

Then open the prototype and review these sections:

- `Interactive Prototype`: click through the play/start/win/leaderboard flow.
- `Mobile · Light`: static phone flow from start to leaderboard.
- `Mobile · Dark`: dark-mode direction.
- `Desktop`: wide leaderboard layout.
- `Components`: tokens, tile treatment, apple motif, and reusable design atoms.

Screenshots are included if you want a fast skim:

- `screenshots/final-candidates/01_start_light.png`
- `screenshots/final-candidates/03_gameplay_light.png`
- `screenshots/final-candidates/04_leaderboard_light.png`
- `screenshots/final-candidates/07_leaderboard_dark.png`
- `screenshots/final-candidates/08_victory_light.png`

Fresh verification screenshots are also included under `verification/`, including:

- `verification/olympian-mobile-leaderboard-light-final.png`
- `verification/olympian-mobile-leaderboard-dark-final.png`
- `verification/interactive-proto-leaderboard-settled.png`
- `verification/interactive-proto-leaderboard-alltime.png`
- `verification/olympian-desktop-leaderboard-final.png`

## Design Direction

Working name: `Editorial Orchard`.

Intent:

- Keep Swapple recognizable as a word-swap puzzle.
- Make the app feel more premium and memorable.
- Make the leaderboard and victory moments feel like product moments, not utility panels.
- Lead with an Olympian leaderboard layout: medal apples for the top three, podium placement, current-user emphasis, then a readable list.
- Use apple/orchard identity as a tasteful motif, not a new game mechanic.
- Treat the mobile leaderboard as a strong full-screen in-game view.

## Main Choices

Things worth reacting to:

- Is the warmer orchard identity charming or too much?
- Does the Olympian leaderboard feel exciting and clear, or too ceremonial?
- Should the leaderboard stay as an in-game full-screen view, or eventually become a true `/leaderboard` page?
- Does the start screen feel premium, or too slow before play?
- Does the mobile leaderboard feel clear and worth copying?
- Which piece feels most like final Swapple: start, board, victory, or leaderboard?

## Suggested Framing

This is a sandbox redesign, not a merge request.

Suggested wording:

> This keeps the real game idea intact, but explores a more premium App Store puzzle feel. Nothing here touches the live app. If any pieces feel right, Codex can selectively copy the design ideas back into the real Swapple repo.