From 66d0a56fddeb694c2d8893bd104bf33d606d69ea Mon Sep 17 00:00:00 2001 From: Esenjin Date: Sun, 9 Mar 2025 19:04:04 +0100 Subject: [PATCH] ajout du fichier main.js --- assets/js/main.js | 364 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 364 insertions(+) create mode 100644 assets/js/main.js diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..9f2edbc --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,364 @@ +/** + * Script principal pour MH Wilds - Partage de Quêtes à Couronnes + * Fichier à placer dans assets/js/main.js + */ + +document.addEventListener('DOMContentLoaded', function() { + // Éléments DOM + const monsterList = document.getElementById('monsterList'); + const monsterSearch = document.getElementById('monsterSearch'); + const clearSearchBtn = document.getElementById('clearSearchBtn'); + const addQuestBtn = document.getElementById('addQuestBtn'); + const monsterSearchSelect = document.getElementById('monsterSearchSelect'); + const monsterSearchResults = document.getElementById('monsterSearchResults'); + const selectedMonsterId = document.getElementById('selectedMonsterId'); + + // Variables globales + let monsters = []; + let currentMonsterId = null; + + // ========== INITIALISATION ========== + + // Récupérer la liste des monstres + fetchMonsters(); + + // Ajouter les écouteurs d'événements + if (clearSearchBtn) { + clearSearchBtn.addEventListener('click', clearSearch); + } + + if (monsterSearch) { + monsterSearch.addEventListener('input', filterMonsters); + } + + if (addQuestBtn) { + addQuestBtn.addEventListener('click', function() { + new bootstrap.Modal(document.getElementById('addQuestModal')).show(); + }); + } + + // Ajouter les écouteurs pour les cartes de monstres + if (monsterList) { + monsterList.addEventListener('click', function(e) { + const card = e.target.closest('.monster-card'); + if (card) { + const monsterId = parseInt(card.dataset.monsterId); + if (!isNaN(monsterId)) { + currentMonsterId = monsterId; + showQuestListModal(monsterId); + } + } + + // Si le clic est sur un bouton dans la carte + if (e.target.tagName === 'BUTTON') { + e.preventDefault(); + // Trouver la carte parent + const card = e.target.closest('.monster-card'); + if (card) { + const monsterId = parseInt(card.dataset.monsterId); + if (!isNaN(monsterId)) { + currentMonsterId = monsterId; + showQuestListModal(monsterId); + } + } + } + }); + } + + // Initialiser la recherche de monstre dans le formulaire d'ajout + if (monsterSearchSelect) { + monsterSearchSelect.addEventListener('focus', function() { + showMonsterSearchResults(); + }); + + monsterSearchSelect.addEventListener('input', function() { + showMonsterSearchResults(this.value); + }); + + // Clic en dehors des résultats pour les masquer + document.addEventListener('click', function(e) { + if (!monsterSearchSelect.contains(e.target) && !monsterSearchResults.contains(e.target)) { + monsterSearchResults.classList.add('d-none'); + } + }); + } + + // Écouteurs pour les filtres de couronnes dans la modale de quêtes + document.querySelectorAll('input[name="crownFilter"]').forEach(radio => { + radio.addEventListener('change', function() { + if (currentMonsterId) { + fetchQuests(currentMonsterId, this.value); + } + }); + }); + + // Initialiser les formulaires + initForms(); + + // ========== FONCTIONS ========== + + /** + * Récupérer tous les monstres via l'API + */ + function fetchMonsters() { + fetch('api.php?action=getMonsters') + .then(response => response.json()) + .then(data => { + if (data.success) { + monsters = data.monsters; + } + }) + .catch(error => { + console.error('Erreur lors de la récupération des monstres:', error); + }); + } + + /** + * Afficher la modale avec la liste des quêtes pour un monstre + * + * @param {number} monsterId ID du monstre + */ + function showQuestListModal(monsterId) { + // Réinitialiser le filtre à "Toutes" + document.getElementById('filterAll').checked = true; + + // Récupérer et afficher les quêtes + fetchQuests(monsterId, 'all'); + + // Afficher la modale + new bootstrap.Modal(document.getElementById('questListModal')).show(); + } + + /** + * Récupérer les quêtes pour un monstre + * + * @param {number} monsterId ID du monstre + * @param {string} crownType Type de couronne (all, small, large) + */ + function fetchQuests(monsterId, crownType) { + const questList = document.getElementById('questList'); + questList.innerHTML = '
'; + + fetch(`api.php?action=getQuests&monsterId=${monsterId}&crownType=${crownType}`) + .then(response => response.json()) + .then(data => { + if (data.success) { + // Mettre à jour le titre de la modale + document.getElementById('modalMonsterName').textContent = data.monster; + + // Afficher les quêtes + displayQuests(data.quests); + } else { + questList.innerHTML = `
Erreur: ${data.message}
`; + } + }) + .catch(error => { + console.error('Erreur lors de la récupération des quêtes:', error); + questList.innerHTML = '
Erreur de connexion. Veuillez réessayer.
'; + }); + } + + /** + * Afficher les quêtes dans la modale + * + * @param {Array} quests Liste des quêtes + */ + function displayQuests(quests) { + const questList = document.getElementById('questList'); + + if (quests.length === 0) { + questList.innerHTML = '

Aucune quête disponible pour ce monstre avec ce filtre.

'; + return; + } + + let html = ''; + + quests.forEach(quest => { + const crownClass = quest.crown_type === 'small' ? 'small-crown' : 'large-crown'; + const crownLabel = quest.crown_type === 'small' ? 'Petite couronne' : 'Grande couronne'; + + html += ` +
+
+
+ ${crownLabel} + +
+

Joueur: ${quest.player_name} (ID: ${quest.player_id})

+
Ajoutée: ${quest.freshness}
+
+
+ `; + }); + + questList.innerHTML = html; + + // Ajouter les écouteurs pour les boutons de suppression + questList.querySelectorAll('.delete-quest-btn').forEach(btn => { + btn.addEventListener('click', function() { + const questId = parseInt(this.dataset.id); + if (!isNaN(questId)) { + showDeleteQuestModal(questId); + } + }); + }); + } + + /** + * Afficher la modale de confirmation de suppression + * + * @param {number} questId ID de la quête à supprimer + */ + function showDeleteQuestModal(questId) { + document.getElementById('deleteQuestId').value = questId; + new bootstrap.Modal(document.getElementById('deleteQuestModal')).show(); + } + + /** + * Filtrer les monstres par nom + */ + function filterMonsters() { + const searchTerm = monsterSearch.value.toLowerCase(); + const cards = monsterList.querySelectorAll('.monster-card'); + + cards.forEach(card => { + const monsterName = card.querySelector('.card-title').textContent.toLowerCase(); + const parent = card.parentElement; // Le parent est la colonne + + if (monsterName.includes(searchTerm)) { + parent.style.display = 'block'; + } else { + parent.style.display = 'none'; + } + }); + } + + /** + * Effacer la recherche + */ + function clearSearch() { + monsterSearch.value = ''; + filterMonsters(); + } + + /** + * Afficher les résultats de recherche de monstre + * + * @param {string} searchTerm Terme de recherche + */ + function showMonsterSearchResults(searchTerm = '') { + // Afficher le conteneur des résultats + monsterSearchResults.classList.remove('d-none'); + + // Filtrer les monstres + const filteredMonsters = monsters.filter(monster => { + if (searchTerm === '') return true; + return monster.name.toLowerCase().includes(searchTerm.toLowerCase()); + }); + + // Générer le HTML + if (filteredMonsters.length === 0) { + monsterSearchResults.innerHTML = '
Aucun monstre trouvé
'; + } else { + let html = ''; + filteredMonsters.forEach(monster => { + html += `
${monster.name}
`; + }); + monsterSearchResults.innerHTML = html; + + // Ajouter les écouteurs pour la sélection + monsterSearchResults.querySelectorAll('.monster-search-item').forEach(item => { + item.addEventListener('click', function() { + const monsterId = parseInt(this.dataset.id); + const monsterName = this.textContent; + + // Mettre à jour les champs + monsterSearchSelect.value = monsterName; + selectedMonsterId.value = monsterId; + + // Masquer les résultats + monsterSearchResults.classList.add('d-none'); + + // Réinitialiser la validation + monsterSearchSelect.classList.remove('is-invalid'); + }); + }); + } + } + + /** + * Initialiser les formulaires + */ + function initForms() { + // Formulaire d'ajout de quête + const addQuestForm = document.getElementById('addQuestForm'); + if (addQuestForm) { + addQuestForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Vérifier que le monstre est sélectionné + if (!selectedMonsterId.value) { + monsterSearchSelect.classList.add('is-invalid'); + return; + } + + // Récupérer les données du formulaire + const formData = new FormData(this); + + // Envoyer les données + fetch('api.php?action=addQuest', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + // Masquer la modale + bootstrap.Modal.getInstance(document.getElementById('addQuestModal')).hide(); + + // Recharger la page pour mettre à jour le nombre de quêtes + window.location.reload(); + } else { + alert('Erreur lors de l\'ajout de la quête: ' + (data.message || 'Erreur inconnue')); + } + }) + .catch(error => { + console.error('Erreur:', error); + alert('Erreur de connexion. Veuillez réessayer.'); + }); + }); + } + + // Formulaire de suppression de quête + const confirmDeleteBtn = document.getElementById('confirmDeleteBtn'); + if (confirmDeleteBtn) { + confirmDeleteBtn.addEventListener('click', function() { + const formData = new FormData(document.getElementById('deleteQuestForm')); + + fetch('api.php?action=deleteQuest', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + // Masquer la modale de confirmation + bootstrap.Modal.getInstance(document.getElementById('deleteQuestModal')).hide(); + + // Mettre à jour la liste des quêtes + const crownType = document.querySelector('input[name="crownFilter"]:checked').value; + fetchQuests(currentMonsterId, crownType); + } else { + alert('Erreur lors de la suppression de la quête: ' + (data.message || 'Erreur inconnue')); + } + }) + .catch(error => { + console.error('Erreur:', error); + alert('Erreur de connexion. Veuillez réessayer.'); + }); + }); + } + } +}); \ No newline at end of file