# Swapple Redesign Porting Notes For Codex

## Read First

READ:
- `README_FOR_DAD.md`
- `prototype/index.html`
- `prototype/tokens.css`
- `prototype/apple.jsx`
- `prototype/swapple-ui.jsx`
- `prototype/scenes-leaderboard.jsx`
- `prototype/scenes-mobile.jsx`
- `prototype/scenes-proto.jsx`
- `source-context/DESIGN_REVIEW_NOTES.md`
- `CURRENT_DIRECTION.md`

SOURCE_CONF:
- Prototype is a sandbox concept board.
- Source context came from a copied Swapple repo/design-capture packet.
- Screenshots are visual references, not proof that production already behaves this way.

## What This Package Is

This is a giftable design preview for Swapple. It should help the app owner decide what visual and interaction ideas are worth carrying back into the real repo.

It is not a patch set.
It is not a production implementation.
It is not a replacement app.

## Copy First Candidates

These are the strongest candidates to translate into the real app:

- Olympian mobile leaderboard: top-three medal apples, podium plinths, current-player rank card, then ranked score list.
- Mobile leaderboard as a full-screen in-game view.
- Leaderboard visual hierarchy: podium/rank emphasis, calmer rows, clearer current-player highlight.
- Score-recorded/victory moment as a celebratory product state.
- Warmer paper tokens and tactile tile treatment.
- Shared apple motif as a reusable component.
- Dark-mode palette adjustments that avoid bright cream glare.

## Optional Candidates

Port only if the owner likes the direction:

- Editorial start screen layout.
- Larger orchard/apple decorative moments.
- Podium medal treatment.
- Light/dark Olympian leaderboard variants.
- Tweakable warm-tone variants.
- Wider desktop leaderboard presentation.

## Do Not Copy Directly

Do not copy these into production without translation:

- `design-canvas.jsx`: concept-board shell.
- `tweaks-panel.jsx`: prototype-only controls.
- `ios-frame.jsx`: preview frame.
- CDN React/Babel scripts from `prototype/index.html`.
- Mock leaderboard rows and fake player state.
- Any prototype state stored in `.design-canvas.state.json`.

## Translation Guidance

Map prototype ideas into the real app's existing files/components instead of replacing the app:

- Tokens and palette: translate from `prototype/tokens.css` into the real stylesheet/theme layer.
- Apple motif: adapt from `prototype/apple.jsx` into the existing shared apple component if one exists.
- Leaderboard: translate `scenes-leaderboard.jsx` structure into the real leaderboard dialog/page component.
- Leaderboard copy/data: keep the top header to `Leaderboard`, use `Top Scores` as the only list header, omit visible times, and show the current player's rank as a badge/number instead of old rank-label text.
- Olympian screenshots: use `screenshots/olympian-leaderboard/` as the current visual target.
- Victory state: translate visual hierarchy and copy treatment into the real victory/score submission flow.
- Mobile layout: verify at `320x568`, `360x640`, and `390x844`.

Keep the real app's existing auth, score submission, data fetching, game state, and routing unless explicitly changing them.

## Verification Before Calling It Done

Run the real repo's normal checks, then visually verify:

- start screen;
- sign-in/account modal;
- gameplay board;
- restart modal;
- victory/score-recorded state;
- leaderboard light and dark;
- mobile widths: `320`, `360`, `390`;
- desktop leaderboard.

Check for:

- text clipping;
- button label overflow;
- mobile vertical fit;
- leaderboard scroll behavior;
- dark-mode contrast;
- current-player row clarity;
- no regression to auth or score submission.

STATE: DONE=[giftable-design-prototype], OPEN=[owner-selects-porting-scope], RISK=[prototype-scaffolding-should-not-be-copied-wholesale], NEXT=[preview-react-choose-porting-pieces], CONF=high