forked from syntaxbullet/AuroraBot-discord
117 lines
4.0 KiB
Markdown
117 lines
4.0 KiB
Markdown
# 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
|