Tableau html pour TAROT

Catherine67172782
Les bases HTML/CSS
Javascript

Je cherche à faire marcher mon générateur de score de tarot.

J'ai mis ci-dessous 1. Ma page d'accueil 2. Ma page de calcule de score 

 <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélection des joueurs</title>
    <link rel="stylesheet" href="styles.css">

<style>

    body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Oudlers1910.PNG');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.30; /* Ajustez cette valeur selon votre préférence (0.0 - 1.0) */
    z-index: -1;
}
h1 {
    text-align: center;
}

label, select, input {
    display: block;
    margin-bottom: 10px;
}

button {
    display: block;
    margin: 20px auto;
}

#scoreTable {
    margin-top: 50px;
}

.joueur1 {
    background-color: lightgreen;
}

.joueur2 {
    background-color: lightblue;
}

.joueur3 {
    background-color: lightcoral;
}
label, select, input {
        display: block;
        margin-bottom: 10px;
        margin-left: 20px;
        color: white;
        font-size: 1.2em; /* Augmente la taille de la police des éléments */
    }

    button#commencerPartie {
        display: block;
        border-radius: 10px;
        margin: 20px auto;
        font-size: 1.5em; /* Augmente la taille du bouton */
        background-color: #0D8E14; /* Couleur de fond verte */
        color: white; /* Couleur de texte blanche */
        border: none; /* Supprime la bordure */
        padding: 10px 20px; /* Ajoute du remplissage pour le bouton */
        cursor: pointer;
    }

    #nombreJoueurs {
        font-size: 1.2em; /* Augmente la taille de la police du sélecteur */
        color: white;
    }
    #joueursEncadre {
    border: 2px solid white; /* Bordure de l'encadré grise */
    border-radius: 10px; /* Bords arrondis */
    padding: 10px;
    margin: 20px auto; /* Centre l'encadré horizontalement et ajoute de la marge en haut et en bas */
    width: 300px; /* Largeur fixe */
    background-color: #0D8E14; /* Couleur de fond grise */
    font-family: Arial, sans-serif;
}

#joueursForm input {
    color: black; /* Met le texte en noir */
    border-radius: 20px; /* Bords arrondis */
    padding-left: 3%;
}
h1 {
        margin-top: 40px;
        text-decoration: underline
    }

</style>
</head>
<body>
    <h1>Choix des joueurs</h1>
    <div id="joueursEncadre">
        <label for="nombreJoueurs">Nombre de joueurs :</label>
        <select id="nombreJoueurs" style="color: black;">
            <option value="2">2 joueurs</option>
            <option value="3">3 joueurs</option>
            <option value="4">4 joueurs</option>
            <option value="5">5 joueurs</option>
        </select>
        <form id="joueursForm">
            <!-- Les noms des joueurs seront ajoutés dynamiquement ici -->
        </form>
    </div>
    <br>
    <a href="nouvelle_page.html"><button id="commencerPartie">Commencer la partie !!</button></a>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const nombreJoueursSelect = document.getElementById("nombreJoueurs");
        const joueursForm = document.getElementById("joueursForm");
        const commencerPartieButton = document.getElementById("commencerPartie");

        nombreJoueursSelect.addEventListener("change", function() {
            const nombreJoueurs = parseInt(nombreJoueursSelect.value);
            joueursForm.innerHTML = ""; // Clear form

            for (let i = 1; i <= nombreJoueurs; i++) {
    const label = document.createElement("label");
    label.setAttribute("for", "joueur" + i); // Corrected line
    label.textContent = "Joueur " + i + " :";

    const input = document.createElement("input");
    input.type = "text";
    input.name = "joueur" + i;
    input.id = "joueur" + i;

    joueursForm.appendChild(label);
    joueursForm.appendChild(input);
}

        });

        commencerPartieButton.addEventListener("click", function() {
    // Récupérer le nombre de joueurs sélectionné
    const nombreJoueurs = parseInt(nombreJoueursSelect.value);

    // Récupérer les noms des joueurs depuis les champs de saisie
    const joueurs = [];
    for (let i = 1; i <= nombreJoueurs; i++) {
        joueurs.push(document.getElementById("joueur" + i).value);
    }

    // Stocker les noms des joueurs dans sessionStorage
    sessionStorage.setItem("joueurs", JSON.stringify(joueurs));

    // Rediriger vers la page de calcul du score
    window.location.href = "nouvelle_page.html";
});

    });

    </script>
