console.log('Salut :)');

// Les variables
// fonction d'une droite
// y = ax + b
// x et y sont des variables

// variable type number
let x = 3;
let a = 2;
let b = 23;
let y;

y = a*x + b;

console.log(y);

console.log(outerHeight);

// variable string (chaine de charactères)
let leprenomdelours = "hubert";
console.log(leprenomdelours);
let leprenomduloup = "maurice";
console.log(leprenomduloup);
// concatenation
let letritredemacomptine = leprenomdelours + " & " + leprenomduloup;
console.log(letritredemacomptine);

console.log(a + letritredemacomptine);

// boolean (vrai ou faux)
// https://fr.wikipedia.org/wiki/Alg%C3%A8bre_de_Boole_(logique)
let jesuisunevache = false;
let youaregreat = true;
console.log(jesuisunevache, youaregreat);

// comparaison
let lalignedescend = a < 0;
console.log("lalignedescend", lalignedescend);

// random (Aleatoire)
let unnombrealeatoire = 50 + Math.random() * 50;

// Array (tableau)
let malistedecourses = [
  "beurre", 
  "salade", 
  "glace",
  10,
  true
];
console.log("malistedecourses", malistedecourses[0]);

// Object (objet)
let malistedecourseencoremieux = {
  "biocoop": "l'adresse de biocoop",
  "intermarcher": 99,
  "salut": false
} 
console.log("malistedecourseencoremieux", malistedecourseencoremieux.biocoop);

// nested (imbriquer)

let objectarraynested = {
  "biocoop":[
    {'beurre':1},
    {'yahourt':10}
  ],
  'leclerc':[
    {'essence':10}
  ]
}
console.log("objectarraynested", objectarraynested);


// comment afficher des trucs

// créer un element html virtuel
console.log('document', document);

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

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




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

  // HSL Hue Saturation Luminosity
  //boules[index].style.backgroundColor = 'hsl(180 50 50)';
   //boules[index].style.backgroundColor = 'hsl(180 50 '+index+')';
   boules[index].style.backgroundColor = `hsl(65 50 ${index})`;
   //boules[index].style.backgroundColor = `hsl(180 ${index} 50)`;
    //boules[index].style.backgroundColor = `hsl(${index*3.6} 50 50)`;

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

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

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






let monanime = () => {
  let i = 0;
  boules.forEach((boule) => {
    let impair = i%2;

    let vitesse_x;
    let vitesse_y;
    if (impair) {
      vitesse_x = vitesse_y = -1.5;
    } else {
      vitesse_x = vitesse_y = -1;
    }

    boule.style.bottom = (boule.offsetBottom+vitesse_x)+"px";  
    boule.style.top = (boule.offsetTop+vitesse_y)+"px";  

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











