435 lines
17 KiB
JavaScript
435 lines
17 KiB
JavaScript
|
// Liste des monstres du jeu
|
||
|
|
let monsters = [
|
||
|
|
{ id: 1, name: 'Chatacabra', image: 'img/Chatacabra.jpg' },
|
||
|
|
{ id: 2, name: 'Quematrice', image: 'img/Quematrice.jpg' },
|
||
|
|
{ id: 3, name: 'Lala Barina', image: 'img/Lala_Barina.jpg' },
|
||
|
|
{ id: 4, name: 'Congalala', image: 'img/Congalala.jpg' },
|
||
|
|
{ id: 5, name: 'Balahara', image: 'img/Balahara.jpg' },
|
||
|
|
{ id: 6, name: 'Doshaguma', image: 'img/Doshaguma.jpg' },
|
||
|
|
{ id: 7, name: 'Uth Duna', image: 'img/Uth_Duna.jpg' },
|
||
|
|
{ id: 8, name: 'Rompopolo', image: 'img/Rompopolo.jpg' },
|
||
|
|
{ id: 9, name: 'Rey Dau', image: 'img/Rey_Dau.jpg' },
|
||
|
|
{ id: 10, name: 'Nerscylla', image: 'img/Nerscylla.jpg' },
|
||
|
|
{ id: 11, name: 'Hirabami', image: 'img/Hirabami.jpg' },
|
||
|
|
{ id: 12, name: 'Ajarakan', image: 'img/Ajarakan.jpg' },
|
||
|
|
{ id: 13, name: 'Nu Udra', image: 'img/Nu_Udra.jpg' },
|
||
|
|
{ id: 14, name: 'Doshaguma Gardien', image: 'img/Doshaguma_Gardien.jpg' },
|
||
|
|
{ id: 15, name: 'Rathalos Gardien', image: 'img/Rathalos_Gardien.jpg' },
|
||
|
|
{ id: 16, name: 'Jin Dahaad', image: 'img/Jin_Dahaad.jpg' },
|
||
|
|
{ id: 17, name: 'Odogaron Désastre Gardien', image: 'img/Odogaron_Desastre_Gardien.jpg' },
|
||
|
|
{ id: 18, name: 'Xu Wu', image: 'img/Xu_Wu.jpg' },
|
||
|
|
{ id: 19, name: 'Arkveld Gardien', image: 'img/Arkveld_Gardien.jpg' },
|
||
|
|
{ id: 20, name: 'Zoh Shia', image: 'img/Zoh_Shia.jpg' },
|
||
|
|
{ id: 21, name: 'Yian Kut-Ku', image: 'img/Yian_Kut-Ku.jpg' },
|
||
|
|
{ id: 22, name: 'Gypceros', image: 'img/Gypceros.jpg' },
|
||
|
|
{ id: 23, name: 'Rathian', image: 'img/Rathian.jpg' },
|
||
|
|
{ id: 24, name: 'Anjanath Tonnerre Gardien', image: 'img/Anjanath_Tonnerre_Gardien.jpg' },
|
||
|
|
{ id: 25, name: 'Rathalos', image: 'img/Rathalos.jpg' },
|
||
|
|
{ id: 26, name: 'Gravios', image: 'img/Gravios.jpg' },
|
||
|
|
{ id: 27, name: 'Blangonga', image: 'img/Blangonga.jpg' },
|
||
|
|
{ id: 28, name: 'Gore Malaga', image: 'img/Gore_Malaga.jpg' },
|
||
|
|
{ id: 29, name: 'Arkveld', image: 'img/Arkveld.jpg' }
|
||
|
|
];
|
||
|
|
|
||
|
|
let quests = [
|
||
|
|
{ id: 1, monsterId: 1, crownType: 'small', playerName: 'Hunter123', playerId: 'MHW-1234', date: new Date().toISOString() },
|
||
|
|
{ id: 2, monsterId: 1, crownType: 'large', playerName: 'DragonSlayer', playerId: 'MHW-5678', date: new Date().toISOString() },
|
||
|
|
{ id: 3, monsterId: 2, crownType: 'small', playerName: 'ThunderLord', playerId: 'MHW-9012', date: new Date().toISOString() }
|
||
|
|
];
|
||
|
|
|
||
|
|
let announcements = [
|
||
|
|
{ id: 1, text: "Bienvenue sur le site de partage de quêtes à couronnes pour Monster Hunter Wilds!", active: true }
|
||
|
|
];
|
||
|
|
|
||
|
|
// Éléments DOM
|
||
|
|
const monsterListEl = document.getElementById('monsterList');
|
||
|
|
const modalMonsterNameEl = document.getElementById('modalMonsterName');
|
||
|
|
const questListEl = document.getElementById('questList');
|
||
|
|
const addQuestBtn = document.getElementById('addQuestBtn');
|
||
|
|
const monsterSelectEl = document.getElementById('monsterSelect');
|
||
|
|
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();
|
||
|
|
populateMonsterSelect();
|
||
|
|
displayAnnouncements();
|
||
|
|
|
||
|
|
// Événements
|
||
|
|
addQuestBtn.addEventListener('click', () => 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() {
|
||
|
|
// Dans une implémentation réelle, ces données seraient chargées depuis des fichiers JSON ou une API
|
||
|
|
// Par exemple:
|
||
|
|
// fetch('data/monsters.json')
|
||
|
|
// .then(response => response.json())
|
||
|
|
// .then(data => {
|
||
|
|
// monsters = data;
|
||
|
|
// renderMonsterList();
|
||
|
|
// })
|
||
|
|
// .catch(error => console.error('Erreur lors du chargement des monstres:', error));
|
||
|
|
|
||
|
|
// Pour l'instant, nous utilisons les données temporaires définies plus haut
|
||
|
|
}
|
||
|
|
|
||
|
|
function saveData() {
|
||
|
|
// Dans une implémentation réelle, ces données seraient sauvegardées via une API
|
||
|
|
// Pour l'instant, nous les sauvegardons dans localStorage pour la démo
|
||
|
|
localStorage.setItem('mhw_quests', JSON.stringify(quests));
|
||
|
|
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() {
|
||
|
|
if (monsters.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 = monsters.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);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Populer le sélecteur de monstres dans le formulaire d'ajout
|
||
|
|
function populateMonsterSelect() {
|
||
|
|
monsterSelectEl.innerHTML = '<option value="" selected disabled>Sélectionner un monstre</option>';
|
||
|
|
|
||
|
|
monsters.forEach(monster => {
|
||
|
|
const option = document.createElement('option');
|
||
|
|
option.value = monster.id;
|
||
|
|
option.textContent = monster.name;
|
||
|
|
monsterSelectEl.appendChild(option);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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 l'ajout d'une quête
|
||
|
|
function handleAddQuest(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const monsterId = parseInt(monsterSelectEl.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();
|
||
|
|
addQuestModal.hide();
|
||
|
|
|
||
|
|
// Si la modale des quêtes est ouverte, mettre à jour son contenu
|
||
|
|
if (currentMonsterId === monsterId) {
|
||
|
|
renderQuestList(currentMonsterId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Recherche de monstres
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Rendre les monstres filtrés
|
||
|
|
monsterListEl.innerHTML = filteredMonsters.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);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Effacer la recherche
|
||
|
|
function clearSearch() {
|
||
|
|
monsterSearchEl.value = '';
|
||
|
|
renderMonsterList();
|
||
|
|
}
|