liste des monstres et des quêtes dans un fichier dédié

admin.html

@@ -236,6 +236,9 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Charger data.js avant admin.js -->
+    <script src="js/data.js"></script>
+    <script src="js/main.js"></script>
     <script src="js/admin.js"></script>
 </body>
 </html>

index.html

@@ -229,6 +229,8 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Charger data.js avant main.js -->
+    <script src="js/data.js"></script>
     <script src="js/main.js"></script>
 </body>
 </html>

js/admin.js

@@ -122,67 +122,38 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // 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
+    // Vérifier si les données de jeu sont disponibles depuis data.js
-    // Pour l'instant, nous utilisons des données temporaires
+    if (window.gameData) {
-    
+        // Charger les monstres depuis les données du jeu
-    monsters = [
+        monsters = [...window.gameData.monsters];
-        { id: 1, name: 'Chatacabra', image: 'img/Chatacabra.jpg' },
+        
-        { id: 2, name: 'Quematrice', image: 'img/Quematrice.jpg' },
+        // Charger les quêtes depuis localStorage ou utiliser les données par défaut
-        { id: 3, name: 'Lala Barina', image: 'img/Lala_Barina.jpg' },
+        const storedQuests = localStorage.getItem('mhw_quests');
-        { id: 4, name: 'Congalala', image: 'img/Congalala.jpg' },
+        quests = storedQuests ? JSON.parse(storedQuests) : [...window.gameData.initialQuests];
-        { id: 5, name: 'Balahara', image: 'img/Balahara.jpg' },
+        
-        { id: 6, name: 'Doshaguma', image: 'img/Doshaguma.jpg' },
+        // Charger les annonces depuis localStorage ou utiliser les données par défaut
-        { id: 7, name: 'Uth Duna', image: 'img/Uth_Duna.jpg' },
+        const storedAnnouncements = localStorage.getItem('mhw_announcements');
-        { id: 8, name: 'Rompopolo', image: 'img/Rompopolo.jpg' },
+        announcements = storedAnnouncements ? JSON.parse(storedAnnouncements) : [...window.gameData.initialAnnouncements];
-        { id: 9, name: 'Rey Dau', image: 'img/Rey_Dau.jpg' },
+    } else {
-        { id: 10, name: 'Nerscylla', image: 'img/Nerscylla.jpg' },
+        // Fallback au cas où data.js n'est pas chargé
-        { id: 11, name: 'Hirabami', image: 'img/Hirabami.jpg' },
+        console.warn("Données de jeu non disponibles. Utilisation des données locales de secours.");
-        { id: 12, name: 'Ajarakan', image: 'img/Ajarakan.jpg' },
+        monsters = [];
-        { id: 13, name: 'Nu Udra', image: 'img/Nu_Udra.jpg' },
+        // Essayer de charger depuis localStorage
-        { id: 14, name: 'Doshaguma Gardien', image: 'img/Doshaguma_Gardien.jpg' },
+        const storedMonsters = localStorage.getItem('mhw_monsters');
-        { id: 15, name: 'Rathalos Gardien', image: 'img/Rathalos_Gardien.jpg' },
+        const storedQuests = localStorage.getItem('mhw_quests');
-        { id: 16, name: 'Jin Dahaad', image: 'img/Jin_Dahaad.jpg' },
+        const storedAnnouncements = localStorage.getItem('mhw_announcements');
-        { id: 17, name: 'Odogaron Désastre Gardien', image: 'img/Odogaron_Desastre_Gardien.jpg' },
+        
-        { id: 18, name: 'Xu Wu', image: 'img/Xu_Wu.jpg' },
+        if (storedMonsters) monsters = JSON.parse(storedMonsters);
-        { id: 19, name: 'Arkveld Gardien', image: 'img/Arkveld_Gardien.jpg' },
+        if (storedQuests) quests = JSON.parse(storedQuests);
-        { id: 20, name: 'Zoh Shia', image: 'img/Zoh_Shia.jpg' },
+        if (storedAnnouncements) announcements = JSON.parse(storedAnnouncements);
-        { 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' }
-    ];
-    
-    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() }
-    ];
-    
-    announcements = [
-        { id: 1, text: "Bienvenue sur le site de partage de quêtes à couronnes pour Monster Hunter Wilds!", active: true },
-        { id: 2, text: "De nouveaux monstres ont été ajoutés, consultez la liste!", active: false }
-    ];
-    
-    // Essayer de charger depuis localStorage s'il y a des données
-    const storedMonsters = localStorage.getItem('mhw_monsters');
-    const storedQuests = localStorage.getItem('mhw_quests');
-    const storedAnnouncements = localStorage.getItem('mhw_announcements');
-    
-    if (storedMonsters) monsters = JSON.parse(storedMonsters);
-    if (storedQuests) quests = JSON.parse(storedQuests);
-    if (storedAnnouncements) announcements = JSON.parse(storedAnnouncements);
     
     renderAnnouncementsList();
     renderMonstersList();
 }
 
 function saveData() {
-    // Dans une implémentation réelle, ces données seraient sauvegardées via une API
+    // Sauvegarder dans le localStorage
     localStorage.setItem('mhw_monsters', JSON.stringify(monsters));
     localStorage.setItem('mhw_quests', JSON.stringify(quests));
     localStorage.setItem('mhw_announcements', JSON.stringify(announcements));

js/data.js

@@ -0,0 +1,52 @@
+/**
+ * Fichier de données pour l'application MH Wilds - Quêtes à Couronnes
+ * Contient la liste des monstres du jeu
+ */
+
+// Créer l'objet de données global
+window.gameData = {
+    // Liste des monstres du jeu
+    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' }
+    ],
+
+    // Données initiales pour les quêtes (à titre d'exemple)
+    initialQuests: [
+        { 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() }
+    ],
+
+    // Données initiales pour les annonces
+    initialAnnouncements: [
+        { id: 1, text: "Bienvenue sur le site de partage de quêtes à couronnes pour Monster Hunter Wilds !", active: true }
+    ]
+};

