Chasse_aux_couronnes/js/main.js

// Variables globales pour les données
let monsters = [];
let quests = [];
let announcements = [];

// Éléments DOM
const monsterListEl = document.getElementById('monsterList');
const modalMonsterNameEl = document.getElementById('modalMonsterName');
const questListEl = document.getElementById('questList');
const addQuestBtn = document.getElementById('addQuestBtn');
const addQuestForm = document.getElementById('addQuestForm');
const crownFilterEls = document.querySelectorAll('input[name="crownFilter"]');
const announcementAreaEl = document.getElementById('announcementArea');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
const monsterSearchEl = document.getElementById('monsterSearch');
const clearSearchBtn = document.getElementById('clearSearchBtn');

// Variables globales
let currentMonsterId = null;
let currentQuestToDelete = null;

// Modales Bootstrap
const questListModal = new bootstrap.Modal(document.getElementById('questListModal'));
const addQuestModal = new bootstrap.Modal(document.getElementById('addQuestModal'));
const deleteQuestModal = new bootstrap.Modal(document.getElementById('deleteQuestModal'));

// Initialisation
document.addEventListener('DOMContentLoaded', () => {
    loadData();
    renderMonsterList();
    initMonsterSearchSelect();
    displayAnnouncements();
    
    // Événements
    addQuestBtn.addEventListener('click', () => {
        resetMonsterSearchSelect();
        addQuestModal.show();
    });
    addQuestForm.addEventListener('submit', handleAddQuest);
    crownFilterEls.forEach(radio => {
        radio.addEventListener('change', filterQuests);
    });
    confirmDeleteBtn.addEventListener('click', handleDeleteQuest);
    
    // Événements pour la recherche
    monsterSearchEl.addEventListener('input', searchMonsters);
    clearSearchBtn.addEventListener('click', clearSearch);
});

// Fonctions de chargement et sauvegarde des données
function loadData() {
    // Vérifier si les données de jeu sont disponibles depuis data.js
    if (window.gameData) {
        // Copier les monstres depuis gameData
        monsters = [...window.gameData.monsters];
        
        // Charger les quêtes depuis localStorage ou utiliser les données par défaut
        const storedQuests = localStorage.getItem('mhw_quests');
        quests = storedQuests ? JSON.parse(storedQuests) : [...window.gameData.initialQuests];
        
        // Charger les annonces depuis localStorage ou utiliser les données par défaut
        const storedAnnouncements = localStorage.getItem('mhw_announcements');
        announcements = storedAnnouncements ? JSON.parse(storedAnnouncements) : [...window.gameData.initialAnnouncements];
    } else {
        console.error("Erreur: données de jeu non disponibles. Assurez-vous que data.js est chargé avant main.js");
        monsterListEl.innerHTML = `
            <div class="col-12">
                <div class="alert alert-danger">
                    Erreur de chargement des données. Veuillez rafraîchir la page.
                </div>
            </div>
        `;
    }
}

function saveData() {
    localStorage.setItem('mhw_quests', JSON.stringify(quests));
    localStorage.setItem('mhw_announcements', JSON.stringify(announcements));
    console.log('Données sauvegardées');
}

// Affichage des annonces
function displayAnnouncements() {
    const activeAnnouncements = announcements.filter(a => a.active);
    
    if (activeAnnouncements.length > 0) {
        announcementAreaEl.innerHTML = activeAnnouncements.map(a => `<p>${a.text}</p>`).join('');
        announcementAreaEl.classList.remove('d-none');
    } else {
        announcementAreaEl.classList.add('d-none');
    }
}

