Shop UI Rework Report: The Dopamine Generator

This report outlines a redesign of the Shop UI to maximize player engagement, anticipation, and reward feedback—the core pillars of a "dopamine generator." The design is inspired by Balatro, Slay the Spire, and slot machine psychology.

1. Design Philosophy

Core Dopamine Triggers

Trigger	Implementation
Anticipation	Reroll animations with a brief "shuffle" delay. Cards flip in from off-screen.
Scarcity/Value	Clear rarity glow effects (Gold for Rare, Purple for Uncommon). "LOW STOCK" badge for last item.
Progression	Capital counter animates on change (bounce + flash). "SOLD OUT" stamps feel like an achievement.
Choice	3 distinct reroll buttons with clear cost/benefit. Always show "what you could have."
Instant Feedback	Card pickup SFX + particle burst. Button click has tactile scale animation.

2. Target Resolution & Layout Grid

Target Viewport: 1280 x 720 (HD 720p, Godot default)

All elements are positioned using absolute pixel coordinates from the top-left (0, 0) of the viewport.

┌─────────────────────────────────────────────────────────────────────────────┐
│ (0, 0)                                                         (1280, 0) │
│                                                                             │
│    ╔═══════════════════════════════════════════════════════════════════╗   │
│    ║                       TOP BAR (y: 20 - 70)                        ║   │
│    ║  [CAPITAL ICON + LABEL] (x: 40)     [SHUFFLE COST] (x: 1100)       ║   │
│    ╚═══════════════════════════════════════════════════════════════════╝   │
│                                                                             │
│    ╔═══════════════════════════════════════════════════════════════════╗   │
│    ║                   PREMIUM ROW (y: 100 - 390)                      ║   │
│    ║   [CARD 1]       [CARD 2]       [CARD 3]       [CARD 4]           ║   │
│    ║   x: 80          x: 296         x: 512         x: 728             ║   │
│    ║   (180x260)      (180x260)      (180x260)      (180x260)          ║   │
│    ║   Price: y+265   Price: y+265   Price: y+265   Price: y+265       ║   │
│    ╠═══════════════════════════════════════════════════════════════════╣   │
│    ║   [REROLL PREMIUM BUTTON]  (x: 950, y: 200, w: 200, h: 50)        ║   │
│    ╚═══════════════════════════════════════════════════════════════════╝   │
│                                                                             │
│    ╔═══════════════════════════════════════════════════════════════════╗   │
│    ║                   COMMON ROW (y: 400 - 690)                       ║   │
│    ║   [CARD 1]       [CARD 2]       [CARD 3]       [CARD 4]           ║   │
│    ║   x: 80          x: 296         x: 512         x: 728             ║   │
│    ║   (180x260)      (180x260)      (180x260)      (180x260)          ║   │
│    ║   Price: y+265   Price: y+265   Price: y+265   Price: y+265       ║   │
│    ╠═══════════════════════════════════════════════════════════════════╣   │
│    ║   [REROLL COMMON BUTTON]   (x: 950, y: 500, w: 200, h: 50)        ║   │
│    ╚═══════════════════════════════════════════════════════════════════╝   │
│                                                                             │
│    ╔═══════════════════════════════════════════════════════════════════╗   │
│    ║                     BOTTOM BAR (y: 650 - 710)                     ║   │
│    ║   [EXIT BUTTON] (x: 540, y: 660, w: 200, h: 50)                   ║   │
│    ╚═══════════════════════════════════════════════════════════════════╝   │
│                                                                             │
│ (0, 720)                                                      (1280, 720) │
└─────────────────────────────────────────────────────────────────────────────┘

3. Pixel Placement Map

Element	X	Y	Width	Height	Notes
Background (Shader)	0	0	1280	720	Full viewport, Z-index 0
Shop Case Image	40	80	900	620	Z-index 1, `MouseFilter.Ignore`
Capital Icon	40	25	40	40	`Capital.png`
Capital Label	90	25	150	40	Font size 28, Gold color
Premium Card 1	80	100	180	260	Native card size
Premium Card 2	296	100	180	260	Gap: 36px
Premium Card 3	512	100	180	260
Premium Card 4	728	100	180	260
Premium Price 1	135	365	70	30	Centered under card
Premium Price 2	351	365	70	30
Premium Price 3	567	365	70	30
Premium Price 4	783	365	70	30
Reroll Premium Btn	950	200	200	50	"SHUFFLE (150)" + coin icon
Common Card 1	80	400	180	260
Common Card 2	296	400	180	260
Common Card 3	512	400	180	260
Common Card 4	728	400	180	260
Common Price 1	135	665	70	30
Common Price 2	351	665	70	30
Common Price 3	567	665	70	30
Common Price 4	783	665	70	30
Reroll Common Btn	950	500	200	50	"SHUFFLE (75)" + coin icon
Exit Button	540	665	200	50	"EXECUTE STRATEGY"

[!IMPORTANT]
All card slots use a 36px horizontal gap. Prices are centered 5px below the card bottom edge. Reroll buttons are right-aligned with a 30px margin from the right edge (1280 - 200 - 30 = 1050, adjusted to 950 for visual balance).

4. Reroll System Design

Current State (from `ShopUI.cs`)

Premium Reroll: 150 Capital
Common Reroll: 75 Capital
Totem Reroll: 150 Capital

Proposed Enhancements

Visual Feedback on Reroll:
- Cards flip out (rotate Y 0->90°, fade out).
- New cards flip in (rotate Y 90°->0°, fade in).
- Use Tween with 0.15s per card, staggered by 0.05s.
Reroll Button States:
- Affordable: Bright gold border, white text.
- Unaffordable: Dim red border, dark red text, disabled.
- Hover: Scale 1.05x, glow effect.
"Free Reroll" Event:
- First reroll per shop visit is free (or discounted).
- Display "FREE!" badge on button.

5. Dopamine-Focused Animations

Action	Animation	Duration
Card Purchase	Card scales up 1.1x, particles burst, slides to deck icon	0.3s
Insufficient Funds	Card shakes, red flash overlay, capital label pulses red	0.2s
Reroll	Cards flip out, new cards flip in with glow	0.5s total
Capital Change	Label scales 1.2x, flashes gold, bounces back	0.25s
Hover Card	Card lifts up 5px, shadow deepens, subtle glow	0.1s
Exit Button	Pulse animation while idle (breath effect)	1s loop

6. Audio Cues (Recommended)

Event	Sound Type
Card Hover	Soft "paper slide"
Card Purchase	Coin clink + "thump"
Reroll	Dice roll / card shuffle
Insufficient Funds	Negative "buzz"
Exit	Satisfying "click"

7. Implementation Priority

Priority	Task	Complexity
🟢 P0	Fix capital visibility (DONE)	Low
🟢 P0	Ensure all elements fit in 1280x720	Medium
🟡 P1	Add card hover animation	Low
🟡 P1	Add capital change animation	Low
🟡 P1	Add reroll button states	Medium
🟠 P2	Add card flip animation on reroll	High
🟠 P2	Add purchase particle effects	Medium
🔴 P3	Add audio cues	Low (assets needed)

8. Next Steps

Review this report and confirm layout dimensions.
Approve the pixel placement map.
I will implement the layout changes in ShopUI.cs.
I will add animations in priority order.