Major Changes: - Moved legacy system to Legacy/ folder for archival - Built new modular architecture with strict separation of concerns - Created core system: Module, EventBus, ModuleLoader, Router - Added Application bootstrap with auto-start functionality - Implemented development server with ES6 modules support - Created comprehensive documentation and project context - Converted SBS-7-8 content to JSON format - Copied all legacy games and content to new structure New Architecture Features: - Sealed modules with WeakMap private data - Strict dependency injection system - Event-driven communication only - Inviolable responsibility patterns - Auto-initialization without commands - Component-based UI foundation ready Technical Stack: - Vanilla JS/HTML/CSS only - ES6 modules with proper imports/exports - HTTP development server (no file:// protocol) - Modular CSS with component scoping - Comprehensive error handling and debugging Ready for Phase 2: Converting legacy modules to new architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
204 lines
5.9 KiB
Markdown
204 lines
5.9 KiB
Markdown
# Class Generator 2.0
|
|
|
|
**Educational Games Platform with Ultra-Modular Architecture**
|
|
|
|
A complete rewrite of the Class Generator system using strict modular design patterns, vanilla JavaScript, and rigorous separation of concerns.
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Method 1: Batch File (Windows)
|
|
```bash
|
|
# Double-click or run:
|
|
start.bat
|
|
```
|
|
|
|
### Method 2: Command Line
|
|
```bash
|
|
# Install Node.js (if not already installed)
|
|
# Then run:
|
|
node server.js
|
|
|
|
# Or using npm:
|
|
npm start
|
|
```
|
|
|
|
### Method 3: NPM Scripts
|
|
```bash
|
|
npm run dev # Start development server
|
|
npm run serve # Same as start
|
|
```
|
|
|
|
**Server will start on:** `http://localhost:3000`
|
|
|
|
## 🏗️ Architecture Overview
|
|
|
|
### Core System (Ultra-Rigid)
|
|
|
|
- **Module.js** - Abstract base class with sealed instances and WeakMap privates
|
|
- **EventBus.js** - Strict event system with validation and type safety
|
|
- **ModuleLoader.js** - Dependency injection with proper initialization order
|
|
- **Router.js** - Navigation with guards, middleware, and state management
|
|
- **Application.js** - Bootstrap system with auto-initialization
|
|
|
|
### Key Architecture Principles
|
|
|
|
✅ **Inviolable Responsibility** - Each module has exactly one purpose
|
|
✅ **Zero Direct Dependencies** - All communication via EventBus
|
|
✅ **Sealed Instances** - Modules cannot be modified after creation
|
|
✅ **Private State** - Internal data completely inaccessible
|
|
✅ **Contract Enforcement** - Abstract methods must be implemented
|
|
✅ **Dependency Injection** - No global access, everything injected
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
├── src/
|
|
│ ├── core/ # Core system modules (sealed)
|
|
│ │ ├── Module.js
|
|
│ │ ├── EventBus.js
|
|
│ │ ├── ModuleLoader.js
|
|
│ │ ├── Router.js
|
|
│ │ └── index.js
|
|
│ ├── components/ # Reusable UI components
|
|
│ ├── games/ # Game modules
|
|
│ ├── content/ # Content modules
|
|
│ ├── styles/ # Modular CSS
|
|
│ └── Application.js # Main application bootstrap
|
|
├── Legacy/ # Old system (archived)
|
|
├── index.html # Entry point
|
|
├── server.js # Development server
|
|
├── start.bat # Windows quick start
|
|
└── package.json # Node.js configuration
|
|
```
|
|
|
|
## 🔥 Features
|
|
|
|
### Development Server
|
|
- **ES6 Modules** - Full import/export support
|
|
- **CORS Enabled** - For online communication
|
|
- **Hot Reload Ready** - Manual refresh (planned: auto-refresh)
|
|
- **Proper MIME Types** - All file types supported
|
|
- **Security Headers** - Basic security implemented
|
|
|
|
### Application System
|
|
- **Auto-Start** - No commands needed, just open in browser
|
|
- **Loading Screen** - Elegant initialization feedback
|
|
- **Debug Panel** - F12 to toggle, shows system status
|
|
- **Error Handling** - Graceful error recovery
|
|
- **Network Status** - Real-time connectivity indicator
|
|
|
|
### Module System
|
|
- **Strict Validation** - Errors if contracts violated
|
|
- **Lifecycle Management** - Proper init/destroy patterns
|
|
- **Event-Driven** - Loose coupling via events
|
|
- **Dependency Resolution** - Automatic dependency loading
|
|
|
|
## 🎮 Creating Game Modules
|
|
|
|
```javascript
|
|
import Module from '../core/Module.js';
|
|
|
|
class MyGame extends Module {
|
|
constructor(name, dependencies, config) {
|
|
super(name, ['eventBus', 'ui']);
|
|
|
|
this._eventBus = dependencies.eventBus;
|
|
this._ui = dependencies.ui;
|
|
this._config = config;
|
|
}
|
|
|
|
async init() {
|
|
// Initialize game
|
|
this._eventBus.on('game:start', this._handleStart.bind(this), this.name);
|
|
this._setInitialized();
|
|
}
|
|
|
|
async destroy() {
|
|
// Cleanup
|
|
this._setDestroyed();
|
|
}
|
|
|
|
_handleStart(event) {
|
|
// Game logic here
|
|
}
|
|
}
|
|
|
|
export default MyGame;
|
|
```
|
|
|
|
## 🧩 Adding to Application
|
|
|
|
```javascript
|
|
// In Application.js modules config:
|
|
{
|
|
name: 'myGame',
|
|
path: './games/MyGame.js',
|
|
dependencies: ['eventBus', 'ui'],
|
|
config: { difficulty: 'easy' }
|
|
}
|
|
```
|
|
|
|
## 🐛 Debugging
|
|
|
|
### Debug Panel (F12)
|
|
- System status and uptime
|
|
- Loaded modules list
|
|
- Event history
|
|
- Performance metrics
|
|
|
|
### Console Access
|
|
```javascript
|
|
// Global app instance available in console:
|
|
window.app.getStatus() // Application status
|
|
window.app.getCore().eventBus // Access EventBus
|
|
window.app.getCore().router // Access Router
|
|
```
|
|
|
|
### Common Issues
|
|
|
|
**Module loading fails:**
|
|
- Check file paths in Application.js
|
|
- Verify module extends Module base class
|
|
- Ensure all dependencies are listed
|
|
|
|
**Events not working:**
|
|
- Verify module is registered with EventBus
|
|
- Check event type strings match exactly
|
|
- Ensure module is initialized before emitting
|
|
|
|
## 🔒 Security & Rigidity
|
|
|
|
The architecture enforces several levels of protection:
|
|
|
|
1. **Sealed Classes** - `Object.seal()` prevents property addition/deletion
|
|
2. **Frozen Prototypes** - `Object.freeze()` prevents method modification
|
|
3. **WeakMap Privates** - Internal state completely hidden
|
|
4. **Abstract Enforcement** - Missing methods throw errors
|
|
5. **Validation Layers** - Input validation at every boundary
|
|
|
|
**Violation attempts will throw explicit errors with helpful messages.**
|
|
|
|
## 🚀 Next Steps
|
|
|
|
1. **Create Game Modules** - Implement actual games using new architecture
|
|
2. **Add Content System** - Port content loading from Legacy system
|
|
3. **UI Components** - Build reusable component library
|
|
4. **Performance** - Add lazy loading and caching
|
|
5. **Testing** - Add automated test suite
|
|
|
|
## 📝 Migration from Legacy
|
|
|
|
The Legacy/ folder contains the complete old system. Key differences:
|
|
|
|
- **Old:** Global variables and direct coupling
|
|
- **New:** Strict modules with dependency injection
|
|
|
|
- **Old:** CSS modifications in global files
|
|
- **New:** Component-scoped CSS injection
|
|
|
|
- **Old:** Manual module registration
|
|
- **New:** Automatic loading with dependency resolution
|
|
|
|
---
|
|
|
|
**Built with strict architectural principles for maintainable, scalable educational software.** |