// Rendu de la liste des monstres
function renderMonsterList(filteredMonsters = null) {
    const monstersToRender = filteredMonsters || monsters;
    
    if (monstersToRender.length === 0) {
        monsterListEl.innerHTML = `
            <div class="col-12">
                <div class="empty-message">
                    <p>Aucun monstre disponible pour le moment.</p>
                </div>
            </div>
        `;
        return;
    }

    monsterListEl.innerHTML = monstersToRender.map(monster => {
        const smallCrownCount = quests.filter(q => q.monsterId === monster.id && q.crownType === 'small').length;
        const largeCrownCount = quests.filter(q => q.monsterId === monster.id && q.crownType === 'large').length;
        
        return `
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card monster-card fade-in" data-monster-id="${monster.id}">
                    <div class="card-img-container">
                        <img src="${monster.image}" class="card-img-top" alt="${monster.name}">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">${monster.name}</h5>
                        <div class="d-flex justify-content-between">
                            <div>
                                <span class="crown-badge small-crown" title="Petites couronnes">
                                    <i class="bi bi-trophy-fill crown-icon">👑</i> ${smallCrownCount}
                                </span>
                                <span class="crown-badge large-crown" title="Grandes couronnes">
                                    <i class="bi bi-trophy-fill crown-icon">👑</i> ${largeCrownCount}
                                </span>
                            </div>
                            <button class="btn btn-sm btn-outline-primary">Voir les quêtes</button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }).join('');

    // Ajouter les écouteurs d'événements après avoir rendu la liste
    document.querySelectorAll('.monster-card').forEach(card => {
        card.addEventListener('click', () => {
            const monsterId = parseInt(card.dataset.monsterId);
            showQuestsForMonster(monsterId);
        });
    });
}

// Recherche de monstres sur la page principale
function searchMonsters() {
    const searchTerm = monsterSearchEl.value.trim().toLowerCase();
    
    if (searchTerm === '') {
        // Si la recherche est vide, afficher tous les monstres
        renderMonsterList();
        return;
    }
    
    // Filtrer les monstres qui correspondent à la recherche
    const filteredMonsters = monsters.filter(monster => 
        monster.name.toLowerCase().includes(searchTerm)
    );
    
    // Afficher un message si aucun monstre ne correspond
    if (filteredMonsters.length === 0) {
        monsterListEl.innerHTML = `
            <div class="col-12">
                <div class="empty-message">
                    <p>Aucun monstre ne correspond à votre recherche "${monsterSearchEl.value}".</p>
                </div>
            </div>
        `;
        return;
    }
    
    renderMonsterList(filteredMonsters);
}

// Effacer la recherche
function clearSearch() {
    monsterSearchEl.value = '';
    renderMonsterList();
}

// Afficher les quêtes pour un monstre spécifique
function showQuestsForMonster(monsterId) {
    currentMonsterId = monsterId;
    const monster = monsters.find(m => m.id === monsterId);
    
    if (!monster) return;
    
    modalMonsterNameEl.textContent = monster.name;
    
    // Réinitialiser le filtre
    document.getElementById('filterAll').checked = true;
    
    // Afficher toutes les quêtes pour ce monstre
    renderQuestList(monsterId);
    
    // Afficher la modale
    questListModal.show();
}

// Rendu de la liste des quêtes
function renderQuestList(monsterId, filter = 'all') {
    let monsterQuests = quests.filter(q => q.monsterId === monsterId);
    
    if (filter !== 'all') {
        monsterQuests = monsterQuests.filter(q => q.crownType === filter);
    }
    
    if (monsterQuests.length === 0) {
        questListEl.innerHTML = `
            <div class="empty-message">
                <p>Aucune quête disponible pour ce monstre avec ce filtre.</p>
            </div>
        `;
        return;
    }
    
    questListEl.innerHTML = monsterQuests.map(quest => {
        const monster = monsters.find(m => m.id === quest.monsterId);
        const crownClass = quest.crownType === 'small' ? 'small-crown' : 'large-crown';
        const crownText = quest.crownType === 'small' ? 'Petite couronne' : 'Grande couronne';
        const questDate = new Date(quest.date);
        const daysDiff = Math.floor((new Date() - questDate) / (1000 * 60 * 60 * 24));
        const freshness = daysDiff <= 1 ? 'Aujourd\'hui' : 
                          daysDiff <= 2 ? 'Hier' : 
                          `Il y a ${daysDiff} jours`;
        
        return `
            <div class="card quest-card mb-3 fade-in">
                <div class="card-body">
                    <h5 class="card-title">
                        <span class="${crownClass}"><i class="bi bi-trophy-fill">👑</i></span>
                        ${crownText} pour ${monster.name}
                    </h5>
                    <p class="card-text">
                        Proposée par: <strong>${quest.playerName}</strong> (ID: ${quest.playerId})
                    </p>
                    <p class="quest-date">Ajoutée: ${freshness}</p>
                    <button class="btn btn-outline-danger btn-sm quest-delete-btn" 
                            data-quest-id="${quest.id}">
                        Supprimer
                    </button>
                </div>
            </div>
        `;
    }).join('');
    
    // Ajouter les écouteurs d'événements pour les boutons de suppression
    document.querySelectorAll('.quest-delete-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const questId = parseInt(btn.dataset.questId);
            showDeleteConfirmation(questId);
        });
    });
}

// Filtrer les quêtes
function filterQuests() {
    const filterValue = document.querySelector('input[name="crownFilter"]:checked').value;
    renderQuestList(currentMonsterId, filterValue);
}

// Afficher la confirmation de suppression
function showDeleteConfirmation(questId) {
    currentQuestToDelete = questId;
    deleteQuestModal.show();
}

// Gérer la suppression d'une quête
function handleDeleteQuest() {
    if (currentQuestToDelete === null) return;
    
    // Trouver l'index de la quête à supprimer
    const questIndex = quests.findIndex(q => q.id === currentQuestToDelete);
    
    if (questIndex === -1) return;
    
    // Mémoriser le monsterId pour mettre à jour l'affichage
    const monsterId = quests[questIndex].monsterId;
    
    // Supprimer la quête
    quests.splice(questIndex, 1);
    
    // Sauvegarder les données
    saveData();
    
    // Mettre à jour l'affichage
    renderMonsterList();
    
    // Si la modale des quêtes est ouverte, mettre à jour son contenu
    if (currentMonsterId === monsterId) {
        renderQuestList(currentMonsterId);
    }
    
    // Fermer la modale de confirmation
    deleteQuestModal.hide();
    
    // Réinitialiser
    currentQuestToDelete = null;
}

// Initialiser le sélecteur de monstre avec recherche
function initMonsterSearchSelect() {
    const searchInput = document.getElementById('monsterSearchSelect');
    const searchResults = document.getElementById('monsterSearchResults');
    const hiddenInput = document.getElementById('selectedMonsterId');
    
    if (!searchInput || !searchResults || !hiddenInput) return;
    
    // Événement pour l'input de recherche
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.trim().toLowerCase();
        
        // Filtrer les monstres qui correspondent à la recherche
        const filteredMonsters = monsters.filter(monster => 
            monster.name.toLowerCase().includes(searchTerm)
        );
        
        // Afficher les résultats
        renderSearchResults(filteredMonsters, searchResults);
        
        // Montrer les résultats si l'input a du contenu
        if (searchTerm.length > 0) {
            searchResults.classList.remove('d-none');
        } else if (!hiddenInput.value) {
            // Cacher seulement si aucun monstre n'est déjà sélectionné
            searchResults.classList.add('d-none');
        }
    });
    
    // Événement pour le focus sur l'input
    searchInput.addEventListener('focus', function() {
        const searchTerm = this.value.trim().toLowerCase();
        
        // Si l'input a du contenu ou si un monstre est déjà sélectionné, montrer les résultats
        if (searchTerm.length > 0 || hiddenInput.value) {
            // Filtrer les monstres qui correspondent à la recherche
            const filteredMonsters = searchTerm.length > 0 
                ? monsters.filter(monster => monster.name.toLowerCase().includes(searchTerm))
                : monsters;
                
            // Afficher les résultats
            renderSearchResults(filteredMonsters, searchResults);
            searchResults.classList.remove('d-none');
        }
    });
    
    // Fermer les résultats lors d'un clic à l'extérieur
    document.addEventListener('click', function(e) {
        if (!searchInput?.contains(e.target) && !searchResults?.contains(e.target)) {
            searchResults?.classList.add('d-none');
        }
    });
    
    // Navigation avec les flèches du clavier
    searchInput.addEventListener('keydown', function(e) {
        if (searchResults.classList.contains('d-none')) return;
        
        const items = searchResults.querySelectorAll('.monster-search-item');
        const activeItem = searchResults.querySelector('.monster-search-item.active');
        
        switch(e.key) {
            case 'ArrowDown':
                e.preventDefault();
                if (!activeItem) {
                    items[0]?.classList.add('active');
                    ensureVisible(items[0], searchResults);
                } else {
                    const nextItem = activeItem.nextElementSibling;
                    if (nextItem) {
                        activeItem.classList.remove('active');
                        nextItem.classList.add('active');
                        ensureVisible(nextItem, searchResults);
                    }
                }
                break;
                
            case 'ArrowUp':
                e.preventDefault();
                if (activeItem) {
                    const prevItem = activeItem.previousElementSibling;
                    if (prevItem) {
                        activeItem.classList.remove('active');
                        prevItem.classList.add('active');
                        ensureVisible(prevItem, searchResults);
                    }
                }
                break;
                
            case 'Enter':
                e.preventDefault();
                if (activeItem) {
                    const monsterId = activeItem.dataset.monsterId;
                    selectMonster(monsterId, searchInput, hiddenInput, searchResults);
                }
                break;
                
            case 'Escape':
                e.preventDefault();
                searchResults.classList.add('d-none');
                break;
        }
    });
}

// S'assurer que l'élément actif est visible dans la liste déroulante
function ensureVisible(element, container) {
    if (!element || !container) return;
    
    const containerRect = container.getBoundingClientRect();
    const elementRect = element.getBoundingClientRect();
    
    if (elementRect.bottom > containerRect.bottom) {
        container.scrollTop += elementRect.bottom - containerRect.bottom;
    } else if (elementRect.top < containerRect.top) {
        container.scrollTop -= containerRect.top - elementRect.top;
    }
}

// Afficher les résultats de recherche pour le sélecteur de monstre
function renderSearchResults(results, container) {
    if (!container) return;
    
    if (results.length === 0) {
        container.innerHTML = '<div class="monster-search-no-results">Aucun monstre trouvé</div>';
        return;
    }
    
    container.innerHTML = results.map(monster => 
        `<div class="monster-search-item" data-monster-id="${monster.id}">
            ${monster.name}
        </div>`
    ).join('');
    
    // Ajouter les écouteurs d'événements pour les éléments de la liste
    container.querySelectorAll('.monster-search-item').forEach(item => {
        item.addEventListener('click', function() {
            const monsterId = this.dataset.monsterId;
            const searchInput = document.getElementById('monsterSearchSelect');
            const hiddenInput = document.getElementById('selectedMonsterId');
            const searchResults = document.getElementById('monsterSearchResults');
            
            selectMonster(monsterId, searchInput, hiddenInput, searchResults);
        });
    });
}

// Sélectionner un monstre dans le sélecteur
function selectMonster(monsterId, searchInput, hiddenInput, searchResults) {
    const monster = monsters.find(m => m.id == monsterId);
    
    if (monster) {
        searchInput.value = monster.name;
        hiddenInput.value = monster.id;
        searchInput.classList.add('selected-monster');
        searchResults.classList.add('d-none');
    }
}

// Réinitialiser le sélecteur de monstre
function resetMonsterSearchSelect() {
    const searchInput = document.getElementById('monsterSearchSelect');
    const hiddenInput = document.getElementById('selectedMonsterId');
    const searchResults = document.getElementById('monsterSearchResults');
    
    if (searchInput) {
        searchInput.value = '';
        searchInput.classList.remove('selected-monster');
    }
    
    if (hiddenInput) {
        hiddenInput.value = '';
    }
    
    if (searchResults) {
        searchResults.classList.add('d-none');
    }
}

// Gérer l'ajout d'une quête
function handleAddQuest(e) {
    e.preventDefault();
    
    const monsterId = parseInt(document.getElementById('selectedMonsterId')?.value);
    const crownType = document.querySelector('input[name="crownType"]:checked')?.value;
    const playerName = document.getElementById('playerName')?.value.trim();
    const playerId = document.getElementById('playerId')?.value.trim();
    
    if (!monsterId || !crownType || !playerName || !playerId) {
        alert('Veuillez remplir tous les champs requis');
        return;
    }
    
    // Générer un ID unique pour la nouvelle quête
    const newQuestId = quests.length > 0 ? Math.max(...quests.map(q => q.id)) + 1 : 1;
    
    // Créer la nouvelle quête
    const newQuest = {
        id: newQuestId,
        monsterId,
        crownType,
        playerName,
        playerId,
        date: new Date().toISOString()
    };
    
    // Ajouter la quête à la liste
    quests.push(newQuest);
    
    // Sauvegarder les données
    saveData();
    
    // Mettre à jour l'affichage
    renderMonsterList();
    
    // Réinitialiser le formulaire et fermer la modale
    addQuestForm.reset();
    resetMonsterSearchSelect();
    addQuestModal.hide();
    
    // Si la modale des quêtes est ouverte, mettre à jour son contenu
    if (currentMonsterId === monsterId) {
        renderQuestList(currentMonsterId);
    }
}

// Nettoyer les quêtes de plus de 7 jours (à appeler depuis l'admin)
function cleanOldQuests() {
    const sevenDaysAgo = new Date();
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
    
    const oldQuestsCount = quests.filter(q => new Date(q.date) < sevenDaysAgo).length;
    
    quests = quests.filter(q => new Date(q.date) >= sevenDaysAgo);
    
    saveData();
    renderMonsterList();
    
    return oldQuestsCount;
}