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>
222 lines
7.6 KiB
HTML
222 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Système de Compatibilité</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.test-result {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.compatible {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
.incompatible {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
.score {
|
|
font-weight: bold;
|
|
}
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
.log {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎯 Test du Système de Compatibilité Content-Game</h1>
|
|
|
|
<div class="test-container">
|
|
<h2>Chargement des modules</h2>
|
|
<button onclick="loadModules()">Charger les modules</button>
|
|
<div id="loading-status"></div>
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<h2>Tests de compatibilité</h2>
|
|
<button onclick="runCompatibilityTests()">Lancer les tests</button>
|
|
<div id="test-results"></div>
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<h2>Log des opérations</h2>
|
|
<button onclick="clearLog()">Effacer le log</button>
|
|
<div id="log" class="log"></div>
|
|
</div>
|
|
|
|
<!-- Scripts nécessaires -->
|
|
<script src="js/core/utils.js"></script>
|
|
<script src="js/core/content-scanner.js"></script>
|
|
<script src="js/core/content-game-compatibility.js"></script>
|
|
<script src="js/content/test-compatibility.js"></script>
|
|
|
|
<script>
|
|
let contentScanner;
|
|
let compatibilityChecker;
|
|
let testContent = [];
|
|
|
|
// Logger simple pour les tests
|
|
function logSh(message, level = 'INFO') {
|
|
const logDiv = document.getElementById('log');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
logDiv.textContent += `[${timestamp}] ${level}: ${message}\n`;
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
console.log(`[${level}] ${message}`);
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('log').textContent = '';
|
|
}
|
|
|
|
async function loadModules() {
|
|
const statusDiv = document.getElementById('loading-status');
|
|
statusDiv.innerHTML = '⏳ Chargement en cours...';
|
|
|
|
try {
|
|
// Initialiser le scanner de contenu
|
|
contentScanner = new ContentScanner();
|
|
logSh('✅ ContentScanner initialisé');
|
|
|
|
// Initialiser le vérificateur de compatibilité
|
|
compatibilityChecker = new ContentGameCompatibility();
|
|
logSh('✅ ContentGameCompatibility initialisé');
|
|
|
|
// Scanner le contenu (nos modules de test devraient être trouvés)
|
|
const scannedContent = await contentScanner.scanAllContent();
|
|
logSh(`📦 ${scannedContent.found.length} modules de contenu trouvés`);
|
|
|
|
// Récupérer nos modules de test spécifiquement
|
|
testContent = scannedContent.found.filter(content =>
|
|
content.id.includes('test-') || content.name.includes('Test')
|
|
);
|
|
|
|
statusDiv.innerHTML = `
|
|
<div style="color: green;">
|
|
✅ Modules chargés avec succès<br>
|
|
📊 ${scannedContent.found.length} modules total<br>
|
|
🧪 ${testContent.length} modules de test trouvés
|
|
</div>
|
|
`;
|
|
|
|
logSh(`🧪 Modules de test: ${testContent.map(c => c.name).join(', ')}`);
|
|
|
|
} catch (error) {
|
|
statusDiv.innerHTML = `<div style="color: red;">❌ Erreur: ${error.message}</div>`;
|
|
logSh(`❌ Erreur lors du chargement: ${error.message}`, 'ERROR');
|
|
}
|
|
}
|
|
|
|
function runCompatibilityTests() {
|
|
const resultsDiv = document.getElementById('test-results');
|
|
|
|
if (!compatibilityChecker || testContent.length === 0) {
|
|
resultsDiv.innerHTML = '<div style="color: red;">❌ Modules non chargés. Cliquez d\'abord sur "Charger les modules"</div>';
|
|
return;
|
|
}
|
|
|
|
logSh('🧪 Début des tests de compatibilité');
|
|
|
|
const games = [
|
|
'whack-a-mole',
|
|
'whack-a-mole-hard',
|
|
'memory-match',
|
|
'quiz-game',
|
|
'fill-the-blank',
|
|
'text-reader',
|
|
'adventure-reader'
|
|
];
|
|
|
|
let resultsHTML = '<h3>Résultats des tests</h3>';
|
|
|
|
testContent.forEach(content => {
|
|
resultsHTML += `<h4>📦 ${content.name}</h4>`;
|
|
|
|
games.forEach(game => {
|
|
const compatibility = compatibilityChecker.checkCompatibility(content, game);
|
|
const cssClass = compatibility.compatible ? 'compatible' : 'incompatible';
|
|
const icon = compatibility.compatible ? '✅' : '❌';
|
|
|
|
resultsHTML += `
|
|
<div class="test-result ${cssClass}">
|
|
<strong>${icon} ${game}</strong><br>
|
|
<span class="score">Score: ${compatibility.score}%</span><br>
|
|
Raison: ${compatibility.reason}<br>
|
|
Recommandation: ${compatibility.details?.recommendation || 'N/A'}
|
|
</div>
|
|
`;
|
|
|
|
logSh(`🎮 ${content.name} → ${game}: ${compatibility.compatible ? 'COMPATIBLE' : 'INCOMPATIBLE'} (${compatibility.score}%)`);
|
|
});
|
|
});
|
|
|
|
resultsDiv.innerHTML = resultsHTML;
|
|
logSh('✅ Tests de compatibilité terminés');
|
|
}
|
|
|
|
// Fonctions utilitaires manquantes pour les tests
|
|
window.Utils = {
|
|
storage: {
|
|
get: (key, defaultValue) => {
|
|
try {
|
|
const value = localStorage.getItem(key);
|
|
return value ? JSON.parse(value) : defaultValue;
|
|
} catch {
|
|
return defaultValue;
|
|
}
|
|
},
|
|
set: (key, value) => {
|
|
try {
|
|
localStorage.setItem(key, JSON.stringify(value));
|
|
} catch (e) {
|
|
console.warn('Cannot save to localStorage:', e);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Auto-charger au démarrage
|
|
window.addEventListener('load', () => {
|
|
logSh('🚀 Page de test chargée');
|
|
loadModules();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |