AppleHillsProduction/docs/SETUP_COMPLETE_Manual_Steps.md

✅ Booster Opening System - Auto-Generated Prefabs & Manual Setup

🎉 What I Created For You

I've successfully created the following prefabs using Unity MCP:

✅ Created Prefabs:

1. Assets/Prefabs/UI/DragAndDrop/BoosterVisual.prefab

   • Base visual prefab for booster packs
   • Has: Canvas, CanvasGroup, BoosterPackVisual component
   • Has children: TiltParent (with PackImage), ShakeParent

2. Assets/Prefabs/UI/Cards/BoosterPackPrefab.prefab

   • Main draggable booster prefab
   • Has: Image, BoosterPackDraggable component
   • Ready for visual prefab assignment

3. Assets/Prefabs/UI/Cards/FlippableCardPrefab.prefab

   • Card reveal prefab
   • Has: Image, CardDisplay, Button components
   • Ready for sprite assignment

📋 Existing Prefab:

4. Assets/Prefabs/UI/Cards/BoosterOpeningPage.prefab
   • Already has: RectTransform, CanvasGroup, BoosterOpeningPage component
   • Needs child structure added (see below)

---

🛠️ Manual Setup Required

Due to Unity MCP limitations with editing existing prefabs, you'll need to complete the setup manually. Here's EXACTLY what to do:

STEP 1: Configure BoosterVisual Prefab

1. Open Assets/Prefabs/UI/DragAndDrop/BoosterVisual.prefab
2. Select the root BoosterVisual object
3. In BoosterPackVisual component, assign references:
   • Tilt Parent: Drag TiltParent child
   • Shake Parent: Drag ShakeParent child
   • Pack Image: Drag TiltParent/PackImage
   • Pack Sprite: [YOU ASSIGN] - Your booster pack sprite asset
4. Set these values:

   Follow Speed: 30
   Rotation Amount: 20
   Rotation Speed: 20
   Auto Tilt Amount: 30
   Manual Tilt Amount: 20
   Tilt Speed: 20
   Use Scale Animations: ✓
   Scale On Hover: 1.15
   Scale On Drag: 1.25
   Use Idle Animation: ✓
   Idle Animation Speed: 1
   Opening Scale Punch: 0.5
   Opening Rotation Punch: 360
   Opening Duration: 0.5
   

5. Select TiltParent/PackImage
6. Set Image component:
   • Raycast Target: ☐ UNCHECK THIS
   • Size: 180x280 (or adjust to fit)
7. Save prefab

---

STEP 2: Configure BoosterPackPrefab

1. Open Assets/Prefabs/UI/Cards/BoosterPackPrefab.prefab
2. Select root BoosterPackPrefab
3. Set RectTransform:
   • Width: 200
   • Height: 300
4. Set Image component:
   • Sprite: [YOU ASSIGN] - Placeholder or your booster sprite
   • Raycast Target: ✓ MUST BE CHECKED
5. Set BoosterPackDraggable component:

   Move Speed: 50
   Smooth Movement: ✓
   Snap Duration: 0.3
   Visual Prefab: [Drag BoosterVisual.prefab]
   Instantiate Visual: ✓
   Is Selectable: ✓
   Selection Offset: 50
   Can Open On Drop: ☐
   Can Open On Double Click: ☐
   Can Tap To Open: ✓
   Max Taps To Open: 3
   

6. Save prefab

---

STEP 3: Configure FlippableCardPrefab

1. Open Assets/Prefabs/UI/Cards/FlippableCardPrefab.prefab
2. Select root FlippableCardPrefab
3. Set RectTransform:
   • Width: 200
   • Height: 300
4. Set Image component:
   • Sprite: [YOU ASSIGN] - Card back sprite
   • Raycast Target: ✓
5. CardDisplay component will be configured at runtime
6. Button component is ready (OnClick added at runtime)
7. Save prefab

---

STEP 4: Build BoosterOpeningPage Structure

⚠️ IMPORTANT: You need to manually add children to the BoosterOpeningPage prefab.

1. Open Assets/Prefabs/UI/Cards/BoosterOpeningPage.prefab in Prefab mode
2. Add the following structure:

BoosterOpeningPage (root - already exists)
├── Background (optional)
│   └── [Create: UI > Image]
│   └── [Set: Full screen, dark semi-transparent]
│
├── CloseButton
│   └── [Create: UI > Button - TextMeshPro]
│   └── [Position: Top-right corner]
│   └── [Text: "X" or "Close"]
│
├── BottomRightContainer
│   └── [Create: Empty GameObject]
│   └── [Add Component: SlotContainer]
│   └── [Position: X=800, Y=-400 (adjust for your canvas)]
│   └── [Anchor: Bottom-Right]
│   └── [Children: 3 slots below]
│       │
│       ├── Slot_0
│       │   └── [Create: Empty GameObject]
│       │   └── [Add Component: DraggableSlot]
│       │   └── [Size: 150x200]
│       │
│       ├── Slot_1
│       │   └── [Same as Slot_0]
│       │
│       └── Slot_2
│           └── [Same as Slot_0]
│
├── CenterSlot
│   └── [Create: Empty GameObject]
│   └── [Add Component: DraggableSlot]
│   └── [Position: Center (0, 0)]
│   └── [Size: 300x400]
│   └── [Anchor: Middle Center]
│
├── CardDisplayContainer
│   └── [Create: Empty GameObject]
│   └── [Position: Center (0, -100)]
│   └── [Anchor: Middle Center]
│
└── BoosterInstances
    └── [Create: Empty GameObject]
    └── [Children: 3 booster instances below]
        │
        ├── BoosterPack_0
        │   └── [Drag in: BoosterPackPrefab]
        │   └── [Set Active: ☐ UNCHECKED]
        │
        ├── BoosterPack_1
        │   └── [Drag in: BoosterPackPrefab]
        │   └── [Set Active: ☐ UNCHECKED]
        │
        └── BoosterPack_2
            └── [Drag in: BoosterPackPrefab]
            └── [Set Active: ☐ UNCHECKED]

