Stash half-assed work on testing scene
This commit is contained in:
Michal Pikulski
committed by
Michal Pikulski
Michal Pikulski
parent
39d5890db4
commit
4e7f774386
@@ -92,27 +92,35 @@ For each state, follow this pattern:
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `IdleState`
|
||||
3. Add Component → **Card Idle State**
|
||||
4. **No child visuals needed** for this state
|
||||
|
||||
#### 2. FlippingState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `FlippingState`
|
||||
3. Add Component → **Card Flipping State**
|
||||
4. **Create CardBackVisual child:**
|
||||
- Right-click `FlippingState` → **UI → Image**
|
||||
- Right-click `IdleState` → **UI → Image**
|
||||
- Name it `CardBackVisual`
|
||||
- Set **Anchors** to stretch-stretch
|
||||
- Set **Left/Right/Top/Bottom** to `0`
|
||||
- Assign your card back sprite to **Source Image**
|
||||
- Drag this to **Card Back Visual** field on CardFlippingState component
|
||||
- Drag this to **Card Back Visual** field on CardIdleState component
|
||||
- **Note:** This state handles both idle behavior AND flip animation
|
||||
|
||||
#### 3. RevealedState
|
||||
#### 2. RevealedState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `RevealedState`
|
||||
3. Add Component → **Card Revealed State**
|
||||
4. **No child visuals needed** for this state
|
||||
4. **Create idle badge visuals:**
|
||||
- Right-click `RevealedState` → **Create Empty**
|
||||
- Name it `NewCardIdleBadge`
|
||||
- Add child **UI → Image** for small badge background
|
||||
- Add child **UI → TextMeshProUGUI** for "NEW!" text
|
||||
- Position at top-right corner (e.g., X offset +70, Y offset +100)
|
||||
- Drag `NewCardIdleBadge` to **New Card Idle Badge** field
|
||||
|
||||
- Right-click `RevealedState` → **Create Empty**
|
||||
- Name it `RepeatCardIdleBadge`
|
||||
- Add child **UI → Image** for small badge background
|
||||
- Add child **UI → TextMeshProUGUI** for "REPEAT" text
|
||||
- Position at top-right corner (same position as NEW badge)
|
||||
- Drag `RepeatCardIdleBadge` to **Repeat Card Idle Badge** field
|
||||
|
||||
#### 4. EnlargedNewState
|
||||
#### 3. EnlargedNewState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `EnlargedNewState`
|
||||
3. Add Component → **Card Enlarged New State**
|
||||
@@ -124,36 +132,34 @@ For each state, follow this pattern:
|
||||
- Position badge at top of card (e.g., Y offset +100)
|
||||
- Drag parent `NewCardBadge` to **New Card Badge** field on CardEnlargedNewState
|
||||
|
||||
#### 5. EnlargedRepeatState
|
||||
#### 4. EnlargedRepeatState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `EnlargedRepeatState`
|
||||
3. Add Component → **Card Enlarged Repeat State**
|
||||
4. **Create ProgressBarUI child:**
|
||||
- Right-click `EnlargedRepeatState` → **Create Empty**
|
||||
- Name it `ProgressBarContainer`
|
||||
- Add child **UI → Image** for background bar
|
||||
- Add child **UI → Image** for fill bar (set Image Type to **Filled**)
|
||||
- Add child **UI → TextMeshProUGUI** for "X/5" text
|
||||
- Right-click `EnlargedRepeatState` → **Create Empty** (or drag your ProgressBarUI prefab)
|
||||
- Name it `ProgressBarUI`
|
||||
- Add **ProgressBarController** component to this GameObject
|
||||
- Add **VerticalLayoutGroup** component (enable "Reverse Arrangement")
|
||||
- Create 5 child **UI → Image** elements under ProgressBarUI
|
||||
- Name them `ProgressElement1` through `ProgressElement5`
|
||||
- Position at bottom of card (e.g., Y offset -100)
|
||||
- Drag `ProgressBarContainer` to **Progress Bar Container** field
|
||||
- Drag fill bar to **Progress Bar Fill** field
|
||||
- Drag text to **Progress Text** field
|
||||
- Set **Cards To Upgrade** to `5`
|
||||
- Drag `ProgressBarController` component to **Progress Bar** field on CardEnlargedRepeatState
|
||||
|
||||
#### 6. DraggingState
|
||||
#### 5. DraggingState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `DraggingState`
|
||||
3. Add Component → **Card Dragging State**
|
||||
4. Set **Drag Scale** to `1.1`
|
||||
5. **No child visuals needed** for this state
|
||||
|
||||
#### 7. PlacedInSlotState
|
||||
#### 6. PlacedInSlotState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `PlacedInSlotState`
|
||||
3. Add Component → **Card Placed In Slot State**
|
||||
4. **No child visuals needed** for this state
|
||||
|
||||
#### 8. AlbumEnlargedState
|
||||
#### 7. AlbumEnlargedState
|
||||
1. Right-click `CardStateMachine` → **Create Empty**
|
||||
2. Name it `AlbumEnlargedState`
|
||||
3. Add Component → **Card Album Enlarged State**
|
||||
@@ -293,23 +299,31 @@ Card (RectTransform)
|
||||
└─ CardStateMachine
|
||||
├─ [AppleMachine component]
|
||||
├─ IdleState
|
||||
│ └─ [CardIdleState component]
|
||||
├─ FlippingState
|
||||
│ ├─ [CardFlippingState component]
|
||||
│ ├─ [CardIdleState component]
|
||||
│ └─ CardBackVisual (Image)
|
||||
├─ RevealedState
|
||||
│ └─ [CardRevealedState component]
|
||||
│ ├─ [CardRevealedState component]
|
||||
│ ├─ NewCardIdleBadge
|
||||
│ │ ├─ BadgeBackground (Image)
|
||||
│ │ └─ BadgeText (TextMeshProUGUI - "NEW!")
|
||||
│ └─ RepeatCardIdleBadge
|
||||
│ ├─ BadgeBackground (Image)
|
||||
│ └─ BadgeText (TextMeshProUGUI - "REPEAT")
|
||||
├─ EnlargedNewState
|
||||
│ ├─ [CardEnlargedNewState component]
|
||||
│ └─ NewCardBadge
|
||||
│ ├─ BadgeBackground (Image)
|
||||
│ └─ BadgeText (TextMeshProUGUI)
|
||||
│ └─ BadgeText (TextMeshProUGUI - "NEW CARD")
|
||||
├─ EnlargedRepeatState
|
||||
│ ├─ [CardEnlargedRepeatState component]
|
||||
│ └─ ProgressBarContainer
|
||||
│ ├─ BarBackground (Image)
|
||||
│ ├─ BarFill (Image - Filled type)
|
||||
│ └─ CountText (TextMeshProUGUI)
|
||||
│ └─ ProgressBarUI
|
||||
│ ├─ [ProgressBarController component]
|
||||
│ ├─ [VerticalLayoutGroup component - Reverse Arrangement]
|
||||
│ ├─ ProgressElement1 (Image - 1/5)
|
||||
│ ├─ ProgressElement2 (Image - 2/5)
|
||||
│ ├─ ProgressElement3 (Image - 3/5)
|
||||
│ ├─ ProgressElement4 (Image - 4/5)
|
||||
│ └─ ProgressElement5 (Image - 5/5)
|
||||
├─ DraggingState
|
||||
│ └─ [CardDraggingState component]
|
||||
├─ PlacedInSlotState
|
||||
@@ -354,7 +368,7 @@ Card (RectTransform)
|
||||
|
||||
- [ ] Created CardAnimationConfig asset
|
||||
- [ ] Created base Card prefab with all components
|
||||
- [ ] Created all 8 state GameObjects under CardStateMachine
|
||||
- [ ] Created all 7 state GameObjects under CardStateMachine
|
||||
- [ ] Assigned state-owned visuals (CardBackVisual, NewCardBadge, ProgressBarUI)
|
||||
- [ ] Wired up all component references
|
||||
- [ ] Tested state transitions in Play mode
|
||||
@@ -397,8 +411,8 @@ Card (RectTransform)
|
||||
|
||||
## Success Criteria
|
||||
|
||||
✅ Card prefab created with 8 functional states
|
||||
✅ State transitions work (Idle → Flipping → Revealed, etc.)
|
||||
✅ Card prefab created with 7 functional states
|
||||
✅ State transitions work (Idle → Revealed → Enlarged, etc.)
|
||||
✅ State-owned visuals activate/deactivate automatically
|
||||
✅ Animations play correctly (flip, enlarge, hover)
|
||||
✅ Click interactions work in all states
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Card State Machine Implementation Summary
|
||||
# Card State Machine Implementation Summary
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
@@ -6,17 +6,93 @@
|
||||
|
||||
```
|
||||
Card (RectTransform - primary animation target)
|
||||
├─ CardDisplay (always visible)
|
||||
├─ CardContext (shared references)
|
||||
├─ CardDisplay (always visible - shows card front)
|
||||
├─ CardContext (shared references + events)
|
||||
├─ CardAnimator (reusable animations)
|
||||
└─ CardStateMachine (AppleMachine)
|
||||
├─ IdleState/
|
||||
│ └─ CardBackVisual ← State owns this
|
||||
├─ FlippingState/
|
||||
│ └─ CardBackVisual ← State owns this
|
||||
├─ RevealedState/
|
||||
│ ├─ NewCardIdleBadge ← State owns this
|
||||
│ └─ RepeatCardIdleBadge ← State owns this
|
||||
├─ EnlargedNewState/
|
||||
│ └─ NewCardBadge ← State owns this
|
||||
└─ EnlargedRepeatState/
|
||||
└─ ProgressBarUI ← State owns this
|
||||
├─ EnlargedRepeatState/
|
||||
│ ├─ RepeatText ← State owns this
|
||||
│ └─ ProgressBarContainer/
|
||||
│ └─ ProgressBarUI (prefab with ProgressBarController)
|
||||
├─ DraggingState/ (no child visuals)
|
||||
├─ PlacedInSlotState/ (no child visuals)
|
||||
└─ AlbumEnlargedState/ (no child visuals)
|
||||
```
|
||||
|
||||
## State Flow Diagrams
|
||||
|
||||
### **Booster Opening Flow:**
|
||||
↓ [player clicks]
|
||||
2. FlippingState (flip animation + scale punch)
|
||||
1. IdleState (card back in assigned slot, hover enabled)
|
||||
↓ [player clicks - flip animation plays within IdleState]
|
||||
3a. IF NEW CARD:
|
||||
↓ [determine path based on card status]
|
||||
|
||||
2a. IF NEW CARD:
|
||||
3b. IF LEGENDARY REPEAT:
|
||||
→ [tap] → Fires OnCardDismissed
|
||||
→ Shrink → RevealedState
|
||||
3c. IF REPEAT (won't upgrade, e.g., 2/5):
|
||||
2b. IF LEGENDARY REPEAT:
|
||||
→ Skip enlarge → RevealedState (can't upgrade)
|
||||
|
||||
2c. IF REPEAT (won't upgrade, e.g., 2/5):
|
||||
→ EnlargedRepeatState
|
||||
3d. IF REPEAT (WILL upgrade, e.g., 5/5):
|
||||
→ [tap] → Fires OnCardDismissed
|
||||
→ Shrink → RevealedState
|
||||
|
||||
2d. IF REPEAT (WILL upgrade, e.g., 5/5):
|
||||
→ EnlargedRepeatState
|
||||
→ Show progress bar (5/5) + blink
|
||||
→ AUTO-UPGRADE (no tap needed)
|
||||
→ Fires OnUpgradeTriggered
|
||||
→ Update inventory
|
||||
→ Check if new/repeat at higher rarity:
|
||||
IF NEW at higher: → EnlargedNewState (higher rarity)
|
||||
4. RevealedState (normal size, waiting)
|
||||
→ [tap] → Fires OnCardDismissed
|
||||
→ Shrink → RevealedState
|
||||
|
||||
5. [When all cards complete]
|
||||
→ Fires OnCardInteractionComplete
|
||||
→ Waits for all 3 cards to finish
|
||||
|
||||
4. [When all cards complete]
|
||||
→ BoosterOpeningPage animates cards to album → Destroy
|
||||
```
|
||||
|
||||
### **Album Placement Flow:**
|
||||
```
|
||||
1. IdleState (card back in corner, hover enabled)
|
||||
↓ [player clicks]
|
||||
2. FlippingState (reveals which card it is)
|
||||
→ OnFlipComplete
|
||||
↓
|
||||
3. RevealedState
|
||||
→ OnCardInteractionComplete
|
||||
↓ [player drags]
|
||||
4. DraggingState (scaled up during drag)
|
||||
↓ [drop in slot]
|
||||
5. PlacedInSlotState (in album permanently)
|
||||
↓ [player clicks]
|
||||
6. AlbumEnlargedState
|
||||
→ Fires OnEnlargeRequested (page shows backdrop, reparents)
|
||||
↓ [player taps]
|
||||
→ Fires OnShrinkRequested (page prepares)
|
||||
→ Shrink animation
|
||||
↓
|
||||
5. PlacedInSlotState (back in slot)
|
||||
```
|
||||
|
||||
## Key Design Decisions
|
||||
@@ -32,81 +108,301 @@ Card (RectTransform - primary animation target)
|
||||
- **State child visuals** can be animated independently (e.g., rotating CardBackVisual during flip)
|
||||
- States decide WHAT to animate, CardAnimator provides HOW
|
||||
|
||||
### 3. Shared Resources
|
||||
- `CardContext` component provides states access to:
|
||||
- CardDisplay
|
||||
- CardAnimator
|
||||
- StateMachine
|
||||
- CardData
|
||||
- IsNewCard flag
|
||||
- States call `_context.Animator.PlayFlip(...)` instead of duplicating tween code
|
||||
### 3. Shared Resources via CardContext
|
||||
```csharp
|
||||
public class CardContext : MonoBehaviour
|
||||
{
|
||||
// Component references
|
||||
public CardDisplay CardDisplay { get; }
|
||||
public CardAnimator Animator { get; }
|
||||
public AppleMachine StateMachine { get; }
|
||||
public Transform RootTransform { get; }
|
||||
|
||||
// Card data
|
||||
public CardData CardData { get; }
|
||||
public bool IsNewCard { get; set; }
|
||||
public int RepeatCardCount { get; set; }
|
||||
public bool IsClickable { get; set; } // Prevents multi-flip in booster opening
|
||||
|
||||
// Events for external coordination (BoosterOpeningPage)
|
||||
public event Action<CardContext> OnFlipComplete;
|
||||
public event Action<CardContext> OnCardDismissed;
|
||||
public event Action<CardContext> OnCardInteractionComplete;
|
||||
public event Action<CardContext> OnUpgradeTriggered;
|
||||
|
||||
// Helper methods
|
||||
public void FireFlipComplete();
|
||||
public void FireCardDismissed();
|
||||
public void FireCardInteractionComplete();
|
||||
public void FireUpgradeTriggered();
|
||||
}
|
||||
```
|
||||
|
||||
### 4. State Transitions
|
||||
States explicitly transition via `_context.StateMachine.ChangeState("StateName")`
|
||||
|
||||
Example flow:
|
||||
Example:
|
||||
```csharp
|
||||
// In CardFlippingState.OnFlipComplete():
|
||||
if (_context.IsNewCard)
|
||||
_context.StateMachine.ChangeState("EnlargedNewState");
|
||||
else if (_context.RepeatCardCount > 0)
|
||||
_context.StateMachine.ChangeState("EnlargedRepeatState");
|
||||
```
|
||||
IdleState
|
||||
[click] → FlippingState
|
||||
[flip complete + IsNew] → EnlargedNewState
|
||||
[tap] → RevealedState
|
||||
|
||||
### 5. Progress Bar Architecture
|
||||
**ProgressBarController Component:**
|
||||
- Auto-detects child Image elements (5 images in GridLayout)
|
||||
- Fills from bottom to top (element[0] = bottom)
|
||||
- Blinks newest element with configurable timing
|
||||
- Callback when animation completes
|
||||
|
||||
**Usage:**
|
||||
```csharp
|
||||
progressBar.ShowProgress(currentCount, maxCount, OnProgressComplete);
|
||||
```
|
||||
|
||||
## Files Created
|
||||
|
||||
**Core Components:**
|
||||
- `CardContext.cs` - Shared context accessible to all states
|
||||
- `CardAnimator.cs` - Reusable animation methods
|
||||
- `CardAnimationConfig.cs` - ScriptableObject for designer tweaks
|
||||
### **Core Components:**
|
||||
- `StateMachine/CardContext.cs` - Shared context + events
|
||||
- `StateMachine/CardAnimator.cs` - Reusable animation methods (enlarge, shrink, flip, idle hover, etc.)
|
||||
- `ProgressBarController.cs` - Progress bar UI controller with blink animation
|
||||
|
||||
**State Implementations:**
|
||||
- `States/CardIdleState.cs` - Hover animation, click to flip
|
||||
- `States/CardFlippingState.cs` - Owns CardBackVisual, flip animation
|
||||
- `States/CardRevealedState.cs` - Waiting for interaction
|
||||
- `States/CardEnlargedNewState.cs` - Owns NewCardBadge, tap to dismiss
|
||||
- `States/CardEnlargedRepeatState.cs` - Owns ProgressBarUI, tap to dismiss
|
||||
### **Settings:**
|
||||
- `Core/Settings/CardSystemSettings.cs` - ScriptableObject for all card animation timings
|
||||
- `Core/Settings/ICardSystemSettings.cs` - Interface for settings access
|
||||
|
||||
## Next Steps
|
||||
### **State Implementations:**
|
||||
- `States/CardIdleState.cs` - Owns CardBackVisual, idle hover, click to flip (with click blocking)
|
||||
- `States/CardFlippingState.cs` - Owns CardBackVisual, flip animation, Legendary shortcut
|
||||
- `States/CardRevealedState.cs` - Owns NewCardIdleBadge + RepeatCardIdleBadge, fires OnCardInteractionComplete
|
||||
- `States/CardEnlargedNewState.cs` - Owns NewCardBadge, tap to shrink
|
||||
- `States/CardEnlargedRepeatState.cs` - Owns RepeatText + ProgressBarUI, auto-upgrade logic
|
||||
- `States/CardDraggingState.cs` - Drag handling for album placement
|
||||
- `States/CardPlacedInSlotState.cs` - In album slot, click to enlarge
|
||||
- `States/CardAlbumEnlargedState.cs` - Enlarged from album, tap to shrink
|
||||
|
||||
1. **Create remaining states:**
|
||||
- `CardDraggingState` (for album placement flow)
|
||||
- `CardPlacedInSlotState` (album slot interaction)
|
||||
- `CardAlbumEnlargedState` (enlarge from album)
|
||||
## Prefab Assembly Instructions
|
||||
|
||||
2. **Build Card prefab:**
|
||||
- Setup hierarchy with state children
|
||||
- Assign CardBackVisual, NewCardBadge, ProgressBarUI to states
|
||||
- Create CardAnimationConfig asset
|
||||
### **Card Prefab Hierarchy:**
|
||||
```
|
||||
Card (RectTransform)
|
||||
├─ CardDisplay (existing prefab)
|
||||
├─ CardContext (component)
|
||||
├─ FlippingState (CardFlippingState component)
|
||||
│ └─ CardBackVisual (Image)
|
||||
├─ CardAnimator (component)
|
||||
└─ CardStateMachine (AppleMachine)
|
||||
├─ IdleState (CardIdleState component)
|
||||
│ └─ CardBackVisual (Image)
|
||||
├─ RevealedState (CardRevealedState component)
|
||||
│ ├─ NewCardIdleBadge (Image/Text - "NEW!")
|
||||
│ └─ RepeatCardIdleBadge (Image/Text - "REPEAT")
|
||||
│ └─ ProgressBarContainer (GameObject)
|
||||
│ └─ ProgressBarUI (prefab instance)
|
||||
│ └─ NewCardBadge (Image/Text - "NEW CARD")
|
||||
├─ EnlargedRepeatState (CardEnlargedRepeatState component)
|
||||
│ ├─ RepeatText (Image/Text - "REPEAT CARD")
|
||||
│ └─ ProgressBarUI (ProgressBarController component + 5 Image children)
|
||||
├─ DraggingState (CardDraggingState component)
|
||||
ProgressBarUI
|
||||
├─ GridLayoutGroup (1 column, 5 rows, "Lower Right" corner start)
|
||||
├─ ProgressElement1 (Image)
|
||||
|
||||
3. **Migrate existing code:**
|
||||
- Update BoosterOpeningPage to use new Card
|
||||
- Update AlbumViewPage to use new Card
|
||||
- Remove old wrapper scripts (FlippableCard, AlbumCard, etc.)
|
||||
### **ProgressBarUI Prefab:**
|
||||
```
|
||||
ProgressBarUI (GameObject with ProgressBarController component)
|
||||
└─ ProgressElement5 (Image)
|
||||
├─ VerticalLayoutGroup (Reverse Arrangement enabled)
|
||||
└─ Children (5 Images, auto-detected):
|
||||
├─ ProgressElement1 (Image) - First child = 1/5
|
||||
├─ ProgressElement2 (Image)
|
||||
├─ ProgressElement3 (Image)
|
||||
├─ ProgressElement4 (Image)
|
||||
└─ ProgressElement5 (Image) - Last child = 5/5
|
||||
```
|
||||
|
||||
### **Component References to Assign:**
|
||||
**CardContext:**
|
||||
- cardDisplay → CardDisplay component
|
||||
- cardAnimator → CardAnimator component
|
||||
|
||||
**CardIdleState:**
|
||||
- cardBackVisual → CardBackVisual child GameObject
|
||||
|
||||
**CardFlippingState:**
|
||||
- cardBackVisual → CardBackVisual child GameObject
|
||||
|
||||
**CardRevealedState:**
|
||||
- progressBarContainer → ProgressBarContainer child GameObject
|
||||
- progressBar → ProgressBarController component (on ProgressBarUI prefab)
|
||||
- repeatCardIdleBadge → RepeatCardIdleBadge child GameObject
|
||||
|
||||
**CardEnlargedNewState:**
|
||||
- newCardBadge → NewCardBadge child GameObject
|
||||
|
||||
**CardEnlargedRepeatState:**
|
||||
- progressBar → ProgressBarController component (on ProgressBarUI child GameObject)
|
||||
- repeatText → RepeatText child GameObject
|
||||
|
||||
## Integration with BoosterOpeningPage
|
||||
|
||||
```csharp
|
||||
// When spawning cards:
|
||||
Card card = Instantiate(cardPrefab);
|
||||
CardContext context = card.GetComponent<CardContext>();
|
||||
|
||||
// Setup card data
|
||||
context.SetupCard(cardData, isNew: isNewCard, repeatCount: ownedCount);
|
||||
|
||||
// All cards start clickable
|
||||
context.IsClickable = true;
|
||||
|
||||
// Subscribe to events
|
||||
context.OnFlipComplete += OnCardFlipComplete;
|
||||
context.OnCardDismissed += OnCardDismissed;
|
||||
context.OnCardInteractionComplete += OnCardInteractionComplete;
|
||||
context.OnUpgradeTriggered += OnCardUpgraded;
|
||||
|
||||
// Start in IdleState
|
||||
context.StateMachine.ChangeState("IdleState");
|
||||
|
||||
// When a card starts flipping, block all others
|
||||
private void OnCardFlipComplete(CardContext flippingCard)
|
||||
{
|
||||
// Disable all cards to prevent multi-flip
|
||||
foreach (CardContext card in _allCards)
|
||||
{
|
||||
card.IsClickable = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Track completion
|
||||
private void OnCardInteractionComplete(CardContext card)
|
||||
{
|
||||
_cardsCompletedInteraction++;
|
||||
|
||||
if (_cardsCompletedInteraction == 3)
|
||||
{
|
||||
AnimateCardsToAlbum(); // All cards revealed, animate to album
|
||||
}
|
||||
else
|
||||
{
|
||||
// Re-enable unflipped cards
|
||||
foreach (CardContext c in _allCards)
|
||||
{
|
||||
if (c.StateMachine.CurrentState.name == "IdleState")
|
||||
{
|
||||
c.IsClickable = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Benefits vs Old System
|
||||
|
||||
| Aspect | Old System | New System |
|
||||
|--------|-----------|------------|
|
||||
| Components per card | 5+ wrappers | 1 root + states |
|
||||
| Animation code duplication | ~150 lines across 4 files | 0 (shared CardAnimator) |
|
||||
| State tracking | 12+ boolean flags | 1 state machine |
|
||||
| Visual element management | Manual SetActive calls | Automatic via state activation |
|
||||
| Adding new behaviors | Modify 3-4 components | Add 1 new state GameObject |
|
||||
| Prefab nesting | 5 layers deep | Flat (states as children) |
|
||||
| Debugging state | Check 12 booleans | Look at active state name |
|
||||
| Components per card | FlippableCard + AlbumCard + wrappers | 1 Card + states |
|
||||
| Animation code duplication | ~200 lines across 5 files | 0 (shared CardAnimator) |
|
||||
| State tracking | 12+ boolean flags (_isFlipped, _isFlipping, _isWaitingForTap, etc.) | 1 active state name |
|
||||
| Visual element management | Manual SetActive() in 8+ places | Automatic via state activation |
|
||||
| Adding new behaviors | Modify 3-4 components + events | Add 1 new state GameObject |
|
||||
| Prefab nesting | FlippableCard → AlbumCard → CardDisplay (5 layers) | Card → States (flat hierarchy) |
|
||||
| Debugging state | Check 12 booleans across files | Look at active state name in inspector |
|
||||
| Progress bar logic | 50 lines in FlippableCard.ShowProgressBar() | Isolated in ProgressBarController |
|
||||
| Upgrade logic | TriggerUpgradeTransition (80 lines in FlippableCard) | TriggerUpgrade (isolated in CardEnlargedRepeatState) |
|
||||
| Event coordination | 4 events on FlippableCard, 2 on AlbumCard | 4 events on CardContext (centralized) |
|
||||
|
||||
## Example: Adding New State
|
||||
## Testing Checklist
|
||||
|
||||
Want to add a "Trading" state where card shows trade UI?
|
||||
- [ ] Booster opening: NEW card shows badge → tap → shrinks → shows NEW idle badge
|
||||
- [ ] Booster opening: REPEAT card (2/5) shows REPEAT text + progress → blink → tap → shrinks → shows REPEAT idle badge
|
||||
- [ ] Booster opening: REPEAT card (5/5) auto-upgrades → shows NEW at higher rarity
|
||||
- [ ] Booster opening: Legendary repeat skips enlarge
|
||||
- [ ] Booster opening: Click blocking prevents multi-flip
|
||||
- [ ] Booster opening: All 3 cards complete → animate to album
|
||||
- [ ] Album placement: Card in corner → click → reveals → drag → place in slot
|
||||
- [ ] Album placement: Card in slot → click → enlarges → tap → shrinks back
|
||||
- [ ] Cascading upgrades (Common → Uncommon → Rare in one reveal)
|
||||
- [ ] Progress bar shows correctly (1/5, 2/5, 3/5, 4/5, 5/5)
|
||||
- [ ] Progress bar blinks newest element
|
||||
- [ ] Idle hover animation works in both flows
|
||||
- [ ] Hover scale works on pointer enter/exit
|
||||
|
||||
**Old system:** Modify FlippableCard, AlbumCard, add new wrapper, update events, etc.
|
||||
## Integration Work Remaining
|
||||
|
||||
1. Update BoosterOpeningPage to use new Card prefab instead of FlippableCard
|
||||
2. Update AlbumViewPage to use new Card prefab instead of AlbumCard
|
||||
3. Migrate album placement drag/drop to use DraggingState
|
||||
4. Remove old FlippableCard.cs and AlbumCard.cs after migration
|
||||
5. **(Optional)** Add Jiggle() animation to CardAnimator for clicking inactive cards
|
||||
|
||||
## Migration Path
|
||||
|
||||
**Phase 1: Side-by-side (Current)**
|
||||
- New state machine exists alongside old FlippableCard/AlbumCard
|
||||
- Can test new system without breaking existing functionality
|
||||
|
||||
**Phase 2: Booster Opening Migration**
|
||||
- Update BoosterOpeningPage to spawn new Card prefab
|
||||
- Remove FlippableCard references
|
||||
- Test all booster flows
|
||||
|
||||
**Phase 3: Album Migration**
|
||||
- Update AlbumViewPage to spawn new Card prefab
|
||||
- Remove AlbumCard references
|
||||
- Test album placement and enlarge
|
||||
|
||||
**Phase 4: Cleanup**
|
||||
- Delete FlippableCard.cs
|
||||
- Delete AlbumCard.cs
|
||||
- Delete old wrapper components
|
||||
- Clean up unused prefab variants
|
||||
|
||||
## Example: Adding New Card Behavior
|
||||
|
||||
**Scenario:** Add a "Trading" state where card shows trade UI?
|
||||
|
||||
**Old system:**
|
||||
1. Modify FlippableCard.cs (add boolean, methods, events)
|
||||
2. Modify AlbumCard.cs (add pass-through logic)
|
||||
3. Update 3-4 wrapper components
|
||||
4. Add new events and subscriptions
|
||||
5. Manually manage trade UI visibility
|
||||
|
||||
**New system:**
|
||||
1. Create `CardTradingState.cs`
|
||||
2. Add `TradingState` GameObject under CardStateMachine
|
||||
1. Create `CardTradingState.cs`:
|
||||
```csharp
|
||||
public class CardTradingState : AppleState
|
||||
{
|
||||
[SerializeField] private GameObject tradeUI;
|
||||
|
||||
public override void OnEnterState()
|
||||
{
|
||||
// tradeUI automatically activates with state!
|
||||
}
|
||||
}
|
||||
```
|
||||
2. Add TradingState GameObject under CardStateMachine
|
||||
3. Add trade UI as child of TradingState
|
||||
4. Implement `OnEnterState()` to show UI
|
||||
5. Call `ChangeState("TradingState")` from wherever needed
|
||||
4. Call `ChangeState("TradingState")` from wherever needed
|
||||
|
||||
**Done! Zero other files modified.**
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
The new state machine implementation successfully replicates all core FlippableCard/AlbumCard functionality with:
|
||||
- ✅ Cleaner architecture (state pattern vs boolean soup)
|
||||
- ✅ Less code duplication (shared CardAnimator)
|
||||
- ✅ Easier debugging (visible state names)
|
||||
- ✅ Simpler extension (add states vs modify monoliths)
|
||||
- ✅ Better separation of concerns (each state owns its visuals)
|
||||
|
||||
**Status: Core implementation complete, ready for prefab assembly and integration testing.**
|
||||
|
||||
Done! No other files touched.
|
||||
|
||||
|
||||
285
docs/cards_wip/card_test_scene_quick_reference.md
Normal file
285
docs/cards_wip/card_test_scene_quick_reference.md
Normal file
@@ -0,0 +1,285 @@
|
||||
# Card Test Scene - Quick Reference
|
||||
|
||||
## What Was Created
|
||||
|
||||
### 📁 Scripts
|
||||
- **CardTestController.cs** - Main testing controller with UI event handlers
|
||||
- Location: `Assets/Scripts/UI/CardSystem/Testing/CardTestController.cs`
|
||||
|
||||
### 📄 Documentation
|
||||
- **card_test_scene_setup_guide.md** - Complete scene setup instructions (17 steps)
|
||||
- Location: `docs/cards_wip/card_test_scene_setup_guide.md`
|
||||
|
||||
---
|
||||
|
||||
## Quick Start Guide
|
||||
|
||||
### Step-by-Step Setup (Condensed)
|
||||
|
||||
1. **Create Scene**
|
||||
- New scene → Save as `CardSystemTestScene.unity`
|
||||
|
||||
2. **Create Canvas**
|
||||
- UI → Canvas (Screen Space, 1920x1080 reference)
|
||||
|
||||
3. **Left Side - Card Test Area (70% width)**
|
||||
```
|
||||
CardTestArea (container)
|
||||
├─ CardSpawnPoint → [Instantiate Card prefab here]
|
||||
├─ AlbumSlot1 (bottom-left, 150,150)
|
||||
└─ AlbumSlot2 (bottom-right, -150,150)
|
||||
```
|
||||
|
||||
4. **Right Side - Control Panel (30% width)**
|
||||
```
|
||||
TestControlPanel (dark gray panel)
|
||||
├─ CurrentStateText (yellow)
|
||||
├─ State Transition Buttons (7)
|
||||
├─ Simulation Buttons (4)
|
||||
├─ Card Setup Controls (toggle, slider, dropdown)
|
||||
├─ Clickability Toggle
|
||||
├─ Animation Test Buttons (4)
|
||||
├─ Event Log (scroll view)
|
||||
└─ Utility Buttons (2)
|
||||
```
|
||||
|
||||
5. **Add Controller**
|
||||
- Empty GameObject → CardTestController component
|
||||
- Assign all 11 references from hierarchy
|
||||
|
||||
6. **Wire Up Buttons**
|
||||
- Connect all button OnClick() events to CardTestController methods
|
||||
|
||||
---
|
||||
|
||||
## Testing Workflows
|
||||
|
||||
### Test Flow 1: NEW Card
|
||||
1. Click "Simulate NEW Card"
|
||||
2. Click card → flips → shows NEW badge
|
||||
3. Tap enlarged card → shrinks to RevealedState
|
||||
4. Check event log for OnFlipComplete, OnCardDismissed, OnCardInteractionComplete
|
||||
|
||||
### Test Flow 2: REPEAT Card
|
||||
1. Set Repeat Count slider to 3
|
||||
2. Click "Simulate REPEAT Card"
|
||||
3. Click card → flips → shows progress bar (3/5) → blinks
|
||||
4. Tap → shrinks to RevealedState
|
||||
5. Verify REPEAT badge shows in RevealedState
|
||||
|
||||
### Test Flow 3: UPGRADE
|
||||
1. Click "Simulate UPGRADE (5/5)"
|
||||
2. Click card → flips → progress (5/5) → auto-upgrades
|
||||
3. Shows NEW badge at higher rarity
|
||||
4. Check event log for OnUpgradeTriggered
|
||||
|
||||
### Test Flow 4: Album Placement
|
||||
1. Click "Simulate Album Placement"
|
||||
2. Drag card to AlbumSlot1 or AlbumSlot2
|
||||
3. Card enters DraggingState (scales up)
|
||||
4. Drop → PlacedInSlotState
|
||||
5. Click card → AlbumEnlargedState
|
||||
6. Tap → back to PlacedInSlotState
|
||||
|
||||
### Test Flow 5: Manual State Jumping
|
||||
1. Click any state button (e.g., "Enlarged New")
|
||||
2. Verify visuals appear correctly
|
||||
3. Check Current State display updates
|
||||
4. Try rapid state changes
|
||||
|
||||
---
|
||||
|
||||
## Key Features
|
||||
|
||||
### State Transition Buttons
|
||||
- **7 buttons** for direct state access
|
||||
- Instantly jump to any state (bypasses normal flow)
|
||||
- Useful for testing edge cases
|
||||
|
||||
### Simulation Buttons
|
||||
- **Simulate NEW Card** - Full new card reveal flow
|
||||
- **Simulate REPEAT Card** - Progress bar display flow
|
||||
- **Simulate UPGRADE (5/5)** - Auto-upgrade flow
|
||||
- **Simulate Album Placement** - Drag/drop to album flow
|
||||
|
||||
### Card Setup Controls
|
||||
- **Is New Toggle** - Mark card as new/repeat
|
||||
- **Repeat Count Slider** - Set owned count (0-5)
|
||||
- **Rarity Dropdown** - Change card rarity
|
||||
- **Apply Button** - Apply all settings to card
|
||||
|
||||
### Animation Tests
|
||||
- **Play Flip** - Trigger flip animation manually
|
||||
- **Play Enlarge** - Enlarge card without state change
|
||||
- **Play Shrink** - Shrink card to normal size
|
||||
- **Start Idle Hover** - Begin hover animation
|
||||
|
||||
### Event Log
|
||||
- **Real-time event tracking** - See all CardContext events
|
||||
- **Timestamped** - Know when events fired
|
||||
- **Last 20 events** - Auto-truncates
|
||||
- **Clear button** - Reset log
|
||||
|
||||
### Utility Controls
|
||||
- **Is Clickable Toggle** - Test click blocking
|
||||
- **Reset Position** - Return card to center
|
||||
- **Clear Log** - Reset event log
|
||||
|
||||
---
|
||||
|
||||
## CardTestController API Reference
|
||||
|
||||
### Public Methods (Called by UI Buttons)
|
||||
|
||||
#### State Transitions
|
||||
```csharp
|
||||
void TransitionToIdleState()
|
||||
void TransitionToRevealedState()
|
||||
void TransitionToEnlargedNewState()
|
||||
void TransitionToEnlargedRepeatState()
|
||||
void TransitionToDraggingState()
|
||||
void TransitionToPlacedInSlotState()
|
||||
void TransitionToAlbumEnlargedState()
|
||||
```
|
||||
|
||||
#### Simulations
|
||||
```csharp
|
||||
void SimulateNewCardFlow() // NEW card: Idle → Flip → EnlargedNew → RevealedState
|
||||
void SimulateRepeatCardFlow() // REPEAT: Idle → Flip → EnlargedRepeat → RevealedState
|
||||
void SimulateUpgradeFlow() // UPGRADE: Idle → Flip → EnlargedRepeat → Auto-upgrade → EnlargedNew
|
||||
void SimulateAlbumPlacementFlow() // Album: RevealedState → ready to drag
|
||||
```
|
||||
|
||||
#### Card Setup
|
||||
```csharp
|
||||
void ApplyCardSetup() // Apply toggle/slider/dropdown values to card
|
||||
```
|
||||
|
||||
#### Animations
|
||||
```csharp
|
||||
void PlayFlipAnimation() // Manually trigger flip
|
||||
void PlayEnlargeAnimation() // Enlarge without state change
|
||||
void PlayShrinkAnimation() // Shrink to normal size
|
||||
void StartIdleHoverAnimation() // Start hover bobbing
|
||||
void StopIdleHoverAnimation() // Stop hover (change state to stop)
|
||||
```
|
||||
|
||||
#### Utilities
|
||||
```csharp
|
||||
void ResetCardPosition() // Return card to center position
|
||||
void ClearEventLog() // Clear event log display
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Inspector Setup Checklist
|
||||
|
||||
When you add CardTestController component, assign these references:
|
||||
|
||||
### Card References
|
||||
- ✅ **Test Card** → TestCard (from hierarchy)
|
||||
- ✅ **Test Card Data** → CardData ScriptableObject asset
|
||||
|
||||
### Slot References
|
||||
- ✅ **Slot 1** → AlbumSlot1 (from hierarchy)
|
||||
- ✅ **Slot 2** → AlbumSlot2 (from hierarchy)
|
||||
|
||||
### UI References (11 total)
|
||||
- ✅ **Event Log Text** → EventLogText (in scroll view)
|
||||
- ✅ **Is New Toggle** → Toggle_IsNew
|
||||
- ✅ **Repeat Count Slider** → Slider_RepeatCount
|
||||
- ✅ **Repeat Count Label** → Label_RepeatCount
|
||||
- ✅ **Rarity Dropdown** → Dropdown_Rarity
|
||||
- ✅ **Is Clickable Toggle** → Toggle_IsClickable
|
||||
- ✅ **Current State Text** → CurrentStateText
|
||||
|
||||
---
|
||||
|
||||
## Expected Event Sequence
|
||||
|
||||
### NEW Card Flow
|
||||
```
|
||||
[0.00s] Card Test Scene Initialized
|
||||
[0.50s] Simulating NEW CARD flow - click card to flip
|
||||
[1.20s] Event: OnFlipComplete - IsNew=True, RepeatCount=0
|
||||
[1.20s] Transitioned to EnlargedNewState
|
||||
[3.40s] Event: OnCardDismissed
|
||||
[3.40s] Transitioned to RevealedState
|
||||
[3.40s] Event: OnCardInteractionComplete
|
||||
```
|
||||
|
||||
### REPEAT Card Flow (3/5)
|
||||
```
|
||||
[0.00s] Card Test Scene Initialized
|
||||
[0.50s] Simulating REPEAT CARD flow (3/5) - click card to flip
|
||||
[1.20s] Event: OnFlipComplete - IsNew=False, RepeatCount=3
|
||||
[1.20s] Transitioned to EnlargedRepeatState
|
||||
[2.80s] Progress bar blink complete
|
||||
[4.10s] Event: OnCardDismissed
|
||||
[4.10s] Transitioned to RevealedState
|
||||
[4.10s] Event: OnCardInteractionComplete
|
||||
```
|
||||
|
||||
### UPGRADE Flow (5/5)
|
||||
```
|
||||
[0.00s] Card Test Scene Initialized
|
||||
[0.50s] Simulating UPGRADE flow (5/5) - click card to flip
|
||||
[1.20s] Event: OnFlipComplete - IsNew=False, RepeatCount=5
|
||||
[1.20s] Transitioned to EnlargedRepeatState
|
||||
[2.80s] Event: OnUpgradeTriggered - New Rarity=Uncommon
|
||||
[2.80s] Transitioned to EnlargedNewState
|
||||
[4.50s] Event: OnCardDismissed
|
||||
[4.50s] Transitioned to RevealedState
|
||||
[4.50s] Event: OnCardInteractionComplete
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting Quick Fixes
|
||||
|
||||
| Issue | Quick Fix |
|
||||
|-------|-----------|
|
||||
| Buttons don't work | Check EventSystem exists, verify OnClick() wired up |
|
||||
| Card not visible | Verify Card prefab instantiated, check CardSpawnPoint |
|
||||
| Events don't log | Verify EventLogText assigned, check Console for errors |
|
||||
| State won't change | Check state names match exactly (case-sensitive) |
|
||||
| Progress bar missing | Verify ProgressBarUI child exists in EnlargedRepeatState |
|
||||
| Can't drag card | Ensure AlbumCardSlot components exist on slots |
|
||||
| Current State shows "Unknown" | Normal if no state active, check card is in a state |
|
||||
|
||||
---
|
||||
|
||||
## Performance Notes
|
||||
|
||||
- **Event Log** updates every event (can be 20+ times per flow)
|
||||
- **Current State Display** updates every 0.5 seconds (not every frame)
|
||||
- **Layout Groups** may cause GC spikes - normal for test scene
|
||||
- Target: **60fps** with card animations
|
||||
|
||||
---
|
||||
|
||||
## Next Steps After Setup
|
||||
|
||||
1. ✅ Create scene following guide
|
||||
2. ✅ Test all 7 state transitions
|
||||
3. ✅ Test all 4 simulation flows
|
||||
4. ✅ Verify event log shows all events
|
||||
5. ✅ Test drag/drop to album slots
|
||||
6. ✅ Test click blocking toggle
|
||||
7. ✅ Take screenshots of working states for documentation
|
||||
8. ✅ Report any bugs found in state machine
|
||||
9. ✅ Use scene for future card feature development
|
||||
|
||||
---
|
||||
|
||||
## Files to Reference
|
||||
|
||||
- **Full Setup Guide**: `docs/cards_wip/card_test_scene_setup_guide.md`
|
||||
- **Card Assembly Guide**: `docs/cards_wip/card_prefab_assembly_guide.md`
|
||||
- **Implementation Summary**: `docs/cards_wip/card_system_implementation_summary.md`
|
||||
- **Test Controller Script**: `Assets/Scripts/UI/CardSystem/Testing/CardTestController.cs`
|
||||
|
||||
---
|
||||
|
||||
**Happy Testing! 🎴**
|
||||
|
||||
589
docs/cards_wip/card_test_scene_setup_guide.md
Normal file
589
docs/cards_wip/card_test_scene_setup_guide.md
Normal file
@@ -0,0 +1,589 @@
|
||||
# Card Test Scene Setup Guide
|
||||
|
||||
## Overview
|
||||
This guide walks you through creating a complete testing scene for the Card state machine system. The scene provides manual controls to test all state transitions, animations, and gameplay flows.
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Create New Scene
|
||||
|
||||
1. In Unity, **File → New Scene**
|
||||
2. Select **Basic (Built-in)** or **2D** template
|
||||
3. Save as `Assets/Scenes/CardSystemTestScene.unity`
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Setup Canvas
|
||||
|
||||
### Create Main Canvas
|
||||
1. Right-click in Hierarchy → **UI → Canvas**
|
||||
2. Name it `TestCanvas`
|
||||
3. In Canvas component:
|
||||
- **Render Mode**: Screen Space - Overlay
|
||||
- **UI Scale Mode**: Scale With Screen Size
|
||||
- **Reference Resolution**: 1920 x 1080
|
||||
- **Match**: 0.5 (balance between width and height)
|
||||
|
||||
### Verify EventSystem
|
||||
- Unity should auto-create **EventSystem** GameObject
|
||||
- If not, right-click Hierarchy → **UI → Event System**
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Create CardTestArea (Left Side)
|
||||
|
||||
### Create CardTestArea Container
|
||||
1. Right-click `TestCanvas` → **Create Empty**
|
||||
2. Name it `CardTestArea`
|
||||
3. Add **RectTransform** component (should auto-add)
|
||||
4. Configure RectTransform:
|
||||
- **Anchors**: Left-Stretch (left side, vertical stretch)
|
||||
- **Pivot**: (0, 0.5)
|
||||
- **Pos X**: 0
|
||||
- **Pos Y**: 0
|
||||
- **Width**: 1344 (70% of 1920)
|
||||
- **Height**: 0 (auto from anchor stretch)
|
||||
|
||||
### Add Background (Optional)
|
||||
1. Right-click `CardTestArea` → **UI → Image**
|
||||
2. Name it `Background`
|
||||
3. Set **Color**: Light gray (R:0.9, G:0.9, B:0.9, A:0.3)
|
||||
4. Set **Anchors**: Stretch-Stretch
|
||||
|
||||
### Add Card Spawn Point
|
||||
1. Right-click `CardTestArea` → **Create Empty**
|
||||
2. Name it `CardSpawnPoint`
|
||||
3. Configure RectTransform:
|
||||
- **Anchors**: Center-Middle
|
||||
- **Pos X**: 0
|
||||
- **Pos Y**: 100 (slightly above center)
|
||||
- **Width**: 200
|
||||
- **Height**: 280
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Instantiate Test Card
|
||||
|
||||
1. **Drag your Card prefab** from Project into `CardSpawnPoint`
|
||||
2. Name it `TestCard`
|
||||
3. Ensure it's positioned at (0, 0, 0) local position
|
||||
4. The card should be centered in the CardTestArea
|
||||
|
||||
**Note:** If you haven't created the Card prefab yet, follow the `card_prefab_assembly_guide.md` first.
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Create Album Slots for Drag Testing
|
||||
|
||||
### Create Slot 1 (Bottom-Left)
|
||||
1. Right-click `CardTestArea` → **Create Empty**
|
||||
2. Name it `AlbumSlot1`
|
||||
3. Add Component → **Album Card Slot** (your existing script)
|
||||
4. Configure RectTransform:
|
||||
- **Anchors**: Bottom-Left
|
||||
- **Pivot**: (0.5, 0.5)
|
||||
- **Pos X**: 150
|
||||
- **Pos Y**: 150
|
||||
- **Width**: 200
|
||||
- **Height**: 280
|
||||
|
||||
5. Add child **UI → Image** for visual slot background:
|
||||
- Name it `SlotBackground`
|
||||
- Set **Color**: White with alpha 0.5
|
||||
- Set **Anchors**: Stretch-Stretch
|
||||
- Assign a slot frame sprite if available
|
||||
|
||||
### Create Slot 2 (Bottom-Right)
|
||||
1. Duplicate `AlbumSlot1` (Ctrl+D)
|
||||
2. Name it `AlbumSlot2`
|
||||
3. Configure RectTransform:
|
||||
- **Anchors**: Bottom-Right
|
||||
- **Pivot**: (0.5, 0.5)
|
||||
- **Pos X**: -150 (negative for right side)
|
||||
- **Pos Y**: 150
|
||||
- **Width**: 200
|
||||
- **Height**: 280
|
||||
|
||||
---
|
||||
|
||||
## Step 6: Create Test Control Panel (Right Side)
|
||||
|
||||
### Create Panel Container
|
||||
1. Right-click `TestCanvas` → **UI → Panel**
|
||||
2. Name it `TestControlPanel`
|
||||
3. Configure RectTransform:
|
||||
- **Anchors**: Right-Stretch (right side, vertical stretch)
|
||||
- **Pivot**: (1, 0.5)
|
||||
- **Pos X**: 0
|
||||
- **Pos Y**: 0
|
||||
- **Width**: 576 (30% of 1920)
|
||||
- **Height**: 0 (auto from anchor stretch)
|
||||
4. Set **Color**: Dark gray (R:0.2, G:0.2, B:0.2, A:0.95)
|
||||
|
||||
### Add Vertical Layout Group
|
||||
1. Select `TestControlPanel`
|
||||
2. Add Component → **Vertical Layout Group**
|
||||
3. Configure:
|
||||
- **Child Alignment**: Upper Center
|
||||
- **Control Child Size**: Width ✓, Height ✗
|
||||
- **Child Force Expand**: Width ✓, Height ✗
|
||||
- **Padding**: Left=20, Right=20, Top=20, Bottom=20
|
||||
- **Spacing**: 10
|
||||
|
||||
### Add Content Size Fitter
|
||||
1. Select `TestControlPanel`
|
||||
2. Add Component → **Content Size Fitter**
|
||||
3. Configure:
|
||||
- **Horizontal Fit**: Unconstrained
|
||||
- **Vertical Fit**: Preferred Size
|
||||
|
||||
---
|
||||
|
||||
## Step 7: Add Current State Display
|
||||
|
||||
1. Right-click `TestControlPanel` → **UI → Text - TextMeshPro**
|
||||
2. Name it `CurrentStateText`
|
||||
3. Configure:
|
||||
- **Text**: "Current State: None"
|
||||
- **Font Size**: 24
|
||||
- **Alignment**: Center
|
||||
- **Color**: Yellow
|
||||
- **Auto Size**: Min=16, Max=28
|
||||
4. Add **Layout Element** component:
|
||||
- **Preferred Height**: 40
|
||||
|
||||
---
|
||||
|
||||
## Step 8: Create State Transition Buttons Section
|
||||
|
||||
### Create Section Header
|
||||
1. Right-click `TestControlPanel` → **UI → Text - TextMeshPro**
|
||||
2. Name it `StateButtonsHeader`
|
||||
3. Configure:
|
||||
- **Text**: "State Transitions"
|
||||
- **Font Size**: 20
|
||||
- **Font Style**: Bold
|
||||
- **Color**: White
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Create Button Container
|
||||
1. Right-click `TestControlPanel` → **Create Empty**
|
||||
2. Name it `StateButtonsContainer`
|
||||
3. Add **Vertical Layout Group**:
|
||||
- **Spacing**: 5
|
||||
- **Child Force Expand**: Width ✓, Height ✗
|
||||
4. Add **Layout Element**: Preferred Height = 350
|
||||
|
||||
### Add State Transition Buttons (7 buttons)
|
||||
For each state, create a button:
|
||||
|
||||
1. Right-click `StateButtonsContainer` → **UI → Button - TextMeshPro**
|
||||
2. Name it `Button_[StateName]` (e.g., `Button_IdleState`)
|
||||
3. Configure **Button** component:
|
||||
- **On Click()**: Drag `CardTestController` GameObject
|
||||
- Select function: `CardTestController → TransitionTo[StateName]`
|
||||
4. Configure button **Text (TMP)**:
|
||||
- Set text to state name (e.g., "Idle State")
|
||||
- **Font Size**: 16
|
||||
5. Add **Layout Element**: Preferred Height = 40
|
||||
|
||||
**Create these buttons:**
|
||||
- `Button_IdleState` → "Idle State"
|
||||
- `Button_RevealedState` → "Revealed State"
|
||||
- `Button_EnlargedNewState` → "Enlarged New"
|
||||
- `Button_EnlargedRepeatState` → "Enlarged Repeat"
|
||||
- `Button_DraggingState` → "Dragging State"
|
||||
- `Button_PlacedInSlotState` → "Placed In Slot"
|
||||
- `Button_AlbumEnlargedState` → "Album Enlarged"
|
||||
|
||||
---
|
||||
|
||||
## Step 9: Create Simulation Buttons Section
|
||||
|
||||
### Create Section Header
|
||||
1. Right-click `TestControlPanel` → **UI → Text - TextMeshPro**
|
||||
2. Name it `SimulationHeader`
|
||||
3. Configure:
|
||||
- **Text**: "Flow Simulations"
|
||||
- **Font Size**: 20
|
||||
- **Font Style**: Bold
|
||||
- **Color**: Cyan
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Create Simulation Buttons Container
|
||||
1. Right-click `TestControlPanel` → **Create Empty**
|
||||
2. Name it `SimulationButtonsContainer`
|
||||
3. Add **Vertical Layout Group** (spacing=5)
|
||||
4. Add **Layout Element**: Preferred Height = 200
|
||||
|
||||
### Add Simulation Buttons (4 buttons)
|
||||
Create these buttons (same process as state buttons):
|
||||
|
||||
1. `Button_SimulateNew` → "Simulate NEW Card" → `SimulateNewCardFlow()`
|
||||
2. `Button_SimulateRepeat` → "Simulate REPEAT Card" → `SimulateRepeatCardFlow()`
|
||||
3. `Button_SimulateUpgrade` → "Simulate UPGRADE (5/5)" → `SimulateUpgradeFlow()`
|
||||
4. `Button_SimulateAlbum` → "Simulate Album Placement" → `SimulateAlbumPlacementFlow()`
|
||||
|
||||
---
|
||||
|
||||
## Step 10: Create Card Setup Controls Section
|
||||
|
||||
### Create Section Header
|
||||
1. Right-click `TestControlPanel` → **UI → Text - TextMeshPro**
|
||||
2. Name it `SetupHeader`
|
||||
3. Configure:
|
||||
- **Text**: "Card Setup"
|
||||
- **Font Size**: 20
|
||||
- **Font Style**: Bold
|
||||
- **Color**: Green
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Create Setup Container
|
||||
1. Right-click `TestControlPanel` → **Create Empty**
|
||||
2. Name it `SetupContainer`
|
||||
3. Add **Vertical Layout Group** (spacing=8)
|
||||
4. Add **Layout Element**: Preferred Height = 180
|
||||
|
||||
### Add "Is New Card" Toggle
|
||||
1. Right-click `SetupContainer` → **UI → Toggle**
|
||||
2. Name it `Toggle_IsNew`
|
||||
3. Configure label text: "Is New Card"
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Add "Repeat Count" Slider
|
||||
1. Right-click `SetupContainer` → **UI → Slider**
|
||||
2. Name it `Slider_RepeatCount`
|
||||
3. Configure **Slider** component:
|
||||
- **Min Value**: 0
|
||||
- **Max Value**: 5
|
||||
- **Whole Numbers**: ✓
|
||||
- **Value**: 0
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Add Repeat Count Label
|
||||
1. Right-click `SetupContainer` → **UI → Text - TextMeshPro**
|
||||
2. Name it `Label_RepeatCount`
|
||||
3. Configure:
|
||||
- **Text**: "0/5"
|
||||
- **Font Size**: 18
|
||||
- **Alignment**: Center
|
||||
4. Add **Layout Element**: Preferred Height = 25
|
||||
|
||||
### Add "Rarity" Dropdown
|
||||
1. Right-click `SetupContainer` → **UI → Dropdown - TextMeshPro**
|
||||
2. Name it `Dropdown_Rarity`
|
||||
3. Configure **TMP_Dropdown** component:
|
||||
- **Options**: Common, Uncommon, Rare, Epic, Legendary
|
||||
4. Add **Layout Element**: Preferred Height = 35
|
||||
|
||||
### Add "Apply Setup" Button
|
||||
1. Right-click `SetupContainer` → **UI → Button - TextMeshPro**
|
||||
2. Name it `Button_ApplySetup`
|
||||
3. Configure:
|
||||
- **Text**: "Apply Card Setup"
|
||||
- **On Click()**: `CardTestController → ApplyCardSetup()`
|
||||
4. Add **Layout Element**: Preferred Height = 40
|
||||
|
||||
---
|
||||
|
||||
## Step 11: Create Clickability Toggle
|
||||
|
||||
1. Right-click `TestControlPanel` → **UI → Toggle**
|
||||
2. Name it `Toggle_IsClickable`
|
||||
3. Configure label text: "Card Is Clickable"
|
||||
4. Set **Is On**: ✓ (checked by default)
|
||||
5. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
---
|
||||
|
||||
## Step 12: Create Animation Test Buttons Section
|
||||
|
||||
### Create Section Header
|
||||
1. Right-click `TestControlPanel` → **UI → Text - TextMeshPro**
|
||||
2. Name it `AnimationHeader`
|
||||
3. Configure:
|
||||
- **Text**: "Animation Tests"
|
||||
- **Font Size**: 20
|
||||
- **Font Style**: Bold
|
||||
- **Color**: Orange
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Create Animation Buttons Container
|
||||
1. Right-click `TestControlPanel` → **Create Empty**
|
||||
2. Name it `AnimationButtonsContainer`
|
||||
3. Add **Vertical Layout Group** (spacing=5)
|
||||
4. Add **Layout Element**: Preferred Height = 150
|
||||
|
||||
### Add Animation Buttons (4 buttons)
|
||||
1. `Button_PlayFlip` → "Play Flip" → `PlayFlipAnimation()`
|
||||
2. `Button_PlayEnlarge` → "Play Enlarge" → `PlayEnlargeAnimation()`
|
||||
3. `Button_PlayShrink` → "Play Shrink" → `PlayShrinkAnimation()`
|
||||
4. `Button_StartHover` → "Start Idle Hover" → `StartIdleHoverAnimation()`
|
||||
|
||||
---
|
||||
|
||||
## Step 13: Create Event Log Section
|
||||
|
||||
### Create Section Header
|
||||
1. Right-click `TestControlPanel` → **UI → Text - TextMeshPro**
|
||||
2. Name it `EventLogHeader`
|
||||
3. Configure:
|
||||
- **Text**: "Event Log"
|
||||
- **Font Size**: 20
|
||||
- **Font Style**: Bold
|
||||
- **Color**: White
|
||||
4. Add **Layout Element**: Preferred Height = 30
|
||||
|
||||
### Create Scroll View for Event Log
|
||||
1. Right-click `TestControlPanel` → **UI → Scroll View**
|
||||
2. Name it `EventLogScrollView`
|
||||
3. Configure:
|
||||
- **Vertical Scrollbar**: Visible, auto-hide
|
||||
- **Horizontal Scrollbar**: Hidden
|
||||
4. Add **Layout Element**:
|
||||
- **Preferred Height**: 300
|
||||
- **Flexible Height**: 1
|
||||
|
||||
### Configure Event Log Text
|
||||
1. Navigate to `EventLogScrollView → Viewport → Content`
|
||||
2. Select the **Content** GameObject
|
||||
3. Add **Content Size Fitter**:
|
||||
- **Vertical Fit**: Preferred Size
|
||||
4. Add **Vertical Layout Group**:
|
||||
- **Child Force Expand**: Height ✗
|
||||
|
||||
5. Right-click `Content` → **UI → Text - TextMeshPro**
|
||||
6. Name it `EventLogText`
|
||||
7. Configure:
|
||||
- **Text**: "(Event log will appear here)"
|
||||
- **Font Size**: 14
|
||||
- **Alignment**: Top-Left
|
||||
- **Color**: Light Green
|
||||
- **Wrapping**: Enabled
|
||||
- **Overflow**: Overflow
|
||||
|
||||
---
|
||||
|
||||
## Step 14: Create Utility Buttons Section
|
||||
|
||||
### Create Utility Buttons Container
|
||||
1. Right-click `TestControlPanel` → **Create Empty**
|
||||
2. Name it `UtilityButtonsContainer`
|
||||
3. Add **Horizontal Layout Group** (spacing=10)
|
||||
4. Add **Layout Element**: Preferred Height = 50
|
||||
|
||||
### Add Utility Buttons (2 buttons)
|
||||
1. `Button_ResetPosition` → "Reset Position" → `ResetCardPosition()`
|
||||
2. `Button_ClearLog` → "Clear Log" → `ClearEventLog()`
|
||||
|
||||
---
|
||||
|
||||
## Step 15: Setup CardTestController Component
|
||||
|
||||
### Add CardTestController Script
|
||||
1. Create a new **Empty GameObject** under `TestCanvas`
|
||||
2. Name it `CardTestController`
|
||||
3. Add Component → **Card Test Controller**
|
||||
|
||||
### Assign References
|
||||
1. Select `CardTestController` GameObject
|
||||
2. In **Card Test Controller** component, assign:
|
||||
- **Test Card**: Drag `TestCard` from hierarchy
|
||||
- **Test Card Data**: Drag a CardData ScriptableObject from Project
|
||||
- **Slot 1**: Drag `AlbumSlot1` from hierarchy
|
||||
- **Slot 2**: Drag `AlbumSlot2` from hierarchy
|
||||
- **Event Log Text**: Drag `EventLogText` from hierarchy
|
||||
- **Is New Toggle**: Drag `Toggle_IsNew` from hierarchy
|
||||
- **Repeat Count Slider**: Drag `Slider_RepeatCount` from hierarchy
|
||||
- **Repeat Count Label**: Drag `Label_RepeatCount` from hierarchy
|
||||
- **Rarity Dropdown**: Drag `Dropdown_Rarity` from hierarchy
|
||||
- **Is Clickable Toggle**: Drag `Toggle_IsClickable` from hierarchy
|
||||
- **Current State Text**: Drag `CurrentStateText` from hierarchy
|
||||
|
||||
---
|
||||
|
||||
## Step 16: Wire Up All Button Events
|
||||
|
||||
For each button created earlier, select it and configure **On Click()**:
|
||||
|
||||
1. Click **+** to add event
|
||||
2. Drag `CardTestController` GameObject to object field
|
||||
3. Select the corresponding function from dropdown
|
||||
|
||||
**State Transition Buttons:**
|
||||
- `Button_IdleState` → `CardTestController.TransitionToIdleState`
|
||||
- `Button_RevealedState` → `CardTestController.TransitionToRevealedState`
|
||||
- `Button_EnlargedNewState` → `CardTestController.TransitionToEnlargedNewState`
|
||||
- `Button_EnlargedRepeatState` → `CardTestController.TransitionToEnlargedRepeatState`
|
||||
- `Button_DraggingState` → `CardTestController.TransitionToDraggingState`
|
||||
- `Button_PlacedInSlotState` → `CardTestController.TransitionToPlacedInSlotState`
|
||||
- `Button_AlbumEnlargedState` → `CardTestController.TransitionToAlbumEnlargedState`
|
||||
|
||||
**Simulation Buttons:**
|
||||
- `Button_SimulateNew` → `CardTestController.SimulateNewCardFlow`
|
||||
- `Button_SimulateRepeat` → `CardTestController.SimulateRepeatCardFlow`
|
||||
- `Button_SimulateUpgrade` → `CardTestController.SimulateUpgradeFlow`
|
||||
- `Button_SimulateAlbum` → `CardTestController.SimulateAlbumPlacementFlow`
|
||||
|
||||
**Setup Button:**
|
||||
- `Button_ApplySetup` → `CardTestController.ApplyCardSetup`
|
||||
|
||||
**Animation Buttons:**
|
||||
- `Button_PlayFlip` → `CardTestController.PlayFlipAnimation`
|
||||
- `Button_PlayEnlarge` → `CardTestController.PlayEnlargeAnimation`
|
||||
- `Button_PlayShrink` → `CardTestController.PlayShrinkAnimation`
|
||||
- `Button_StartHover` → `CardTestController.StartIdleHoverAnimation`
|
||||
|
||||
**Utility Buttons:**
|
||||
- `Button_ResetPosition` → `CardTestController.ResetCardPosition`
|
||||
- `Button_ClearLog` → `CardTestController.ClearEventLog`
|
||||
|
||||
---
|
||||
|
||||
## Step 17: Create Test Card Data Asset (If Needed)
|
||||
|
||||
If you don't have a test CardData asset:
|
||||
|
||||
1. Right-click in `Assets/Data/CardSystem/` → **Create → AppleHills → Card Data**
|
||||
2. Name it `TestCardData_Common`
|
||||
3. Configure:
|
||||
- **Card Name**: "Test Pikachu"
|
||||
- **Rarity**: Common
|
||||
- **Copies Owned**: 0
|
||||
- **Zone**: Any test zone
|
||||
- Assign sprites if available
|
||||
4. Drag this asset to **Test Card Data** field in CardTestController
|
||||
|
||||
---
|
||||
|
||||
## Step 18: Test the Scene
|
||||
|
||||
### Play Mode Tests
|
||||
|
||||
1. **Press Play**
|
||||
2. Verify **Current State Text** shows "IdleState"
|
||||
3. Click **"Simulate NEW Card"** button
|
||||
4. Click the card in the center - it should flip and enlarge
|
||||
5. Watch **Event Log** for event messages
|
||||
6. Tap enlarged card - it should shrink to RevealedState
|
||||
7. Try other simulation buttons
|
||||
8. Test manual state transitions
|
||||
9. Test animation buttons
|
||||
|
||||
### Expected Behaviors
|
||||
|
||||
| Test | Expected Result |
|
||||
|------|----------------|
|
||||
| Click card in IdleState | Flips and transitions to EnlargedNewState or EnlargedRepeatState |
|
||||
| Simulate NEW Card | Card flips → shows NEW badge → tap → shrinks to RevealedState |
|
||||
| Simulate REPEAT (3/5) | Card flips → shows progress bar (3/5) → blinks → tap → shrinks |
|
||||
| Simulate UPGRADE (5/5) | Card flips → progress (5/5) → auto-upgrades → shows NEW at higher rarity |
|
||||
| Drag to slot | Card enters DraggingState → scales up → drops in slot → PlacedInSlotState |
|
||||
| Toggle "Is Clickable" OFF | Card ignores clicks |
|
||||
| Reset Position | Card returns to center |
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Issue: Buttons don't respond
|
||||
- **Check:** Event System exists in scene
|
||||
- **Check:** Button On Click() events are wired to CardTestController
|
||||
- **Check:** CardTestController component is on a GameObject
|
||||
|
||||
### Issue: Card doesn't appear
|
||||
- **Check:** Card prefab is instantiated under CardSpawnPoint
|
||||
- **Check:** Card has CardContext, CardAnimator, CardStateMachine components
|
||||
- **Check:** TestCardData asset is assigned
|
||||
|
||||
### Issue: Event Log shows nothing
|
||||
- **Check:** EventLogText is assigned in CardTestController
|
||||
- **Check:** CardContext events are being fired (check Console for logs)
|
||||
|
||||
### Issue: State transitions don't work
|
||||
- **Check:** Card has AppleMachine with states configured
|
||||
- **Check:** States are named correctly (case-sensitive)
|
||||
- **Check:** Default State is set to IdleState in AppleMachine
|
||||
|
||||
### Issue: Progress bar doesn't show
|
||||
- **Check:** ProgressBarUI is child of EnlargedRepeatState
|
||||
- **Check:** ProgressBarController component exists and has 5 child Images
|
||||
- **Check:** Repeat count is > 0 when transitioning to EnlargedRepeatState
|
||||
|
||||
---
|
||||
|
||||
## Final Hierarchy Overview
|
||||
|
||||
```
|
||||
CardSystemTestScene
|
||||
├─ TestCanvas (Canvas)
|
||||
│ ├─ CardTestArea (RectTransform - 70% width)
|
||||
│ │ ├─ Background (Image)
|
||||
│ │ ├─ CardSpawnPoint
|
||||
│ │ │ └─ TestCard (Card prefab instance)
|
||||
│ │ ├─ AlbumSlot1 (AlbumCardSlot)
|
||||
│ │ │ └─ SlotBackground (Image)
|
||||
│ │ └─ AlbumSlot2 (AlbumCardSlot)
|
||||
│ │ └─ SlotBackground (Image)
|
||||
│ │
|
||||
│ ├─ TestControlPanel (Panel - 30% width, right side)
|
||||
│ │ ├─ CurrentStateText (TextMeshPro)
|
||||
│ │ ├─ StateButtonsHeader (TextMeshPro)
|
||||
│ │ ├─ StateButtonsContainer
|
||||
│ │ │ ├─ Button_IdleState
|
||||
│ │ │ ├─ Button_RevealedState
|
||||
│ │ │ ├─ Button_EnlargedNewState
|
||||
│ │ │ ├─ Button_EnlargedRepeatState
|
||||
│ │ │ ├─ Button_DraggingState
|
||||
│ │ │ ├─ Button_PlacedInSlotState
|
||||
│ │ │ └─ Button_AlbumEnlargedState
|
||||
│ │ ├─ SimulationHeader (TextMeshPro)
|
||||
│ │ ├─ SimulationButtonsContainer
|
||||
│ │ │ ├─ Button_SimulateNew
|
||||
│ │ │ ├─ Button_SimulateRepeat
|
||||
│ │ │ ├─ Button_SimulateUpgrade
|
||||
│ │ │ └─ Button_SimulateAlbum
|
||||
│ │ ├─ SetupHeader (TextMeshPro)
|
||||
│ │ ├─ SetupContainer
|
||||
│ │ │ ├─ Toggle_IsNew
|
||||
│ │ │ ├─ Slider_RepeatCount
|
||||
│ │ │ ├─ Label_RepeatCount
|
||||
│ │ │ ├─ Dropdown_Rarity
|
||||
│ │ │ └─ Button_ApplySetup
|
||||
│ │ ├─ Toggle_IsClickable
|
||||
│ │ ├─ AnimationHeader (TextMeshPro)
|
||||
│ │ ├─ AnimationButtonsContainer
|
||||
│ │ │ ├─ Button_PlayFlip
|
||||
│ │ │ ├─ Button_PlayEnlarge
|
||||
│ │ │ ├─ Button_PlayShrink
|
||||
│ │ │ └─ Button_StartHover
|
||||
│ │ ├─ EventLogHeader (TextMeshPro)
|
||||
│ │ ├─ EventLogScrollView
|
||||
│ │ │ └─ Viewport → Content
|
||||
│ │ │ └─ EventLogText (TextMeshPro)
|
||||
│ │ └─ UtilityButtonsContainer
|
||||
│ │ ├─ Button_ResetPosition
|
||||
│ │ └─ Button_ClearLog
|
||||
│ │
|
||||
│ └─ CardTestController (Empty GameObject with CardTestController component)
|
||||
│
|
||||
└─ EventSystem
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Success Criteria
|
||||
|
||||
✅ Scene opens without errors
|
||||
✅ Card appears in center of left panel
|
||||
✅ All buttons are visible and labeled
|
||||
✅ Current State display shows active state
|
||||
✅ Event log displays messages when events fire
|
||||
✅ Card responds to clicks and state transitions
|
||||
✅ Simulation buttons work (NEW, REPEAT, UPGRADE flows)
|
||||
✅ Drag to album slots works
|
||||
✅ Reset position returns card to center
|
||||
✅ All 7 states can be manually triggered
|
||||
|
||||
**Once all criteria met, you have a fully functional Card testing scene! 🎉**
|
||||
|
||||
Reference in New Issue
Block a user