js/main.js

@@ -1,45 +1,7 @@
-// Liste des monstres du jeu
+// Variables globales pour les données
-let monsters = [
+let monsters = [];
-    { id: 1, name: 'Chatacabra', image: 'img/Chatacabra.jpg' },
+let quests = [];
-    { id: 2, name: 'Quematrice', image: 'img/Quematrice.jpg' },
+let announcements = [];
-    { 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');
@@ -66,7 +28,7 @@ const deleteQuestModal = new bootstrap.Modal(document.getElementById('deleteQues
 document.addEventListener('DOMContentLoaded', () => {
     loadData();
     renderMonsterList();
-    setupMonsterSearchSelect();
+    initMonsterSearchSelect();
     displayAnnouncements();
     
     // Événements
@@ -83,23 +45,37 @@ document.addEventListener('DOMContentLoaded', () => {
     // Événements pour la recherche
     monsterSearchEl.addEventListener('input', searchMonsters);
     clearSearchBtn.addEventListener('click', clearSearch);
-
-    // Initialiser le sélecteur de monstre avec recherche
-    initMonsterSearchSelect();
 });
 
 // Fonctions de chargement et sauvegarde des données
 function loadData() {
-    // Essayer de charger depuis localStorage s'il y a des données
+    // Vérifier si les données de jeu sont disponibles depuis data.js
-    const storedQuests = localStorage.getItem('mhw_quests');
+    if (window.gameData) {
-    const storedAnnouncements = localStorage.getItem('mhw_announcements');
+        // Copier les monstres depuis gameData
-    
+        monsters = [...window.gameData.monsters];
-    if (storedQuests) quests = JSON.parse(storedQuests);
+        
-    if (storedAnnouncements) announcements = JSON.parse(storedAnnouncements);
+        // 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');
 }
 
@@ -325,85 +301,6 @@ function handleDeleteQuest() {
     currentQuestToDelete = null;
 }
 
-// Préparer le HTML pour le sélecteur de monstre avec recherche
-function setupMonsterSearchSelect() {
-    // Récupérer le conteneur du formulaire
-    const monsterFieldContainer = document.querySelector('.mb-3:has(#monsterSelect)');
-    
-    if (!monsterFieldContainer) return;
-    
-    // Remplacer le contenu par notre nouveau sélecteur
-    monsterFieldContainer.innerHTML = `
-        <label for="monsterSearchSelect" class="form-label">Monstre</label>
-        <div class="monster-search-container">
-            <div class="input-group">
-                <span class="input-group-text"><i class="bi bi-search">🔍</i></span>
-                <input type="text" class="form-control" id="monsterSearchSelect" 
-                       placeholder="Rechercher et sélectionner un monstre..." autocomplete="off">
-                <input type="hidden" id="selectedMonsterId" name="selectedMonsterId" required>
-            </div>
-            <div class="monster-search-results d-none" id="monsterSearchResults">
-                <!-- Les résultats seront générés dynamiquement ici -->
-            </div>
-        </div>
-        <div class="invalid-feedback">Veuillez sélectionner un monstre</div>
-    `;
-    
-    // Ajouter les styles CSS nécessaires s'ils n'existent pas déjà
-    if (!document.getElementById('monster-search-styles')) {
-        const styleEl = document.createElement('style');
-        styleEl.id = 'monster-search-styles';
-        styleEl.textContent = `
-            /* Styles pour le select searchable personnalisé */
-            .monster-search-container {
-                position: relative;
-            }
-            
-            .monster-search-results {
-                position: absolute;
-                width: 100%;
-                max-height: 250px;
-                overflow-y: auto;
-                background-color: var(--mh-light-bg);
-                border: 1px solid var(--mh-accent);
-                border-radius: 0.375rem;
-                z-index: 1050;
-                margin-top: 2px;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-            }
-            
-            .monster-search-item {
-                padding: 8px 12px;
-                cursor: pointer;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                color: var(--mh-light);
-            }
-            
-            .monster-search-item:hover,
-            .monster-search-item.active {
-                background-color: var(--mh-dark);
-            }
-            
-            .monster-search-item:last-child {
-                border-bottom: none;
-            }
-            
-            .selected-monster {
-                font-weight: bold;
-                color: var(--mh-accent);
-            }
-            
-            .monster-search-no-results {
-                padding: 10px;
-                text-align: center;
-                color: var(--mh-light);
-                font-style: italic;
-            }
-        `;
-        document.head.appendChild(styleEl);
-    }
-}
-
 // Initialiser le sélecteur de monstre avec recherche
 function initMonsterSearchSelect() {
     const searchInput = document.getElementById('monsterSearchSelect');