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

User runs /trivia
Sees question in a Container with difficulty-based accent color
Can choose to:
- Select an answer (A/B/C/D or True/False)
- Give up using the 🏳️ button
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

4.0 KiB Raw Blame History