Le Générateur d'équipe

const design = {
  nom: "Zeb 1",
  couleurIndex: 0,   // position dans COULEURS (0 = la 1re)
  eyes: 2,
  horns: false,
  fangs: true,
};
console.log(design);

const c = COULEURS[design.couleurIndex];
animerMonstre(document.querySelector("#essai"),
  { body: c.body, shade: c.shade, light: c.light, mouth: c.shade,
    eyes: design.eyes, horns: design.horns, fangs: design.fangs }, 6);

console.log(Math.floor(Math.random() * 6));   // un entier de 0 à 5

let compteur = 0;   // en haut de main.js

const designAleatoire = () => ({
  nom: "Zeb " + (++compteur),
  couleurIndex: Math.floor(Math.random() * COULEURS.length),
  eyes: 1 + Math.floor(Math.random() * 3),   // 1, 2 ou 3
  horns: Math.random() < 0.5,                // vrai 1 fois sur 2
  fangs: Math.random() < 0.6,
});
console.log(designAleatoire());

const statsDuDesign = (m) => {
  const attaque = 2 + m.eyes + (m.fangs ? 3 : 0) + (m.horns ? 2 : 0);
  const pv = 24 + m.eyes * 4 + (m.horns ? 10 : 0);
  return { attaque, pv, pvMax: pv };
};

console.log(statsDuDesign({ eyes: 3, horns: true, fangs: true }));

const monstreAleatoire = () => {
  const design = designAleatoire();
  return { ...design, ...statsDuDesign(design) };
};

console.log(monstreAleatoire());

const equipeEl = document.querySelector("#equipe");
const PV_MAX = 50, ATT_MAX = 12;   // pour calibrer la largeur des barres

const carte = (m) => {
  const c = COULEURS[m.couleurIndex];
  const traits = [m.eyes + (m.eyes > 1 ? " yeux" : " oeil"),
                  m.horns ? "cornes" : null,
                  m.fangs ? "crocs" : null].filter(Boolean).join(" · ");

  const div = document.createElement("div");
  div.className = "unit";
  div.innerHTML =
    '<canvas></canvas>' +
    '<div class="nom">' + m.nom + '</div>' +
    '<div class="stat"><span class="lab">PV</span><div class="track"><div class="fill pv" style="width:' + (m.pv/PV_MAX*100) + '%"></div></div><span class="val">' + m.pv + '</span></div>' +
    '<div class="stat"><span class="lab">ATT</span><div class="track"><div class="fill att" style="width:' + (m.attaque/ATT_MAX*100) + '%"></div></div><span class="val">' + m.attaque + '</span></div>' +
    '<div class="traits">' + traits + '</div>';

  equipeEl.appendChild(div);
  animerMonstre(div.querySelector("canvas"),
    { body:c.body, shade:c.shade, light:c.light, mouth:c.shade,
      eyes:m.eyes, horns:m.horns, fangs:m.fangs }, 5);
};

let equipe = [];

const afficher = () => {
  equipeEl.innerHTML = "";        // on vide
  equipe.forEach(carte);         // une carte par monstre
};

document.querySelector("#btnGen").addEventListener("click", () => {
  compteur = 0;
  equipe = [1, 2, 3, 4].map(() => monstreAleatoire());   // 4 monstres
  afficher();
});

document.querySelector("#btnAdd").addEventListener("click", () => {
  equipe.push(monstreAleatoire());
  afficher();
});

const resumeEl = document.querySelector("#resume");

// à la fin de afficher() :
  const totalPv = equipe.reduce((s, m) => s + m.pv, 0);
  const totalAtt = equipe.reduce((s, m) => s + m.attaque, 0);
  const moyAtt = equipe.length ? (totalAtt / equipe.length).toFixed(1) : 0;
  resumeEl.innerHTML = "Équipe de <b>" + equipe.length + "</b> monstres · " +
    "<b>" + totalPv + "</b> PV au total · attaque moyenne <b>" + moyAtt + "</b>";

const plusFort = equipe.reduce((max, m) => m.attaque > max.attaque ? m : max);
console.log("Le plus fort :", plusFort.nom, plusFort.attaque);

const cornus = equipe.filter((m) => m.horns);
console.log(cornus.length, "monstre(s) à cornes");

const premier3yeux = equipe.find((m) => m.eyes === 3);
console.log(premier3yeux ? premier3yeux.nom : "aucun à 3 yeux");

const texte = JSON.stringify(equipe, null, 2);   // tableau d'objets -> texte
console.log(texte);

const jsonEl = document.querySelector("#json");

// à la fin de afficher() :
  jsonEl.value = JSON.stringify(equipe, null, 2);

document.querySelector("#btnCopy").addEventListener("click", (e) => {
  jsonEl.select();
  navigator.clipboard.writeText(jsonEl.value);
  e.target.textContent = "Copié !";
  setTimeout(() => { e.target.textContent = "Copier le JSON"; }, 1200);
});

const texte = jsonEl.value;              // le JSON (texte)
const equipeChargee = JSON.parse(texte); // -> un vrai tableau d'objets
console.log(equipeChargee[0].nom, equipeChargee[0].attaque);

const dy = Math.round(Math.sin(t / 380));   // -1, 0 ou 1 : le flottement
const clin = (t % 2600) < 130;              // vrai brièvement : le clignement

function _tick(t) {
  // pour chaque monstre animé : redessine-le à l'instant t
  requestAnimationFrame(_tick);   // ... et recommence à la prochaine image
}