AuroraBot-discord/bot/modules/trivia

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