# Swapple Design Differences To Review

Use this as the quick comparison sheet while looking at the preview.

Preview links:
- Real local app: http://localhost:5173/
- Screenshot preview with mock leaderboard data: http://localhost:5180/
- Screenshots: `C:\Users\Corbin\Documents\Codex\2026-05-20\files-mentioned-by-the-user-swappable\screenshots_or_exports`

## Decision 1: Leaderboard Direction

### Option A: Keep Responsive Modal / Full-Screen Overlay

This is what the current preview implements.

What it feels like:
- The leaderboard still belongs to the game.
- It opens instantly from the header or win screen.
- On desktop it feels like a premium overlay.
- On mobile it behaves like a full-screen leaderboard.
- The player can close it and return to the same game state.

Why it works:
- Best fit for Swapple as a lightweight puzzle SPA.
- Least risky implementation.
- Keeps win-to-leaderboard flow simple.
- Preserves current auth, score submission, and game state.
- Easier to polish visually without routing complexity.

Tradeoffs:
- Not directly shareable as `/leaderboard`.
- Browser back button does not represent leaderboard open/closed state.
- If the leaderboard becomes a major destination later, this may feel tucked away.

Developer recommendation:
- Keep this for now.
- Treat it as “full-screen responsive view inside the app,” not just a small modal.
- Add a real route only if Dad wants the leaderboard to become a public destination.

### Option B: Make Leaderboard A True Route

What it would feel like:
- `/leaderboard` becomes its own page.
- It can be shared directly.
- It can have more room for filters, history, weekly standings, and player profiles.
- It feels less like an overlay and more like a destination.

Why it might be worth it later:
- Better if leaderboard becomes central to retention or competition.
- Better if Dad wants to send people a direct link to rankings.
- Better if the site grows beyond a single puzzle screen.

Tradeoffs:
- More implementation work.
- Must decide what happens to active game state when navigating.
- Needs route handling, back-button behavior, empty/error/loading states, and mobile page layout.
- Could make Swapple feel more like a website and less like a compact game.

Developer recommendation:
- Do not do this yet unless Dad clearly wants shareability or a public leaderboard page.
- If added later, keep the current overlay for win flow and add `/leaderboard` as a separate destination.

## Decision 2: Visual Direction

### Option A: Warmer Editorial Orchard

This is what the current preview leans toward.

What it feels like:
- Premium App Store puzzle game.
- Softer, warmer, more crafted.
- Bigger type, paper texture, orchard/apple identity.
- The game has more personality and a more memorable brand.

Why it works:
- Makes Swapple feel less generic.
- Gives Dad something distinctive to react to.
- Makes the leaderboard and victory flow feel like moments, not utility panels.
- Uses the apple motif without changing the rules or mechanics.

Tradeoffs:
- More spacious and decorative.
- The start screen feels more editorial than arcade-like.
- Some players may prefer a tighter “just let me play” layout.

Best screenshots to show:
- `01_start_light_desktop.png`
- `04_leaderboard_light_desktop.png`
- `06_victory_score_recorded_light.png`
- `07_start_dark_mobile.png`
- `09_leaderboard_dark_mobile.png`

### Option B: More Compact / Gamey

What it would feel like:
- Faster, tighter, more direct.
- Smaller intro screen.
- Less decorative apple/watermark work.
- More focus on board, timer, score, and immediate replay.

Why it might be better:
- If Dad wants Swapple to feel snappier and less “designed.”
- If the target is quick repeat play rather than a premium editorial vibe.
- If mobile first means less vertical space for brand atmosphere.

Tradeoffs:
- Less memorable visual identity.
- Leaderboard/victory may feel more utilitarian.
- The app could lose some of the App Store puzzle-game polish.

How to adjust if Dad chooses this:
- Reduce start screen height and headline size.
- Make the apple motif smaller and more like an accent.
- Keep tactile tiles and warm colors, but remove oversized decorative apple watermark.
- Keep leaderboard structure but tighten spacing and make podium smaller.

## What To Ask Dad

Ask these exact questions while showing the screenshots:

1. Does this feel more premium, or does it feel too fancy for Swapple?
2. Should the leaderboard feel like part of the game, or like its own page people can visit?
3. Is the apple/orchard identity charming, or too much?
4. On mobile, does the start screen feel exciting or does it slow you down?
5. Which screenshot feels most like the final Swapple: start screen, board, victory, or leaderboard?

## Recommended Framing

Show Dad the current preview as the “warm premium version,” not as the final answer.

Suggested wording:

> This keeps the real game intact, but gives it a more premium App Store puzzle feel. The biggest choice is whether we like this warmer orchard identity, and whether the leaderboard should stay as a strong in-game overlay or eventually become its own page.

## Codex Recommendation

Current recommendation:
- Keep the responsive full-screen/modal leaderboard for now.
- Do not build a route yet.
- Keep the warmer orchard direction for the next review.
- After Dad reacts, either tighten the start screen or lean further into the premium style.

Status:
- Ready to screenshot and compare.
- Not blocked.
- Needs Dad preference review before a final polish pass.