</body>
</html>

Page de calcul de score: 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Calcul du score de tarot</title>
    <link rel="stylesheet" href="styles.css">
    <style>

    #options {
        margin-top: 20px;
        margin-left: 13px;
        padding: 20px;
        border-radius: 15px;
        background-color: #f5f5f5;
        width: 220px;
        display: inline-block;
        vertical-align: top;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 2px solid #ccc;
        position: absolute;
        z-index: 2;
    }

    body::before {
        content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Oudlers1910.PNG');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.30; /* Ajustez cette valeur selon votre préférence (0.0 - 1.0) */
    z-index: -1; /* Définit la profondeur de l'image de fond */ /* Ajustez cette valeur selon votre préférence (0.0 - 1.0) */

}

    #options label {
        display: block;
        margin-bottom: 10px;
        color: #333;
        font-weight: bold;
        font-family:Arial, sans-serif
    }

    #options select {
        display: block;
        margin-bottom: 10px;
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
    }

    #options select:hover {
        border-color: #aaa;
    }

    #options button {
        display: block;
        margin: 20px auto;
        border-radius: 10px;
        font-size: 1.2em;
        background-color: #0D8E14;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

    #options button:hover {
        background-color: #0a6b0d;
    }

    #calculerScore {
        background-color: #149419;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-top: 370px;
        margin-left: 22px;
        cursor: pointer;
        border-radius: 10px;
        box-shadow: 0 4px #999;
        z-index: 4;
        float:left;

    }

    #calculerScore:hover {
        background-color: #45a049;

    top: 370px;
    left: 22px;
    z-index: 2;
    }

    h1 {
        text-align: center;
        margin-top: 20px;
        text-decoration: underline
    }

    #tableauScores {
        float: right;
        margin-top: 20px;
        margin-right: 70px;
        width: 70%; /* Le tableau prendra 70% de la largeur de la page */
        margin-top: 83px;
        margin-right: 20px;
        position: absolute;
        top: 20px;
        right: 70px;
        z-index: 3; /* Définit la profondeur de l'élément au-dessus de l'image de fond */
        width: 70%; /* Le tableau prendra 70% de la largeur de la page */
}

    #tableauScores table {
        width: 100%;
        border-collapse: collapse;
    }

    #tableauScores th,
#tableauScores td {
    border: 1px solid black;
    padding: 25px; /* Augmenter la valeur du padding pour agrandir les cellules */
    text-align: center;
    background-color: rgba(255, 255, 255, 1);

}
    #tableauScores th {
        background-color: #f2f2f2;
    }

    </style>
