console.log('document', document);

let body = document.getElementById('body');
console.log('body', body);

let h = Math.random()*0;
let s = Math.random()*0;
let l = Math.random()*0;
body.style.backgroundColor = `hsl(${h} ${s} ${l})`;


// boules
let boules = [];
for (let index = 0; index < 100; index=index+1) {
  boules[index] = document.createElement('div');
  boules[index].classList.add('boule');
  // boules[index].style.backgroundColor = 'rgb(255,0,255)';

  // Hue Saturation Luminosité
  boules[index].style.backgroundColor = 'hsl(180 180 50)';
  

// moitié couleur
  if (index < 50) {
    boules[index].style.backgroundColor = "green";
  } else {
    boules[index].style.backgroundColor = 'rgb(255,0,200)';
  }


  boules[index].style.top = (Math.random() * 1080)+ "px";
  boules[index].style.left = (Math.random()* 1920) + "px";

  let rayon = 20 + Math.random()*30;
  boules[index].style.width = rayon+"px";
  boules[index].style.height = rayon+"px";
  boules[index].style.borderRadius = (rayon/2)+"px"

  body.append(boules[index]);
}
console.log('boules', boules);

// losanges
let losanges = [];
for (let index = 0; index < 50; index++) {
    losanges[index] = document.createElement('div');
    losanges[index].classList.add('losange');
    losanges[index].style.position = "absolute";      
    losanges[index].style.width = "30px";             
    losanges[index].style.height = "30px";
    losanges[index].style.backgroundColor = `hsl(${index*3.6} 100 50)`;
    losanges[index].style.top = (Math.random() * 1080) + "px";
    losanges[index].style.left = (Math.random() * 1920) + "px";
    losanges[index].style.transform = "rotate(45deg)"; // le fait ressembler à un losange
    
    body.append(losanges[index]);
}
console.log('losanges', losanges);

// staaaarrrsss

let carre1 = document.createElement('div');
carre1.style.position = "absolute";
carre1.style.width = "30px";
carre1.style.height = "30px";
carre1.style.backgroundColor = "yellow";
carre1.style.top = "100px";   
carre1.style.left = "100px";  
carre1.style.transform = "rotate(45deg)"; // le premier losange
body.append(carre1);

let carre2 = document.createElement('div');
carre2.style.position = "absolute";
carre2.style.width = "30px";
carre2.style.height = "30px";
carre2.style.backgroundColor = "yellow";
carre2.style.top = "100px";   // même position que le premier
carre2.style.left = "100px";
carre2.style.transform = "rotate(90deg)"; 
body.append(carre2);


let stars = [];
for (let index = 0; index < 10; index++) {
  let x = Math.random() * window.innerWidth; // pour bien aligner/avoir la même positoin et "window[...]" c'est pour s'adapter à n'importe quelle taille d'écran
  let y = Math.random() * window.innerHeight;
  let size = 20 + Math.random()*20;

  let carre1 = document.createElement('div');
  let carre2 = document.createElement('div');

  [carre1, carre2].forEach((carre, index) => {
    carre.style.position = "absolute";
    carre.style.width = size + "px";
    carre.style.height = size + "px";
    carre.style.backgroundColor = "yellow";
    carre.style.top = y + "px";
    carre.style.left = x + "px";
    carre.style.transform = index === 0 ? "rotate(45deg)" : "rotate(90deg)";
    body.append(carre);
  });

  stars.push([carre1, carre2]);
}

console.log('stars', stars);

let monanime = () => {
  let i = 0; 
  boules.forEach((boule) => { l
    let vitesse_x
    let vitesse_y
  

  if (boule.style.backgroundColor == "green") {
        vitesse_x = 2;
        vitesse_y = 2;
      }

  else {
    vitesse_x = -3;
    vitesse_y = -3;
  }


    boule.style.left = (boule.offsetLeft+vitesse_x)+"px"
    boule.style.top = (boule.offsetTop+vitesse_y)+"px"

    i++;
});

window.requestAnimationFrame(monanime);
}
console.log('boules[0]');

window.requestAnimationFrame(monanime);