Tableau de score

L'ÉTAT

Un tableau d'objets : chaque joueur porte son nom et son score.

const joueurs = [
  { nom: 'Rouge', score: 0 },
  { nom: 'Bleu', score: 0 },
];

LE MENEUR

S'il y a plusieurs joueurs au même score maximum, personne ne mène.

function meneur() {
  const max = Math.max(...joueurs.map(j => j.score));
  const enTete = joueurs.filter(j => j.score === max);
  return enTete.length === 1 && max > 0 ? enTete[0] : null;
}

DESSINER

On reconstruit la grille à partir des données, à chaque changement.

function rendre() {
  const tete = meneur();
  const grille = document.getElementById('grille');
  grille.innerHTML = '';
  joueurs.forEach((j, i) => {
    const carte = document.createElement('div');
    carte.className = 'joueur' + (j === tete ? ' tete' : '');
    carte.innerHTML = '<input aria-label="Nom"><b></b><button data-d="-1">−</button><button data-d="1">+</button>';
    carte.querySelector('input').value = j.nom;      // value et textContent : pas d'injection de HTML
    carte.querySelector('b').textContent = j.score;
    carte.dataset.i = i;
    grille.appendChild(carte);
  });
}

UN SEUL ÉCOUTEUR

document.getElementById('grille').addEventListener('click', e => {
  const b = e.target.closest('[data-d]');
  if (!b) return;
  const j = joueurs[b.closest('.joueur').dataset.i];
  j.score = Math.max(0, j.score + Number(b.dataset.d));
  rendre();
});

AJOUTER UN JOUEUR

document.getElementById('ajout').addEventListener('click', () => {
  joueurs.push({ nom: 'Joueur ' + (joueurs.length + 1), score: 0 });
  rendre();
});