StillHammer
38920cc858
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>
195 lines
7.2 KiB
HTML
195 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Class Generator - Educational Games Platform</title>
|
||
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" href="src/styles/base.css">
|
||
<link rel="stylesheet" href="src/styles/components.css">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||
</head>
|
||
<body>
|
||
<!-- Application Root -->
|
||
<div id="app">
|
||
<!-- Loading screen shown until app initializes -->
|
||
<div id="loading-screen" class="loading-screen">
|
||
<div class="loading-spinner"></div>
|
||
<h2>Loading Class Generator...</h2>
|
||
<p>Initializing educational games platform</p>
|
||
</div>
|
||
|
||
<!-- Main application container -->
|
||
<div id="app-container" class="app-container" style="display: none;">
|
||
<!-- Top navigation bar -->
|
||
<header id="app-header" class="app-header">
|
||
<div class="header-content">
|
||
<h1 class="app-title">Class Generator</h1>
|
||
<div id="connection-status" class="connection-status">
|
||
<span class="status-indicator"></span>
|
||
<span class="status-text">Online</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main content area -->
|
||
<main id="app-main" class="app-main">
|
||
<!-- Content will be rendered here by modules -->
|
||
</main>
|
||
|
||
<!-- Debug panel (only shown in debug mode) -->
|
||
<div id="debug-panel" class="debug-panel" style="display: none;">
|
||
<div class="debug-header">
|
||
<h3>Debug Panel</h3>
|
||
<button id="debug-toggle" class="debug-toggle">×</button>
|
||
</div>
|
||
<div class="debug-content">
|
||
<div id="debug-status"></div>
|
||
<div id="debug-events"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Application Bootstrap -->
|
||
<script type="module">
|
||
// Import and start the application
|
||
import app from './src/Application.js';
|
||
|
||
// Listen for application events
|
||
const { eventBus } = app.getCore();
|
||
|
||
// Handle app ready event
|
||
eventBus.on('app:ready', (event) => {
|
||
console.log('🎉 Application is ready!');
|
||
|
||
// Hide loading screen
|
||
const loadingScreen = document.getElementById('loading-screen');
|
||
const appContainer = document.getElementById('app-container');
|
||
|
||
if (loadingScreen) loadingScreen.style.display = 'none';
|
||
if (appContainer) appContainer.style.display = 'block';
|
||
|
||
// Show debug panel if enabled
|
||
const status = app.getStatus();
|
||
if (status.config.enableDebug) {
|
||
const debugPanel = document.getElementById('debug-panel');
|
||
if (debugPanel) debugPanel.style.display = 'block';
|
||
updateDebugInfo();
|
||
}
|
||
}, 'Bootstrap');
|
||
|
||
// Handle navigation events
|
||
eventBus.on('navigation:home', () => {
|
||
updateMainContent('<h2>Welcome to Class Generator</h2><p>Select a game to start learning!</p>');
|
||
}, 'Bootstrap');
|
||
|
||
eventBus.on('navigation:games', () => {
|
||
updateMainContent('<h2>Available Games</h2><p>Loading games...</p>');
|
||
}, 'Bootstrap');
|
||
|
||
eventBus.on('navigation:play', () => {
|
||
updateMainContent('<h2>Game Arena</h2><p>Loading game...</p>');
|
||
}, 'Bootstrap');
|
||
|
||
// Handle errors
|
||
eventBus.on('app:error', (event) => {
|
||
console.error('Application error:', event.data);
|
||
showError('An error occurred. Check console for details.');
|
||
}, 'Bootstrap');
|
||
|
||
// Utility functions
|
||
function updateMainContent(html) {
|
||
const mainElement = document.getElementById('app-main');
|
||
if (mainElement) {
|
||
mainElement.innerHTML = html;
|
||
}
|
||
}
|
||
|
||
function showError(message) {
|
||
const mainElement = document.getElementById('app-main');
|
||
if (mainElement) {
|
||
mainElement.innerHTML = `
|
||
<div class="error-message">
|
||
<h2>Error</h2>
|
||
<p>${message}</p>
|
||
<button onclick="window.location.reload()">Reload Page</button>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function updateDebugInfo() {
|
||
const debugStatus = document.getElementById('debug-status');
|
||
if (debugStatus) {
|
||
const status = app.getStatus();
|
||
debugStatus.innerHTML = `
|
||
<h4>System Status</h4>
|
||
<ul>
|
||
<li>Running: ${status.isRunning}</li>
|
||
<li>Uptime: ${Math.round(status.uptime / 1000)}s</li>
|
||
<li>Loaded Modules: ${status.modules.loaded.length}</li>
|
||
</ul>
|
||
`;
|
||
}
|
||
}
|
||
|
||
// Debug panel toggle
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const debugToggle = document.getElementById('debug-toggle');
|
||
const debugPanel = document.getElementById('debug-panel');
|
||
|
||
if (debugToggle && debugPanel) {
|
||
debugToggle.addEventListener('click', () => {
|
||
debugPanel.style.display = 'none';
|
||
});
|
||
}
|
||
});
|
||
|
||
// Keyboard shortcuts
|
||
document.addEventListener('keydown', (event) => {
|
||
// ESC to go back
|
||
if (event.key === 'Escape') {
|
||
const { router } = app.getCore();
|
||
if (router && !router.isCurrentRoute('/')) {
|
||
router.back();
|
||
}
|
||
}
|
||
|
||
// F12 to toggle debug (if enabled)
|
||
if (event.key === 'F12' && app.getStatus().config.enableDebug) {
|
||
event.preventDefault();
|
||
const debugPanel = document.getElementById('debug-panel');
|
||
if (debugPanel) {
|
||
debugPanel.style.display = debugPanel.style.display === 'none' ? 'block' : 'none';
|
||
}
|
||
}
|
||
});
|
||
|
||
// Connection status monitoring
|
||
function updateConnectionStatus() {
|
||
const statusIndicator = document.querySelector('.status-indicator');
|
||
const statusText = document.querySelector('.status-text');
|
||
|
||
if (navigator.onLine) {
|
||
if (statusIndicator) statusIndicator.className = 'status-indicator online';
|
||
if (statusText) statusText.textContent = 'Online';
|
||
} else {
|
||
if (statusIndicator) statusIndicator.className = 'status-indicator offline';
|
||
if (statusText) statusText.textContent = 'Offline';
|
||
}
|
||
}
|
||
|
||
// Monitor connection changes
|
||
window.addEventListener('online', updateConnectionStatus);
|
||
window.addEventListener('offline', updateConnectionStatus);
|
||
updateConnectionStatus(); // Initial check
|
||
|
||
// Export app globally for console access
|
||
window.app = app;
|
||
</script>
|
||
</body>
|
||
</html> |