bibliogame/public/assets/js/app.js

document.addEventListener("DOMContentLoaded", () =>
{
    const boutonRecherche = document.getElementById("btnRechercheApi");
    const champRecherche = document.getElementById("rechercheApi");
    const zoneResultats = document.getElementById("resultatsApi");
    const formAppliquer = document.getElementById("formAppliquerApi");
    const champRawgId = document.getElementById("rawgId");
    const formJeu = document.getElementById("formJeu");

    if (!boutonRecherche || !champRecherche || !zoneResultats)
    {
        return;
    }

    const collecterChampsFormulaire = () =>
    {
        if (!formJeu || !formAppliquer)
        {
            return;
        }

        formAppliquer.querySelectorAll("[data-from-form]").forEach((element) =>
        {
            element.remove();
        });

        const noms = [
            "titre",
            "description",
            "dateSortie",
            "genres",
            "editeur",
            "developpeur",
            "jaquette",
            "consoleId",
            "etat",
            "notes",
            "sourceEnrichissement"
        ];

        noms.forEach((nom) =>
        {
            const champ = formJeu.elements.namedItem(nom);

            if (!champ || typeof champ.value !== "string")
            {
                return;
            }

            const cache = document.createElement("input");
            cache.type = "hidden";
            cache.name = nom;
            cache.value = champ.value;
            cache.setAttribute("data-from-form", "1");
            formAppliquer.appendChild(cache);
        });

        const formats = formJeu.querySelectorAll('input[name="formats[]"]:checked');

        formats.forEach((caseCochee) =>
        {
            const cache = document.createElement("input");
            cache.type = "hidden";
            cache.name = "formats[]";
            cache.value = caseCochee.value;
            cache.setAttribute("data-from-form", "1");
            formAppliquer.appendChild(cache);
        });
    };

    const lancerRecherche = async () =>
    {
        const terme = champRecherche.value.trim();

        if (terme === "")
        {
            zoneResultats.hidden = true;
            zoneResultats.innerHTML = "";
            return;
        }

        boutonRecherche.disabled = true;
        boutonRecherche.textContent = "Recherche…";

        try
        {
            const reponse = await fetch("/jeux/api/rechercher?q=" + encodeURIComponent(terme));
            const donnees = await reponse.json();
            afficherResultats(donnees.resultats || []);
        }
        catch (erreur)
        {
            zoneResultats.hidden = false;
            zoneResultats.innerHTML = "<p class=\"text-muted\">Impossible de contacter l'API pour le moment.</p>";
        }
        finally
        {
            boutonRecherche.disabled = false;
            boutonRecherche.textContent = "Rechercher";
        }
    };

    const afficherResultats = (resultats) =>
    {
        zoneResultats.hidden = false;

        if (resultats.length === 0)
        {
            zoneResultats.innerHTML = "<p class=\"text-muted\">Aucun résultat trouvé.</p>";
            return;
        }

        zoneResultats.innerHTML = "";

        resultats.forEach((jeu) =>
        {
            const carte = document.createElement("article");
            carte.className = "api-result";

            const image = document.createElement("img");
            image.src = jeu.jaquetteUrl || "/assets/img/jaquette-manquante.svg";
            image.alt = "Jaquette de " + (jeu.titre || "jeu");

            const infos = document.createElement("div");
            const titre = document.createElement("h3");
            titre.textContent = jeu.titre || "Sans titre";
            const meta = document.createElement("p");
            const genres = (jeu.genres || []).join(", ");
            meta.textContent = [jeu.dateSortie || "Date inconnue", genres].filter(Boolean).join(" · ");
            infos.appendChild(titre);
            infos.appendChild(meta);

            const bouton = document.createElement("button");
            bouton.type = "button";
            bouton.className = "btn btn-sm btn-neon";
            bouton.textContent = "Utiliser";
            bouton.addEventListener("click", () =>
            {
                if (!formAppliquer || !champRawgId)
                {
                    return;
                }

                collecterChampsFormulaire();
                champRawgId.value = String(jeu.rawgId);
                formAppliquer.submit();
            });

            carte.appendChild(image);
            carte.appendChild(infos);
            carte.appendChild(bouton);
            zoneResultats.appendChild(carte);
        });
    };

    boutonRecherche.addEventListener("click", lancerRecherche);

    champRecherche.addEventListener("keydown", (event) =>
    {
        if (event.key === "Enter")
        {
            event.preventDefault();
            lancerRecherche();
        }
    });
});