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>
333 lines
11 KiB
HTML
333 lines
11 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 Final - Système de Compatibilité</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f7fa;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.test-result {
|
|
padding: 12px;
|
|
margin: 8px 0;
|
|
border-radius: 6px;
|
|
border-left: 4px solid #ddd;
|
|
}
|
|
.success {
|
|
background: #d4edda;
|
|
border-left-color: #28a745;
|
|
color: #155724;
|
|
}
|
|
.warning {
|
|
background: #fff3cd;
|
|
border-left-color: #ffc107;
|
|
color: #856404;
|
|
}
|
|
.error {
|
|
background: #f8d7da;
|
|
border-left-color: #dc3545;
|
|
color: #721c24;
|
|
}
|
|
.compatible {
|
|
background: #e8f5e8;
|
|
border-left-color: #28a745;
|
|
}
|
|
.incompatible {
|
|
background: #fff8e1;
|
|
border-left-color: #ff9800;
|
|
}
|
|
.score {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
button {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
margin: 8px 4px;
|
|
transition: transform 0.2s;
|
|
}
|
|
button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
.log {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
white-space: pre-wrap;
|
|
}
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.stat-card {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
.stat-number {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
}
|
|
.content-card {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin: 10px 0;
|
|
}
|
|
.compatibility-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎯 Test Final - Système de Compatibilité Content-Game</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>📊 Vue d'ensemble</h2>
|
|
<div class="stats" id="stats">
|
|
<!-- Stats will be populated here -->
|
|
</div>
|
|
<button onclick="runFullTest()">🚀 Lancer Test Complet</button>
|
|
<button onclick="clearLog()">🗑️ Effacer Log</button>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📦 Contenus Détectés</h2>
|
|
<div id="content-list"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎮 Matrice de Compatibilité</h2>
|
|
<div id="compatibility-matrix"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📋 Log d'Exécution</h2>
|
|
<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-minimal.js"></script>
|
|
<script src="js/content/test-rich.js"></script>
|
|
|
|
<script>
|
|
let contentScanner;
|
|
let compatibilityChecker;
|
|
let allContent = [];
|
|
|
|
// Logger
|
|
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 = '';
|
|
}
|
|
|
|
// Utils nécessaires
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Initialisation
|
|
async function init() {
|
|
logSh('🚀 Initialisation du test de compatibilité');
|
|
|
|
try {
|
|
contentScanner = new ContentScanner();
|
|
compatibilityChecker = new ContentGameCompatibility();
|
|
logSh('✅ Modules initialisés');
|
|
|
|
await loadContent();
|
|
updateStats();
|
|
|
|
} catch (error) {
|
|
logSh(`❌ Erreur d'initialisation: ${error.message}`, 'ERROR');
|
|
}
|
|
}
|
|
|
|
async function loadContent() {
|
|
logSh('📦 Chargement du contenu...');
|
|
const results = await contentScanner.scanAllContent();
|
|
allContent = results.found;
|
|
logSh(`✅ ${allContent.length} modules de contenu chargés`);
|
|
|
|
displayContentList();
|
|
}
|
|
|
|
function displayContentList() {
|
|
const contentList = document.getElementById('content-list');
|
|
contentList.innerHTML = '';
|
|
|
|
allContent.forEach(content => {
|
|
const div = document.createElement('div');
|
|
div.className = 'content-card';
|
|
div.innerHTML = `
|
|
<h4>${content.name}</h4>
|
|
<p>${content.description}</p>
|
|
<p><strong>Stats:</strong>
|
|
${content.stats?.vocabularyCount || 0} mots,
|
|
${content.stats?.sentenceCount || 0} phrases,
|
|
${content.stats?.dialogueCount || 0} dialogues
|
|
</p>
|
|
`;
|
|
contentList.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function updateStats() {
|
|
const statsDiv = document.getElementById('stats');
|
|
const games = ['whack-a-mole', 'memory-match', 'quiz-game', 'fill-the-blank', 'text-reader', 'adventure-reader'];
|
|
|
|
let totalCompatible = 0;
|
|
let totalTests = 0;
|
|
|
|
allContent.forEach(content => {
|
|
games.forEach(game => {
|
|
const compatibility = compatibilityChecker.checkCompatibility(content, game);
|
|
if (compatibility.compatible) totalCompatible++;
|
|
totalTests++;
|
|
});
|
|
});
|
|
|
|
statsDiv.innerHTML = `
|
|
<div class="stat-card">
|
|
<div class="stat-number">${allContent.length}</div>
|
|
<div>Modules de Contenu</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">${games.length}</div>
|
|
<div>Types de Jeux</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">${totalTests}</div>
|
|
<div>Tests Effectués</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">${Math.round(totalCompatible/totalTests*100)}%</div>
|
|
<div>Compatibilité Globale</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async function runFullTest() {
|
|
logSh('🧪 Lancement du test complet de compatibilité');
|
|
|
|
const games = ['whack-a-mole', 'memory-match', 'quiz-game', 'fill-the-blank', 'text-reader', 'adventure-reader'];
|
|
const matrixDiv = document.getElementById('compatibility-matrix');
|
|
|
|
let matrixHTML = `
|
|
<table style="width:100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="background: #f8f9fa;">
|
|
<th style="padding: 10px; border: 1px solid #ddd;">Contenu</th>
|
|
${games.map(game => `<th style="padding: 10px; border: 1px solid #ddd;">${game}</th>`).join('')}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
allContent.forEach(content => {
|
|
matrixHTML += `<tr><td style="padding: 10px; border: 1px solid #ddd; font-weight: bold;">${content.name}</td>`;
|
|
|
|
games.forEach(game => {
|
|
const compatibility = compatibilityChecker.checkCompatibility(content, game);
|
|
const bgColor = compatibility.compatible ? '#e8f5e8' : '#fff8e1';
|
|
const textColor = compatibility.compatible ? '#2e7d32' : '#f57c00';
|
|
const icon = compatibility.compatible ? '✅' : '⚠️';
|
|
|
|
matrixHTML += `
|
|
<td style="padding: 10px; border: 1px solid #ddd; background: ${bgColor}; color: ${textColor}; text-align: center;">
|
|
${icon}<br>
|
|
<strong>${compatibility.score}%</strong><br>
|
|
<small>${compatibility.details?.recommendation || 'N/A'}</small>
|
|
</td>
|
|
`;
|
|
|
|
logSh(`🎯 ${content.name} → ${game}: ${compatibility.compatible ? 'COMPATIBLE' : 'INCOMPATIBLE'} (${compatibility.score}%)`);
|
|
});
|
|
|
|
matrixHTML += '</tr>';
|
|
});
|
|
|
|
matrixHTML += '</tbody></table>';
|
|
matrixDiv.innerHTML = matrixHTML;
|
|
|
|
// Test des suggestions d'amélioration
|
|
logSh('\n💡 Test des suggestions d\'amélioration:');
|
|
allContent.forEach(content => {
|
|
games.forEach(game => {
|
|
const compatibility = compatibilityChecker.checkCompatibility(content, game);
|
|
if (!compatibility.compatible) {
|
|
const suggestions = compatibilityChecker.getImprovementSuggestions(content, game);
|
|
if (suggestions.length > 0) {
|
|
logSh(` 📝 ${content.name} + ${game}:`);
|
|
suggestions.forEach(suggestion => {
|
|
logSh(` 💡 ${suggestion}`);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
updateStats();
|
|
logSh('🎉 Test complet terminé!');
|
|
}
|
|
|
|
// Auto-init
|
|
window.addEventListener('load', init);
|
|
</script>
|
|
</body>
|
|
</html> |