# ðŸ•đïļ Arcade Mini-Games Documentation ## Overview The Suno Music Adventure RPG includes 4 musical mini-games accessible from the Arcade button (ðŸ•đïļ) in the right sidebar. Each game rewards **100 Suno Credits** upon completion. --- ## ðŸĶĪ Flappy DODO - Pitch Game ### Concept A voice-controlled Flappy Bird variant where you control a bird using your voice pitch. ### How to Play 1. **Enable Microphone**: Grant microphone permissions 2. **Sing High/Low**: Control bird height with your pitch 3. **Avoid Obstacles**: Navigate through gaps in fences 4. **Score Points**: Each successful fence crossing = 1 point ### Controls - **Vocal Mode** (Default): Sing to control bird height - **Keyboard Mode**: Spacebar to flap - **Microphone Input**: Real-time pitch detection ### Features - Real-time pitch detection using Web Audio API - Visual pitch indicator showing your current note - Difficulty increases over time (speed multiplier) - Particle effects and screen shake on impacts - Canvas-based rendering with smooth animations - Camera recording option (experimental) ### Technical Details - **Location**: `src/components/FlappyDODO/` - **Pitch Detection**: Autocorrelation algorithm - **Physics**: Gravity, velocity, collision detection - **Rendering**: HTML5 Canvas - **Audio**: Web Audio API for pitch analysis --- ## 🐍 Musical Snake - Rhythm Game ### Concept Classic snake game with musical elements and rhythm-based mechanics. ### How to Play 1. **Control Snake**: Use arrow keys to move 2. **Collect Items**: Eat food to grow longer 3. **Avoid Walls**: Don't hit boundaries or yourself 4. **Score Points**: Longer snake = higher score ### Controls - **Arrow Keys**: Change direction - **Continuous Movement**: Snake moves automatically ### Features - Rhythm-based scoring system - Musical sound effects - Progressive difficulty - Score tracking and high scores - Smooth animations ### Technical Details - **Location**: `src/components/MusicalSnake/` - **Game Loop**: Custom hook (`useSnakeState`) - **Collision Detection**: Grid-based system - **Rendering**: CSS Grid styling --- ## ðŸŽĩ DodoGuessr - Tag Guessing Game ### Concept Test your music knowledge by guessing tags and characteristics of songs. ### How to Play 1. **Read Prompt**: View the music tag or genre question 2. **Make Guess**: Choose from multiple options 3. **Get Feedback**: Learn if you're correct 4. **Earn Points**: Build your score ### Features - Music tag database from Suno platform - Multiple choice questions - Immediate feedback - Educational explanations - Score tracking ### Technical Details - **Location**: `src/components/DodoGuessr.js` - **Tag Database**: Real Suno music tags - **Question Pool**: Randomly selected tags - **Scoring**: Points for correct guesses --- ## ðŸŽŪ DODOTRIS - Musical Tetris ### Concept Tetris with musical integration where blocks create melodies as they fall. ### How to Play 1. **Control Blocks**: Arrow keys to move and rotate 2. **Clear Lines**: Fill horizontal rows completely 3. **Match Melodies**: Blocks create musical notes 4. **Score Points**: Lines cleared = points earned ### Controls - **Left/Right Arrows**: Move block - **Up Arrow**: Rotate block - **Down Arrow**: Soft drop (faster descent) - **Space**: Hard drop (instant placement) ### Features - Musical note generation for each block - Melody mapping system - Audio synthesis when lines clear - Cover art display integration - MIDI-based musical patterns - Recording capabilities (experimental) ### Technical Details - **Location**: `src/components/DODOTRIS/` - **Components**: - `TetrisCanvas.js` - Game rendering - `Block.js` - Tetromino pieces - `HUD.js` - Score/level display - `CoverDisplay.js` - Album art visualization - **Hooks**: - `useGameState.js` - Game logic - `useGameLoop.js` - Animation frame - `useTetrisInput.js` - Keyboard handling - `useAudioRecording.js` - Sound recording - **Utils**: - `tetrominos.js` - Block shapes (I, O, T, S, Z, J, L) - `melodyMapper.js` - Block-to-note mapping - `audioSynthesis.js` - Web Audio generation - `gridManager.js` - Grid operations - `sunoApi.js` - Suno platform integration ### Melody System - Each tetromino type maps to musical notes - Clearing lines plays melodic sequences - MIDI integration for musical accuracy - Supports loading Suno song melodies --- ## ðŸŽŊ Accessing Arcade Games ### From RPG 1. Click **ðŸ•đïļ Arcade** button (right sidebar) 2. Modal appears with 4 game options 3. Select any game to play 4. Complete game to earn 100 Suno Credits 5. Return to RPG after game ends ### Modal Features - **Draggable**: Move arcade modal anywhere - **Closeable**: X button to dismiss - **Game Selection**: 4 clearly labeled options - **Credit Reward**: 100 credits per game completion --- ## 🏆 Rewards System ### Completion Rewards - **100 Suno Credits** per game completed - Credits added to your RPG profile - Use credits in Cleffy's Music Store - Same rewards regardless of score ### Integration with RPG - Credits earned in arcade count toward RPG economy - No limit on replaying games - Progress saved to main game state - Arcade accessible anytime during RPG play --- ## 📊 Game Difficulty ### Flappy DODO - **Easy to Medium**: Depends on pitch control skill - **Speed Increases**: Gets progressively harder - **Pitch Sensitivity**: Requires good microphone and singing ### Musical Snake - **Easy to Hard**: Speed increases over time - **Classic Difficulty**: Similar to original Snake - **Length Challenge**: Harder as snake grows ### DodoGuessr - **Medium**: Requires music knowledge - **Educational**: Learn about music tags - **Multiple Attempts**: Can retry questions ### DODOTRIS - **Medium to Hard**: Traditional Tetris difficulty - **Musical Complexity**: Added layer of melody matching - **Progressive Speed**: Levels increase speed --- ## 🔧 Technical Notes ### Audio Requirements - **Microphone Access**: Required for Flappy DODO vocal mode - **Web Audio API**: Supported in modern browsers - **Headphones Recommended**: Better audio experience ### Browser Compatibility - **Chrome/Edge**: Full support (recommended) - **Firefox**: Full support - **Safari**: May have audio limitations - **Mobile**: Partial support (some features limited) ### Performance - **Canvas Rendering**: Hardware accelerated - **Audio Processing**: Real-time pitch detection - **Smooth Animations**: 60 FPS target - **Memory Efficient**: Proper cleanup on exit --- ## ðŸŽĻ Visual Design ### Common Elements - **Pixel Art Aesthetics**: Retro-style graphics - **Vibrant Colors**: High contrast for visibility - **Smooth Animations**: CSS and Canvas transitions - **Score Displays**: Clear feedback on performance - **Instructions**: In-game help for all controls ### UI Consistency - Back buttons on all games - Consistent color schemes - Unified typography - Responsive layouts --- ## 📝 Development Notes ### Flappy DODO - Most complex audio integration - Pitch detection requires tuning - Camera recording experimental - Video export capabilities ### DODOTRIS - MIDI integration for melodies - Suno API for song loading - Cover art display system - Audio recording features ### Musical Snake & DodoGuessr - Simpler implementations - Focus on gameplay over audio complexity - Quick play sessions - Lower technical barriers --- **All arcade games are fully functional and integrated with the main RPG progression system.**