dnd-hub/docs/IMPLEMENTATION_ROADMAP.md

BMS BattleMap Generator - Implementation Roadmap

Phase 1: Frontend Renderer MVP (2-3 weeks)

Week 1: Core Foundation

Days 1-2: Project Setup

Tasks:

1. Initialize Git repository
2. Create Vite + React + TypeScript project
3. Install core dependencies:
   • konva react-konva (Canvas rendering)
   • js-yaml (YAML parsing)
   • zod (Validation)
   • @monaco-editor/react (Code editor)
   • tailwindcss postcss autoprefixer (Styling)
4. Configure development environment
5. Set up TypeScript, ESLint, Prettier

Deliverables:

• ✅ Project repository initialized
• ✅ Development environment working
• ✅ Basic React app running

Days 3-4: BMS Schema Implementation

Tasks:

1. Create TypeScript interfaces for BMS 1.0
2. Implement Zod validation schemas
3. Create YAML parsing utilities
4. Add error handling and validation
5. Create test BMS files for development

Deliverables:

• ✅ Complete BMS TypeScript types
• ✅ Runtime validation with Zod
• ✅ YAML parser with error messages
• ✅ Sample BMS files for testing

Days 5-7: Basic Rendering Engine

Tasks:

1. Set up Konva.js canvas
2. Implement grid renderer
3. Define Paperly style system
4. Create room renderer (walls, floors)
5. Add basic UI layout (editor + preview)

Deliverables:

• ✅ Canvas displaying grid
• ✅ Rooms rendered as rectangles
• ✅ Paperly style applied
• ✅ Split editor/preview layout

Week 2: Complete BMS Support

Days 8-10: Element Rendering

Tasks:

1. Implement door renderer
   • Open/closed states
   • Hinge side indicators
   • Connection lines
2. Create object renderer
   • Simple geometric icons
   • Labels and tooltips
   • State indicators
3. Build hazard renderer
   • Visual patterns
   • Color coding
   • DC indicators

Deliverables:

• ✅ Doors render with correct states
• ✅ Objects display as icons
• ✅ Hazards show visual patterns
• ✅ Real-time updates on YAML changes

Days 11-12: Advanced Features

Tasks:

1. Implement lighting renderer
   • Light radius visualization
   • Bright/dim zones
   • Glow effects
2. Create annotation renderer
   • Text labels
   • DM notes
   • Connection arrows
3. Build export system
   • PNG export (canvas to image)
   • JSON export (serialized BMS)
   • BMS YAML export

Deliverables:

• ✅ Lighting effects rendered
• ✅ Annotations displayed
• ✅ Export functionality working
• ✅ Complete BMS 1.0 support

Day 13: UI Polish

Tasks:

1. Refine UI components
2. Add error reporting
3. Implement zoom/pan controls
4. Add keyboard shortcuts
5. Improve user experience

Deliverables:

• ✅ Polished UI
• ✅ Error messages for invalid BMS
• ✅ Zoom/pan functionality
• ✅ Keyboard shortcuts

Week 3: Testing & Deployment

Days 14-15: Testing & Bug Fixes

Tasks:

1. Test with sample BMS files
2. Fix rendering issues
3. Optimize performance
4. Test on different browsers
5. Create documentation

Deliverables:

• ✅ All sample BMS files render correctly
• ✅ Performance optimized for large maps
• ✅ Cross-browser compatibility
• ✅ User documentation

Days 16-17: Alpha Deployment

Tasks:

1. Build production version
2. Deploy to maps.bouncypixel.com
3. Set up basic analytics (optional)
4. Create alpha testing guide
5. Invite initial testers

Deliverables:

• ✅ Production build completed
• ✅ Deployed to maps.bouncypixel.com
• ✅ Alpha testing environment ready
• ✅ Testers invited and briefed

Phase 2: Texture Pack System (3-4 weeks)

Week 1: Texture Pack Architecture

1. Design texture pack file structure
2. Create style configuration format
3. Implement texture loading system
4. Add texture pack manager UI

Week 2: Texture Rendering

1. Modify renderer to use textures
2. Implement texture tiling
3. Add texture blending options
4. Create texture preview system

Week 3: Pack Management

