La Fabrique à Monstres

const prof = "Marc";     // string  (texte)
let score = 0;           // number  (nombre)
const gagne = false;     // boolean (true / false)

let monstre = {
  nom: "Zeb",
  couleurIndex: 0,   // position dans le tableau COULEURS (0 = Turquoise)
  eyes: 2,
  horns: false,
  fangs: true,
};

console.log(monstre);

console.log(monstre.nom);    // "Zeb"
monstre.eyes = 3;            // on modifie une propriété
monstre.horns = true;
console.log(monstre.eyes, monstre.horns);   // 3  true

const preview = document.querySelector("#preview");

const dessiner = () => {
  const c = COULEURS[monstre.couleurIndex];
  dessinerMonstre(preview, {
    body: c.body, shade: c.shade, light: c.light, mouth: c.shade,
    eyes: monstre.eyes, horns: monstre.horns, fangs: monstre.fangs,
  }, 14);
  document.querySelector("#nomPreview").textContent = monstre.nom;
};

dessiner();

console.log(COULEURS.length);   // 6
console.log(COULEURS[0].nom);   // "Turquoise"

const swatchesEl = document.querySelector("#swatches");

COULEURS.forEach((couleur, i) => {
  const pastille = document.createElement("button");
  pastille.className = "swatch";
  pastille.style.background = couleur.body;
  pastille.title = couleur.nom;
  pastille.addEventListener("click", () => {
    monstre.couleurIndex = i;
    dessiner();
  });
  swatchesEl.appendChild(pastille);
});

const boutonsYeux = document.querySelectorAll("#segEyes button");

boutonsYeux.forEach((bouton) => {
  bouton.addEventListener("click", () => {
    monstre.eyes = Number(bouton.dataset.eyes);
    dessiner();
  });
});

  boutonsYeux.forEach((b) => {
    b.classList.toggle("actif", Number(b.dataset.eyes) === monstre.eyes);
  });

document.querySelector("#tHorns").addEventListener("click", () => {
  monstre.horns = !monstre.horns;   // on inverse
  dessiner();
});
document.querySelector("#tFangs").addEventListener("click", () => {
  monstre.fangs = !monstre.fangs;
  dessiner();
});

  document.querySelector("#tHorns").classList.toggle("actif", monstre.horns);
  document.querySelector("#tFangs").classList.toggle("actif", monstre.fangs);

document.querySelector("#champNom").addEventListener("input", (e) => {
  monstre.nom = e.target.value.trim() || "Mon monstre";
  document.querySelector("#nomPreview").textContent = monstre.nom;
});

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

document.querySelector("#btnAleatoire").addEventListener("click", () => {
  monstre = {
    nom: "Zeb " + (1 + Math.floor(Math.random() * 99)),
    couleurIndex: Math.floor(Math.random() * COULEURS.length),
    eyes: 1 + Math.floor(Math.random() * 3),   // 1, 2 ou 3
    horns: Math.random() < 0.5,
    fangs: Math.random() < 0.6,
  };
  document.querySelector("#champNom").value = "";
  dessiner();
});

const galerie = [];        // vide
galerie.push("x");         // ajoute à la fin
console.log(galerie.length);   // 1

const galerie = [];

document.querySelector("#btnAjouter").addEventListener("click", () => {
  galerie.push({ ...monstre, id: Date.now() });
  afficherGalerie();   // écrite au chapitre 10
});

const galerieEl  = document.querySelector("#galerie");
const compteurEl = document.querySelector("#compteur");

const afficherGalerie = () => {
  compteurEl.textContent = galerie.length + (galerie.length > 1 ? " monstres" : " monstre");
  galerieEl.innerHTML = "";
  galerie.forEach((m) => {
    const carte = document.createElement("div");
    carte.className = "mon-card";
    const canvas = document.createElement("canvas");
    carte.appendChild(canvas);
    const nom = document.createElement("div");
    nom.className = "n"; nom.textContent = m.nom;
    carte.appendChild(nom);
    galerieEl.appendChild(carte);
    const c = COULEURS[m.couleurIndex];
    dessinerMonstre(canvas, {
      body: c.body, shade: c.shade, light: c.light, mouth: c.shade,
      eyes: m.eyes, horns: m.horns, fangs: m.fangs,
    }, 5);
  });
};

const noms = galerie.map((m) => m.nom);
console.log(noms);   // ["Zeb 1", "Zeb 2", ...]

const grands = [4, 9, 2, 7].filter((n) => n > 5);   // [9, 7]

  carte.title = "Cliquer pour supprimer";
  carte.addEventListener("click", () => supprimer(m.id));

const supprimer = (id) => {
  const restants = galerie.filter((m) => m.id !== id);
  galerie.length = 0;
  restants.forEach((m) => galerie.push(m));
  afficherGalerie();
};

const total = [10, 5, 3].reduce((somme, n) => somme + n, 0);   // 18

const totalYeux = galerie.reduce((somme, m) => somme + m.eyes, 0);
console.log("Yeux au total :", totalYeux);

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

galerie.find((m) => m.eyes === 3);     // le PREMIER à 3 yeux (ou undefined)
galerie.some((m) => m.horns);          // y a-t-il AU MOINS un cornu ? → true/false
galerie.every((m) => m.fangs);         // TOUS ont des crocs ? → true/false
["Zeb","Croc"].includes("Croc");     // cette valeur est-elle dedans ? → true

if (galerie.some((m) => m.eyes === 3)) {
  console.log("Tu as déjà un monstre à 3 yeux !");
}
const premierBleu = galerie.find((m) => m.couleurIndex === 4);
console.log(premierBleu ? premierBleu.nom : "aucun bleu");

const cornus = galerie
  .filter((m) => m.horns)      // on garde les cornus
  .map((m) => m.nom)           // on ne veut que le nom
  .sort();                     // ordre alphabétique
console.log(cornus);

const yeuxViolets = galerie
  .filter((m) => m.couleurIndex === 2)
  .reduce((somme, m) => somme + m.eyes, 0);
console.log(yeuxViolets);

const parCouleur = galerie.reduce((compte, m) => {
  const nom = COULEURS[m.couleurIndex].nom;
  compte[nom] = (compte[nom] || 0) + 1;
  return compte;
}, {});
console.log(parCouleur);   // { Turquoise: 2, Violet: 1, ... }

const monstreAleatoire = () => ({
  nom: "Zeb " + (1 + Math.floor(Math.random() * 99)),
  couleurIndex: Math.floor(Math.random() * COULEURS.length),
  eyes: 1 + Math.floor(Math.random() * 3),
  horns: Math.random() < 0.5,
  fangs: Math.random() < 0.6,
  id: Date.now() + Math.floor(Math.random() * 1000),
});

document.querySelector("#btnHorde").addEventListener("click", () => {
  const cinq = [1, 2, 3, 4, 5].map(() => monstreAleatoire());
  cinq.forEach((m) => galerie.push(m));
  afficherGalerie();
});

<button id="btnTri">Trier A-Z</button>
<button id="btnTri3">3 yeux</button>

document.querySelector("#btnTri").addEventListener("click", () => {
  galerie.sort((a, b) => a.nom.localeCompare(b.nom));
  afficherGalerie();
});
document.querySelector("#btnTri3").addEventListener("click", () => {
  afficherGalerie(galerie.filter((m) => m.eyes === 3));   // vue filtrée
});

localStorage.setItem("test", "coucou");
console.log(localStorage.getItem("test"));   // "coucou"

const texte = JSON.stringify(galerie);   // tableau → texte
const liste = JSON.parse(texte);         // texte → tableau

const sauvegarder = () => localStorage.setItem("galerie", JSON.stringify(galerie));

const sauvegarde = localStorage.getItem("galerie");
if (sauvegarde) {
  JSON.parse(sauvegarde).forEach((m) => galerie.push(m));
}
afficherGalerie();

document.querySelector("#btnExport").addEventListener("click", () => {
  const lien = document.createElement("a");
  lien.download = monstre.nom + ".png";
  lien.href = preview.toDataURL("image/png");
  lien.click();
});

const SILHOUETTE = [
  "................",
  "......oooo......",
  "....oobbbboo....",
  // ...
];

for (let r = 0; r < 16; r++)
  for (let c = 0; c < 16; c++) {
    const ch = SILHOUETTE[r][c];
    if (ch === "b") px(c, r, options.body);
    else if (ch === "o") px(c, r, options.shade);
  }

// donnees.js
export const COULEURS = [ /* ... les 6 couleurs ... */ ];

// tout en haut de main.js
import { COULEURS } from "./donnees.js";