</head>
<body>
    <h1>Calcul du score de tarot</h1>
    <div id="options">

        <label for="joueurPrend">Joueur qui prend :</label>
        <select id="joueurPrend"></select>

        <label for="joueurAppele">Joueur appelé :</label>
        <select id="joueurAppele"></select>

        <label for="contrat">Contrat :</label>
        <select id="contrat">
            <option value="Petit">Petite (10)</option>
            <option value="Garde">Garde (40)</option>
            <option value="Garde Sans">Garde sans (80)</option>
            <option value="Garde Contre">Garde contre (160)</option>
        </select>

        <label for="nombreBouts">Nombre de bouts :</label>
        <select id="nombreBouts">
            <option value="0">0 bouts</option>
            <option value="1">1 bout</option>
            <option value="2">2 bouts</option>
            <option value="2">3 bouts</option>
        </select>

        <label for="nombrePoints">Nombre de points :</label>
        <select id="nombrePoints"></select>

    </div>

    <button id="calculerScore">Calculer le score</button>

    <div id="scoreTable">
        <!-- Le tableau des scores sera affiché ici -->
    </div>

    <div id="tableauScores">
        <table>
            <thead>
                <tr id="nomsJoueurs">
                    <!-- Les noms des joueurs seront ajoutés dynamiquement ici -->
                </tr>
            </thead>
            <tbody>
                <!-- 10 rangées pour les calculs de score -->
                <!-- Chaque rangée représente un joueur -->
                <tr class="joueurCalcul" data-joueur="Joueur 1">
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>

                </tr>
                <tr class="joueurCalcul" data-joueur="Joueur 2"></tr>
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul" data-joueur="Joueur 3"></tr>
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul" data-joueur="Joueur 4"></tr>
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul" data-joueur="Joueur 5"></tr>
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul">
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>

                </tr>
                <tr class="joueurCalcul">
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul">
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul">
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>
                <tr class="joueurCalcul">
                    <td class="calcul1"></td>
                    <td class="calcul2"></td>
                    <td class="calcul3"></td>
                    <td class="calcul4"></td>
                    <td class="calcul4"></td>
                </tr>

                <!-- Ajoutez les rangées pour les autres joueurs -->
            </tbody>
        </table>
    </div>

    <script>

function calculerScore(joueurPrend, joueurAppele, contrat, nombreBouts, nombrePoints, nombreJoueurs) {
    let score = 0;

    // Calcul du score en fonction du contrat
    switch (contrat) {
        case "Petit":
            if (nombrePoints >= 56 - nombreBouts * 5) {
                score += 25; // Score de base pour le contrat "Petit"
                const surplus = nombrePoints - (56 - nombreBouts * 5);
                if (surplus >= 5) {
                    score += Math.ceil(surplus / 10) * (nombreJoueurs - 1);
                }
            } else {
                score -= (56 - nombreBouts * 5 - nombrePoints) * (nombreJoueurs - 1);
            }
            break;
        case "Garde":
            if (nombrePoints >= 36 + nombreBouts * 25) {
                score += 40; // Score de base pour le contrat "Garde"
                const surplus = nombrePoints - (36 + nombreBouts * 25);
                if (surplus >= 25) {
                    score += Math.floor(surplus / 25) * 10;
                }
            } else {
                score -= (36 + nombreBouts * 25 - nombrePoints);
            }
            break;
        case "Garde Sans":
            if (nombrePoints >= 56 + nombreBouts * 25) {
                score += 80; // Score de base pour le contrat "Garde Sans"
                const surplus = nombrePoints - (56 + nombreBouts * 25);
                if (surplus >= 25) {
                    score += Math.floor(surplus / 25) * 10;
                }
            } else {
                score -= (56 + nombreBouts * 25 - nombrePoints);
            }
            break;
        case "Garde Contre":
            if (nombrePoints >= 56 + nombreBouts * 25) {
                score += 160; // Score de base pour le contrat "Garde Contre"
                const surplus = nombrePoints - (56 + nombreBouts * 25);
                if (surplus >= 25) {
                    score += Math.floor(surplus / 25) * 20;
                }
            } else {
                score -= (56 + nombreBouts * 25 - nombrePoints);
            }
            break;
        default:
            // Contrat invalide
            console.error("Contrat invalide !");
    }

    return score;
}

        const joueurs = JSON.parse(sessionStorage.getItem("joueurs"));

// Sélectionner l'élément tr pour les noms des joueurs
const nomsJoueursRow = document.getElementById("nomsJoueurs");

