StillHammer
fe7153d28b
- Add intelligent content-game compatibility system with visual badges - Fix Adventure Reader to work with Dragon's Pearl content structure - Implement multi-column games grid for faster navigation - Add pronunciation display for Chinese vocabulary and sentences - Fix navigation breadcrumb to show proper hierarchy (Home > Levels > Content) - Add back buttons to all navigation pages - Improve JSONContentLoader to preserve story structure - Add comprehensive debugging and diagnostic tools 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
345 lines
14 KiB
HTML
345 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Interactive English Class</title>
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/navigation.css">
|
|
<link rel="stylesheet" href="css/games.css">
|
|
</head>
|
|
<body>
|
|
<!-- Top Bar with Network Status -->
|
|
<div class="top-bar">
|
|
<div class="top-bar-left">
|
|
<div class="top-bar-title">🎓 Interactive English Class</div>
|
|
<nav class="breadcrumb" id="breadcrumb">
|
|
<button class="breadcrumb-item active" data-page="home">🏠 Home</button>
|
|
</nav>
|
|
</div>
|
|
<div class="top-bar-right">
|
|
<div class="network-status" id="network-status">
|
|
<div class="network-indicator connecting" id="network-indicator"></div>
|
|
<span class="network-status-text" id="network-status-text">Connecting...</span>
|
|
</div>
|
|
<button class="logger-toggle" onclick="openLogsInterface()" title="Open logs interface">📋</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<main class="container" id="main-container">
|
|
|
|
<!-- Home Page -->
|
|
<div class="page active" id="home-page">
|
|
|
|
<div class="hero">
|
|
<h1>🎓 Interactive English Class</h1>
|
|
<p>Learn English while having fun!</p>
|
|
</div>
|
|
|
|
<div class="main-options">
|
|
<button class="option-card primary" onclick="navigateTo('levels')">
|
|
📚 <span>Create a custom lesson</span>
|
|
</button>
|
|
<button class="option-card secondary" onclick="showComingSoon()">
|
|
📊 <span>Statistics</span>
|
|
<small>Coming soon</small>
|
|
</button>
|
|
<button class="option-card secondary" onclick="showComingSoon()">
|
|
⚙️ <span>Settings</span>
|
|
<small>Coming soon</small>
|
|
</button>
|
|
<button class="option-card primary" onclick="showContentCreator()">
|
|
🏭 <span>Content Creator</span>
|
|
<small>Create your own exercises</small>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level/Content Selection -->
|
|
<div class="page" id="levels-page">
|
|
<div class="page-header">
|
|
<button class="back-btn" onclick="AppNavigation.goBack()">← Back</button>
|
|
<h2>📚 Choose your level</h2>
|
|
<p>Select the content you want to learn</p>
|
|
</div>
|
|
|
|
<div class="cards-grid" id="levels-grid">
|
|
<!-- Cards will be generated dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Type Selection -->
|
|
<div class="page" id="games-page">
|
|
<div class="page-header">
|
|
<button class="back-btn" onclick="AppNavigation.goBack()">← Back</button>
|
|
<h2>🎮 Choose your game</h2>
|
|
<p id="game-description">Select the type of activity for this content</p>
|
|
</div>
|
|
|
|
<div class="cards-grid" id="games-grid">
|
|
<!-- Cards will be generated dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Page -->
|
|
<div class="page" id="game-page">
|
|
<div class="game-header">
|
|
<button class="back-btn" onclick="goBack()">← Back</button>
|
|
<h3 id="game-title">Game in progress...</h3>
|
|
<div class="score-display">
|
|
Score: <span id="current-score">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-container" id="game-container">
|
|
<!-- The game will be loaded here dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Modal Coming Soon -->
|
|
<div class="modal" id="coming-soon-modal">
|
|
<div class="modal-content">
|
|
<h3>🚧 Coming Soon!</h3>
|
|
<p>This feature will be available in an upcoming version.</p>
|
|
<button onclick="closeModal()">OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/core/websocket-logger.js"></script>
|
|
<script src="js/core/env-config.js"></script>
|
|
<script src="js/core/utils.js"></script>
|
|
<script src="js/core/content-engine.js"></script>
|
|
<script src="js/core/content-factory.js"></script>
|
|
<script src="js/core/content-parsers.js"></script>
|
|
<script src="js/core/content-generators.js"></script>
|
|
<script src="js/core/content-scanner.js"></script>
|
|
<script src="js/core/json-content-loader.js"></script>
|
|
<script src="js/core/content-game-compatibility.js"></script>
|
|
<script src="js/tools/content-creator.js"></script>
|
|
<script src="js/core/navigation.js"></script>
|
|
<script src="js/core/game-loader.js"></script>
|
|
<script>
|
|
// Fonction de debug pour le logger
|
|
function toggleLoggerDebug() {
|
|
console.log('🔧 Bouton toggle cliqué!');
|
|
|
|
if (typeof window.logger === 'undefined') {
|
|
console.error('❌ window.logger n\'existe pas!');
|
|
alert('Erreur: Logger non initialisé!');
|
|
return;
|
|
}
|
|
|
|
console.log('✅ Logger existe, toggle...');
|
|
try {
|
|
window.logger.toggle();
|
|
console.log('✅ Toggle réussi');
|
|
} catch (error) {
|
|
console.error('❌ Erreur toggle:', error);
|
|
alert('Erreur toggle: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Initialize app when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🔧 DOM loaded, initializing...');
|
|
logSh('🎯 DOM loaded, initializing application...', 'INFO');
|
|
|
|
// Vérifier que le logger existe
|
|
if (typeof window.logger === 'undefined') {
|
|
console.error('❌ Logger not found on load!');
|
|
} else {
|
|
console.log('✅ Logger found:', window.logger);
|
|
}
|
|
|
|
// Test du logger
|
|
if (typeof logSh !== 'undefined') {
|
|
logSh('🚀 Application démarrée', 'INFO');
|
|
logSh('Logger système intégré avec succès', 'DEBUG');
|
|
} else {
|
|
console.log('🚀 Application démarrée (pas de logger)');
|
|
}
|
|
|
|
// Initialize connection status listener
|
|
initConnectionStatus();
|
|
|
|
// Initialize navigation system
|
|
AppNavigation.init();
|
|
|
|
// Test initial network connection
|
|
setTimeout(testNetworkConnection, 1000);
|
|
});
|
|
|
|
// Network Status Manager
|
|
function initConnectionStatus() {
|
|
// Listen for content connection status events
|
|
window.addEventListener('contentConnectionStatus', function(event) {
|
|
updateNetworkStatus(event.detail);
|
|
});
|
|
|
|
// Test connection périodiquement
|
|
setInterval(testNetworkConnection, 30000); // Test toutes les 30 secondes
|
|
}
|
|
|
|
function updateNetworkStatus(details) {
|
|
const indicator = document.getElementById('network-indicator');
|
|
const text = document.getElementById('network-status-text');
|
|
|
|
// Remove all status classes
|
|
indicator.classList.remove('connecting', 'online', 'offline');
|
|
|
|
// Update based on status
|
|
switch(details.status) {
|
|
case 'loading':
|
|
indicator.classList.add('connecting');
|
|
text.textContent = 'Connexion...';
|
|
break;
|
|
|
|
case 'online':
|
|
indicator.classList.add('online');
|
|
text.textContent = 'Online';
|
|
break;
|
|
|
|
case 'offline':
|
|
indicator.classList.add('offline');
|
|
text.textContent = 'Local';
|
|
break;
|
|
|
|
case 'error':
|
|
indicator.classList.add('offline');
|
|
text.textContent = 'Hors ligne';
|
|
break;
|
|
}
|
|
}
|
|
|
|
async function testNetworkConnection() {
|
|
const indicator = document.getElementById('network-indicator');
|
|
const text = document.getElementById('network-status-text');
|
|
|
|
// Désactiver les tests réseau en mode file://
|
|
if (window.location.protocol === 'file:') {
|
|
indicator.classList.remove('connecting', 'online');
|
|
indicator.classList.add('offline');
|
|
text.textContent = 'Local Mode';
|
|
logSh('📁 Mode file:// - Test réseau ignoré', 'INFO');
|
|
return;
|
|
}
|
|
|
|
logSh('🔍 Test de connexion réseau démarré...', 'INFO');
|
|
|
|
try {
|
|
// Test avec l'endpoint DigitalOcean avec timeout approprié
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(() => controller.abort(), 5000); // Plus de temps
|
|
|
|
// Utiliser le proxy local au lieu de DigitalOcean directement
|
|
const testUrl = 'http://localhost:8083/do-proxy/english-class-demo.json';
|
|
logSh(`🌐 Test URL (proxy): ${testUrl}`, 'INFO');
|
|
logSh(`🕐 Timeout configuré: 5000ms`, 'DEBUG');
|
|
logSh(`🔧 Mode: GET sans headers spéciaux`, 'DEBUG');
|
|
|
|
logSh('📤 Envoi de la requête fetch...', 'INFO');
|
|
const fetchStart = Date.now();
|
|
|
|
const response = await fetch(testUrl, {
|
|
method: 'GET',
|
|
signal: controller.signal,
|
|
mode: 'cors',
|
|
cache: 'no-cache'
|
|
});
|
|
|
|
const fetchDuration = Date.now() - fetchStart;
|
|
clearTimeout(timeoutId);
|
|
|
|
logSh(`⏱️ Durée de la requête: ${fetchDuration}ms`, 'INFO');
|
|
logSh(`📡 Réponse reçue: ${response.status} ${response.statusText}`, 'INFO');
|
|
logSh(`📋 Headers response: ${JSON.stringify(Object.fromEntries(response.headers.entries()))}`, 'DEBUG');
|
|
|
|
if (response.ok) {
|
|
indicator.classList.remove('connecting', 'offline');
|
|
indicator.classList.add('online');
|
|
text.textContent = 'Online';
|
|
logSh('✅ Connection successful!', 'INFO');
|
|
} else {
|
|
// Pour les buckets privés, on considère 403 comme "connexion OK mais accès privé"
|
|
if (response.status === 403) {
|
|
indicator.classList.remove('connecting', 'offline');
|
|
indicator.classList.add('online');
|
|
text.textContent = 'Privé';
|
|
logSh('🔒 Connexion OK mais accès privé (403)', 'WARN');
|
|
} else {
|
|
logSh(`❌ Erreur HTTP: ${response.status}`, 'ERROR');
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
logSh(`💥 ERREUR DÉTAILLÉE: Type=${error.constructor.name}, Name=${error.name}, Message=${error.message}`, 'ERROR');
|
|
logSh(`🔍 Stack trace: ${error.stack}`, 'DEBUG');
|
|
logSh(`🌐 URL qui a échoué: http://localhost:8083/do-proxy/english-class-demo.json`, 'ERROR');
|
|
logSh(`🔧 Type d'erreur: ${typeof error}`, 'DEBUG');
|
|
|
|
// Vérifier si le serveur proxy est accessible
|
|
logSh('🔍 Test de base du serveur proxy...', 'INFO');
|
|
try {
|
|
const basicTest = await fetch('http://localhost:8083/', { method: 'GET' });
|
|
logSh(`📡 Test serveur proxy: ${basicTest.status}`, 'INFO');
|
|
} catch (proxyError) {
|
|
logSh(`❌ Serveur proxy inaccessible: ${proxyError.message}`, 'ERROR');
|
|
}
|
|
|
|
indicator.classList.remove('connecting', 'online');
|
|
indicator.classList.add('offline');
|
|
if (error.name === 'AbortError') {
|
|
text.textContent = 'Timeout';
|
|
logSh('⏰ Timeout de connexion après 5000ms', 'WARN');
|
|
} else if (error.message.includes('Failed to fetch')) {
|
|
text.textContent = 'Serveur inaccessible';
|
|
logSh(`🚫 Le serveur proxy sur port 8083 n'est pas accessible`, 'ERROR');
|
|
} else {
|
|
text.textContent = 'Hors ligne';
|
|
logSh(`🚫 Hors ligne: ${error.message}`, 'ERROR');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Coming soon functionality
|
|
function showComingSoon() {
|
|
logSh('🚧 Ouverture modal "Bientôt disponible"', 'INFO');
|
|
document.getElementById('coming-soon-modal').classList.add('show');
|
|
}
|
|
|
|
function closeModal() {
|
|
logSh('❌ Fermeture modal', 'DEBUG');
|
|
document.getElementById('coming-soon-modal').classList.remove('show');
|
|
}
|
|
|
|
function showContentCreator() {
|
|
logSh('🏭 Ouverture du créateur de contenu', 'INFO');
|
|
// Masquer la page d'accueil
|
|
document.getElementById('home-page').classList.remove('active');
|
|
|
|
// Créer et afficher le créateur de contenu
|
|
const creator = new ContentCreator();
|
|
creator.init();
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
logSh('⌨️ Touche Escape pressée', 'DEBUG');
|
|
closeModal();
|
|
AppNavigation.goBack();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |