313 lines
No EOL
8.1 KiB
Markdown
313 lines
No EOL
8.1 KiB
Markdown
# 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* |