# Trivia - Components v2 Implementation

This trivia feature uses **Discord Components v2** for a premium visual experience.

## 🎨 Visual Features

### **Container with Accent Colors**
Each trivia question is displayed in a Container with a colored accent bar that changes based on difficulty:
- **🟢 Easy**: Green accent bar (`0x57F287`)
- **🟡 Medium**: Yellow accent bar (`0xFEE75C`)
- **🔴 Hard**: Red accent bar (`0xED4245`)

### **Modern Layout Components**
- **TextDisplay** - Rich markdown formatting for question text
- **Separator** - Visual spacing between sections
- **Container** - Groups all content with difficulty-based styling

### **Interactive Features**
✅ **Give Up Button** - Players can forfeit if they're unsure  
✅ **Disabled Answer Buttons** - After answering, buttons show:
   - ✅ Green for correct answer
   - ❌ Red for user's incorrect answer
   - Gray for other options

✅ **Time Display** - Shows both relative time (`in 30s`) and seconds remaining  
✅ **Stakes Preview** - Clear display: `50 AU ➜ 100 AU`

## 📁 File Structure

```
bot/modules/trivia/
├── trivia.view.ts          # Components v2 view functions
├── trivia.interaction.ts   # Button interaction handler
└── README.md              # This file

bot/commands/economy/
└── trivia.ts              # /trivia slash command
```

## 🔧 Technical Details

### Components v2 Requirements
- Uses `MessageFlags.IsComponentsV2` flag
- No `embeds` or `content` fields (uses TextDisplay instead)
- Numeric component types:
  - `1` - Action Row
  - `2` - Button
  - `10` - Text Display
  - `14` - Separator
  - `17` - Container
- Max 40 components per message (vs 5 for legacy)

### Button Styles
- **Secondary (2)**: Gray - Used for answer buttons
- **Success (3)**: Green - Used for "True" and correct answers
- **Danger (4)**: Red - Used for "False", incorrect answers, and "Give Up"

## 🎮 User Experience Flow

1. User runs `/trivia`
2. Sees question in a Container with difficulty-based accent color
3. Can choose to:
   - Select an answer (A/B/C/D or True/False)
   - Give up using the 🏳️ button
4. After answering, sees result with:
   - Disabled buttons showing correct/incorrect answers
   - Container with result-based accent color (green/red/yellow)
   - Reward or penalty information

## 🌟 Visual Examples

### Question Display
```
┌─[GREEN]─────────────────────────┐
│ # 🎯 Trivia Challenge          │
│ 🟢 Easy • 📚 Geography         │
│ ───────────────────────────     │
│ ### What is the capital of      │
│     France?                     │
│                                 │
│ ⏱️ Time: in 30s (30s)          │
│ 💰 Stakes: 50 AU ➜ 100 AU      │
│ 👤 Player: Username            │
└─────────────────────────────────┘
[🇦 A: Paris] [🇧 B: London]
[🇨 C: Berlin] [🇩 D: Madrid]
[🏳️ Give Up]
```

### Result Display (Correct)
```
┌─[GREEN]─────────────────────────┐
│ # 🎉 Correct Answer!           │
│ ### What is the capital of      │
│     France?                     │
│ ───────────────────────────     │
│ ✅ Your answer: Paris          │
│                                 │
│ 💰 Reward: +100 AU             │
│                                 │
│ 🏆 Great job! Keep it up!      │
└─────────────────────────────────┘
[✅ A: Paris] [❌ B: London]
[❌ C: Berlin] [❌ D: Madrid]
(all buttons disabled)
```

## 🚀 Future Enhancements

Potential improvements:
- [ ] Thumbnail images based on trivia category
- [ ] Progress bar for time remaining
- [ ] Streak counter display
- [ ] Category-specific accent colors
- [ ] Media Gallery for image-based questions
- [ ] Leaderboard integration in results