ajout du fichier main.js
This commit is contained in:
parent
d69c728a65
commit
66d0a56fdd
364
assets/js/main.js
Normal file
364
assets/js/main.js
Normal file
@ -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 = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div></div>';
|
||||
|
||||
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 = `<div class="alert alert-danger">Erreur: ${data.message}</div>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur lors de la récupération des quêtes:', error);
|
||||
questList.innerHTML = '<div class="alert alert-danger">Erreur de connexion. Veuillez réessayer.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 = '<div class="empty-message"><p>Aucune quête disponible pour ce monstre avec ce filtre.</p></div>';
|
||||
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 += `
|
||||
<div class="card quest-card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="crown-badge ${crownClass}">${crownLabel}</span>
|
||||
<button class="btn btn-sm btn-outline-danger delete-quest-btn" data-id="${quest.id}">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
<p class="my-2">Joueur: <strong>${quest.player_name}</strong> (ID: ${quest.player_id})</p>
|
||||
<div class="quest-date">Ajoutée: ${quest.freshness}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
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 = '<div class="monster-search-no-results">Aucun monstre trouvé</div>';
|
||||
} else {
|
||||
let html = '';
|
||||
filteredMonsters.forEach(monster => {
|
||||
html += `<div class="monster-search-item" data-id="${monster.id}">${monster.name}</div>`;
|
||||
});
|
||||
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.');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user