// Ajouter une cellule th pour chaque joueur
joueurs.forEach(function(nomJoueur) {
    const cell = document.createElement("th");
    cell.textContent = nomJoueur;
    nomsJoueursRow.appendChild(cell);
});
    document.addEventListener("DOMContentLoaded", function() {
        const joueurs = JSON.parse(sessionStorage.getItem("joueurs"));

        const joueurPrendSelect = document.getElementById("joueurPrend");
        const joueurAppeleSelect = document.getElementById("joueurAppele");
        const nombrePointsSelect = document.getElementById("nombrePoints");

        joueurs.forEach(function(nomJoueur) {
            const optionPrend = document.createElement("option");
            optionPrend.value = nomJoueur;
            optionPrend.textContent = nomJoueur;
            joueurPrendSelect.appendChild(optionPrend);

            const optionAppele = document.createElement("option");
            optionAppele.value = nomJoueur;
            optionAppele.textContent = nomJoueur;
            joueurAppeleSelect.appendChild(optionAppele);
        });

        // Clear existing options
        nombrePointsSelect.innerHTML = '';

        // Add options from 0 to 91
        for (let i = 0; i <= 91; i++) {
            const option = document.createElement("option");
            option.value = i;
            option.textContent = i + " points";
            nombrePointsSelect.appendChild(option);
        }
        let nombreCalculs = 0;

// Ajouter un écouteur d'événements pour le clic sur le bouton
const calculerScoreButton = document.getElementById("calculerScore");
    calculerScoreButton.addEventListener("click", function() {
        // Récupérer les valeurs des options sélectionnées
        const joueurPrend = document.getElementById("joueurPrend").value;
        const joueurAppele = document.getElementById("joueurAppele").value;
        const contrat = document.getElementById("contrat").value;
        const nombreBouts = parseInt(document.getElementById("nombreBouts").value);
        const nombrePoints = parseInt(document.getElementById("nombrePoints").value);
        const nombreJoueurs = JSON.parse(sessionStorage.getItem("joueurs")).length;

        // Appeler la fonction calculerScore avec les valeurs récupérées
        const score = calculerScore(joueurPrend, joueurAppele, contrat, nombreBouts, nombrePoints, nombreJoueurs);

        // Mettre à jour le tableau des scores avec le score calculé
        const joueurCalculRow = document.querySelector(`.joueurCalcul[data-joueur="${joueurPrend}"]`);
const cellulesCalcul = joueurCalculRow.querySelectorAll(".calcul1, .calcul2, .calcul3, .calcul4, .calcul5");

        // Déterminer la rangée à mettre à jour en fonction du nombre de calculs effectués
        const rowToUpdate = nombreCalculs % nombreJoueurs;

        // Ajouter le score à la cellule correspondante
        const celluleScore = cellulesCalcul[rowToUpdate];
        celluleScore.textContent = parseInt(celluleScore.textContent || 0) + score;

        // Incrémenter le nombre de calculs effectués
        nombreCalculs++;

    });

    });

    </script>

</body>
</html>

Ce que je veux

Bonjour, j'ai fait un code permettant de calculer ses points au tarot. Le problème est que je n'arrive pas calculer les points et faire rentrer le score dans les cellules de mon tableau.

Ce que j'obtiens

Quand je le fais marcher, quand jappuie sur le bouton calculer le score, rien ne se passe dans le tableau, alors que j'ai selectionné toutes les options

1 réponse

pierropierro

Hello,
Attention à ton html sur ta page de calcul, dans le tableau les 5 premières lignes sont mal fermées et tu repetes la class calcul4 sur toutes les lignes ce qui posera problème sur 

const cellulesCalcul = joueurCalculRow.querySelectorAll(".calcul1, .calcul2, .calcul3, .calcul4, .calcul5");

Niveau Js je suis pas spécialiste du tout mais tu fais

const joueurCalculRow = document.querySelector(`.joueurCalcul[data-joueur="${joueurPrend}"]`);

qui te renvoi Null puisqu'il ne peut pas trouver l'element dans le DOM.

Bon courage