---

STEP 5: Configure BottomRightContainer (SlotContainer)

1. Select BottomRightContainer
2. Set RectTransform:
   • Anchor: Bottom-Right
   • Pivot: (1, 0)
   • Position: X=-100, Y=100 (offset from corner)
3. Set SlotContainer component:

   Layout Type: Vertical
   Spacing: 120
   Center Slots: ✓
   Auto Register Children: ✓
   

4. For each child slot (Slot_0, Slot_1, Slot_2):
   • Width: 150, Height: 200
   • DraggableSlot settings:

     Slot Index: 0, 1, 2 (respectively)
     Is Locked: ☐
     Filter By Type: ✓
     Allowed Type Names: ["BoosterPackDraggable"]
     Apply Scale To Occupant: ☐
     

---

STEP 6: Configure CenterSlot (Opening Slot)

1. Select CenterSlot
2. Set RectTransform:
   • Anchor: Middle Center
   • Position: (0, 0)
   • Width: 300, Height: 400
3. Set DraggableSlot component:

   Slot Index: 0
   Is Locked: ☐
   Filter By Type: ✓
   Allowed Type Names: ["BoosterPackDraggable"]
   Apply Scale To Occupant: ✓  ← IMPORTANT!
   Occupant Scale: (2, 2, 1)    ← IMPORTANT!
   Scale Transition Duration: 0.3
   

---

STEP 7: Wire Up BoosterOpeningPage Component

1. Select root BoosterOpeningPage
2. In BoosterOpeningPage component, assign:

   [UI References]
   Canvas Group: [Auto-assigned or drag it]
   Close Button: [Drag CloseButton]
   
   [Booster Management]
   Booster Pack Instances (Array size: 3):
     Element 0: [Drag BoosterPack_0]
     Element 1: [Drag BoosterPack_1]
     Element 2: [Drag BoosterPack_2]
   Bottom Right Slots: [Drag BottomRightContainer]
   Center Opening Slot: [Drag CenterSlot]
   
   [Card Display]
   Card Display Container: [Drag CardDisplayContainer]
   Flippable Card Prefab: [Drag FlippableCardPrefab.prefab]
   Card Spacing: 150
   
   [Settings]
   Card Reveal Delay: 0.5
   Booster Disappear Duration: 0.5
   Transition Duration: 0.3
   

3. Save prefab

---

✅ Final Checklist

Before testing, verify:

BoosterVisual.prefab:

• TiltParent and ShakeParent are assigned in component
• Pack Image is assigned in component
• Pack Sprite is assigned (your asset)
• PackImage has raycastTarget = false

BoosterPackPrefab.prefab:

• Size is 200x300
• Base Image has raycastTarget = TRUE
• Visual Prefab is assigned (BoosterVisual)
• Can Tap To Open = ✓
• Max Taps To Open = 3

FlippableCardPrefab.prefab:

• Size is 200x300
• Has card back sprite assigned
• Has CardDisplay component
• Has Button component

BoosterOpeningPage.prefab:

• Has all children created (see structure above)
• BottomRightContainer has 3 DraggableSlots
• CenterSlot has scale settings configured
• BoosterInstances has 3 inactive booster prefab instances
• All references assigned in BoosterOpeningPage component

---

🎮 Testing

1. Test in Scene:

   • Add BoosterOpeningPage prefab to your scene
   • Make sure it's a child of your Canvas
   • Start inactive (UIPage system controls visibility)

2. Test Boosters:

   • Set CardSystemManager booster count to 3
   • Open album → Click booster button
   • Should see 3 boosters in bottom-right

3. Test Drag:

   • Drag a booster to center
   • Should scale up to 2x

4. Test Taps:

   • Tap booster 3 times
   • Should shake progressively
   • Should disappear and show cards

---

📝 What You Still Need To Do

1. Assign Sprites:

   • Booster pack sprite to BoosterVisual/PackImage
   • Card back sprite to FlippableCardPrefab

2. Build Page Structure:

   • Add all children to BoosterOpeningPage as outlined
   • Position elements appropriately for your canvas size

3. Wire References:

   • Assign all the references in BoosterOpeningPage component

4. Visual Polish:

   • Add optional particle effects to BoosterVisual
   • Style the close button
   • Add background image

---

💡 Tips

• Canvas Size: Adjust positions based on your canvas reference resolution
• Testing: Test one piece at a time (boosters, then slots, then page)
• Sprites: Use placeholder sprites initially, replace later
• Debugging: Enable Gizmos to see slot positions

---

🎉 Three prefabs are ready! Just follow the manual steps above to complete the setup! 🎉