pourquoi page next et prev ne font rien bien que l'évènement soir prit en compte ?import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import Utils from "../../services/Utils.js";
import FavoriteManager from "../../services/FavoriteManager.js";

export default class Personnage{

    async render(){
        let request = Utils.parseRequestURL();
        let personnage = await PersonnagesProvider.getPersonnages(request.id);
        return /*html*/`
            <script>
                function testt(){
                    console.log("test");
                }
            </script>
            <section class="section">
                <h1> Nom : ${personnage.nom}</h1>
                <p> Classe : ${personnage.classe} </p>
                <p> Note : ${personnage.note} </p>
                <p id="niveau"> Niveau(x) : ${personnage.niveau} </p>
                <p id="exp"> Expérience(s) : ${personnage.experience} </p>
            </section>
            <button id="add_exp">+ 100 expériences</button><br><br>
            ${
                FavoriteManager.isFavorite(personnage.id) ?  "<button id='remove_favoris'>Supprimer des favoris</button>" : "<button id='add_favoris'>Ajouter en favoris</button>"
            }
            <br><br>
            <div id="note">
                <button id="remove_note">-</button>
                <div id="etoiles"></div>
                <button id="add_note">+</button>
            </div>
            <p><a href="/">Retour</a></p>
        `
    }

    async after_render(){
        let request = Utils.parseRequestURL();
        let personnage = await PersonnagesProvider.getPersonnages(request.id);
        let etoiles = document.querySelector("#etoiles");
        let note = document.querySelector("#note");
        note.style.display = "flex";

        // ajoute les etoiles jaunes 
        for(let i = 0; i < personnage.note; i++){
            etoiles.innerHTML += "<img src='assets/etoile2.png' width='20px' height='20px'/>";
        }

        // ajoute les etoiles noires
        for(let i = 0; i < 5 - personnage.note; i++){
            etoiles.innerHTML += "<img src='assets/etoile1.png' width='20px' height='20px'/>";
        }

        document.querySelector("#add_note").addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            if(personnage.note < 5){
                personnage.note++;
                personnage.update();
            }

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });

        document.querySelector("#remove_note").addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            if(personnage.note > 0){
                personnage.note--;
                personnage.update();
            }

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });


        document.querySelector("#add_exp").addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            personnage.experience += 100;
            personnage.update();

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });

        document.querySelector("#add_favoris")?.addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);

            FavoriteManager.addToFavorites(personnage.id);

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });

        document.querySelector("#remove_favoris")?.addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            FavoriteManager.removeFromFavorites(personnage.id);

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });
    }
}const Utils = { 
    // --------------------------------
    //  Parse a url and break it into resource, id and verb
    // --------------------------------
    parseRequestURL : () => {

        let url = location.hash.slice(1).toLowerCase() || '/';
        let r = url.split("/")
        let request = {
            resource    : null,
            id          : null,
            verb        : null
        }
        request.resource    = r[1]
        request.id          = r[2]
        request.verb        = r[3]

        return request
    }

    // --------------------------------
    //  Simple sleep implementation
    // --------------------------------
    , sleep: (ms) => {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}



export default Utils;import { ENDPOINT  } from "../config.js";
import PersonnageModel from "../models/PersonnageModel.js";

export default class PersonnagesProvider{

  
  static FetchPersonnages = async (limit = 10, page = 1) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    const offset = (page - 1) * limit;
    try {
      const response = await fetch(`${ENDPOINT}/personnages?_limit=${limit}&_start=${offset}`, options)
      const json = await response.json();
      return json
    } catch (err) {
      console.log('Error getting documents', err)
    }
  }
  static searchPersonnages = async (searchTerm) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try {
      const response = await fetch(`${ENDPOINT}/personnages`, options)
      const json = await response.json();
      return json.filter(personnage => personnage.nom.toLowerCase().includes(searchTerm));
    } catch (err) {
      console.log('Error getting documents', err)
    }
  }

  

  static getPersonnages = async (id) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try{
      
      const response = await fetch(`${ENDPOINT}/personnages?id=` + id, options)
      const json = await response.json();
      return new PersonnageModel(json[0].id, json[0].nom, json[0].classe, json[0].niveau, json[0].note, json[0].experience, json[0].statistiques);

    }catch (err){
      console.log('Error getting documents', err)
    }
  }

  static updatePersonnage = async(personnage) => {
    const options = {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "id": personnage.id,
        "nom": personnage.nom,
        "classe": personnage.classe,
        "niveau": personnage.niveau,
        "note": personnage.note,
        "experience": personnage.experience,
        "statistiques": personnage.statistiques
      })
    };

    try{
      const response = await fetch(`${ENDPOINT}/personnages/` + personnage.id, options)
      const json = await response.json();

      return new PersonnageModel(json.id, json.nom, json.classe, json.niveau, json.note, json.experience, json.statistiques);

    }catch(err){
      console.log('Error getting documents', err)
    }
  }  
  static async getFavoritePersonnages() {
    let allPersonnages = await this.FetchPersonnages();
    let favorites = FavoriteManager.getFavorites();
    return allPersonnages.filter(personnage => favorites.includes(personnage.id));
  }
}<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solo Leveling</title>
    <script type="module" src="/js/app.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <body>
        <main>
            <div class="container">
                <div id="content"></div>
            </div>
        </main>
    </body>
</html>