Booster

LES RARETÉS

Chaque rareté a un poids : plus il est grand, plus elle sort souvent.

const RARETES = [
  { nom: 'Commune', poids: 70 },
  { nom: 'Peu commune', poids: 22 },
  { nom: 'Rare', poids: 7 },
  { nom: 'Secrète', poids: 1 }
];

LE TIRAGE PONDÉRÉ

On tire un nombre entre 0 et la somme des poids, puis on avance jusqu'à la rareté qui le contient.

function tirerRarete() {
  const total = RARETES.reduce((s, r) => s + r.poids, 0);
  let n = Math.random() * total;
  for (const r of RARETES) {
    if (n < r.poids) return r;
    n -= r.poids;
  }
}

LE BOOSTER

Dix cartes, avec au moins une rare garantie en dernière position, comme dans les vrais boosters.

function ouvrir() {
  const cartes = Array.from({ length: 9 }, tirerRarete);
  const derniere = tirerRarete();
  cartes.push(derniere.poids <= 7 ? derniere : RARETES[2]);
  return cartes;
}

LE HTML

<button id="ouvrir">Ouvrir un booster</button>
<ol id="cartes"></ol>

RÉVÉLER UNE À UNE

Chaque carte arrive face cachée. Un clic la retourne.

document.getElementById('ouvrir').addEventListener('click', () => {
  const ol = document.getElementById('cartes');
  ol.innerHTML = '';
  ouvrir().forEach(r => {
    const li = document.createElement('li');
    li.innerHTML = '<button>Retourner</button>';
    li.dataset.rarete = r.nom;
    ol.append(li);
  });
});
document.getElementById('cartes').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (!li || li.classList.contains('vue')) return;
  li.classList.add('vue');
  li.textContent = li.dataset.rarete;
});