1. Implement pack purchase/download
2. Add pack activation/deactivation
3. Create pack marketplace UI
4. Add user account integration

Week 4: Polish & Release

1. Create default texture packs
2. Test texture rendering
3. Optimize texture loading
4. Release to production

Phase 3: AI Integration (4-5 weeks)

Week 1: AI API Integration

1. Set up OpenAI API integration
2. Create BMS generation prompts
3. Implement basic AI generation
4. Add API key management

Week 2: Chat Interface

1. Design chat-based UI
2. Implement conversation history
3. Add context preservation
4. Create iterative editing workflow

Week 3: Advanced AI Features

1. Implement schema modification
2. Add suggestion system
3. Create validation feedback
4. Implement rate limiting

Week 4: Monetization Integration

1. Add subscription system
2. Implement API usage tracking
3. Create tiered feature access
4. Add payment processing

Week 5: Testing & Release

1. Test AI generation quality
2. Optimize prompt engineering
3. Performance testing
4. Release to production

Phase 4: VTT Export & Community Features (4-5 weeks)

Week 1: VTT Export Formats

1. Implement FoundryVTT export
2. Add Roll20 compatibility
3. Create universal VTT format
4. Test with popular VTTs

Week 2: Community Features

1. Add template sharing
2. Create user profiles
3. Implement rating system
4. Add search functionality

Week 3: Advanced Tools

1. Add map editing tools
2. Implement undo/redo
3. Create layer management
4. Add measurement tools

Week 4: Performance & Scaling

1. Optimize for large maps
2. Implement caching
3. Add CDN for assets
4. Scale infrastructure

Week 5: Polish & Release

1. User feedback implementation
2. Bug fixes
3. Documentation updates
4. Production release

Success Metrics

Phase 1 (MVP)

• ✅ BMS 1.0 YAML parsing
• ✅ Complete rendering with Paperly style
• ✅ Real-time editor + preview
• ✅ PNG/JSON export
• ✅ Alpha testing with 5-10 users
• ✅ Positive feedback on usability

Phase 2 (Texture Packs)

• ✅ Texture pack system working
• ✅ At least 3 quality texture packs
• ✅ Users can purchase/activate packs
• ✅ Texture rendering performs well

Phase 3 (AI Integration)

• ✅ AI generates valid BMS schemas
• ✅ Chat interface intuitive
• ✅ Iterative editing works smoothly
• ✅ Subscription system functional

Phase 4 (Complete Platform)

• ✅ VTT export works with major platforms
• ✅ Community templates shared
• ✅ Performance handles large maps
• ✅ Platform scales with users

Risk Mitigation

Technical Risks

1. Canvas Performance: Use Konva.js optimizations, implement viewport culling
2. Large Map Rendering: Implement level-of-detail, progressive rendering
3. Browser Compatibility: Focus on modern browsers, polyfill if needed
4. YAML Parsing: Robust error handling, helpful error messages

Business Risks

1. User Adoption: Free tier lowers barrier, focus on useful core features
2. Monetization: Multiple revenue streams (packs, subscription, AI)
3. Competition: Unique BMS format, AI integration, community focus
4. Technical Debt: Clean architecture, modular design, regular refactoring

Resource Requirements

Development

• Frontend Developer: 3-4 months full-time (or equivalent)
• Designer: 1-2 months for UI/UX and texture packs
• AI/Backend: 1-2 months for AI integration (optional backend)

Infrastructure

• Hosting: Static site hosting (Vercel, Netlify, self-hosted)
• Storage: CDN for texture packs
• API: Optional for AI features
• Database: Optional for user accounts/templates

Testing

• Alpha Testers: 5-10 trusted users
• Beta Testers: 50-100 users
• Production Testing: Continuous user feedback

Future Considerations

Technical Debt

• Regular code reviews
• Comprehensive testing
• Documentation updates
• Performance monitoring

Feature Backlog

1. 3D top-down view
2. Mobile app
3. Collaborative editing
4. Plugin system
5. Advanced generation algorithms
6. Integration with other TTRPG tools
7. Print-friendly formats
8. Custom asset import
9. Advanced lighting simulation
10. Sound effects integration

---

Last Updated: March 19, 2026 Next Review: After Phase 1 Completion