script.js

/* 
   PORTFOLIO IMMERSIF 
*/

/* 
   1. CURSEUR PERSONNALISÉ
   Le point suit la souris instantanément. L'anneau suit avec un léger
   retard. La fusée se positionne sur le bord
   de l'anneau, dans la direction du mouvement. */

function initialiserCurseur() {
  const point = document.getElementById("curseur-point");
  const anneau = document.getElementById("curseur-anneau");
  const fusee = document.getElementById("curseur-fusee");
  let sourisX = 0,
    sourisY = 0;
  let anneauX = 0,
    anneauY = 0;
  let anneauXPrev = 0,
    anneauYPrev = 0;
  let angleActuel = -90; // démarre en haut

  const RAYON_ANNEAU = 17; // demi-largeur de l'anneau (34px / 2)

  document.addEventListener("mousemove", (e) => {
    sourisX = e.clientX;
    sourisY = e.clientY;
    point.style.left = sourisX + "px";
    point.style.top = sourisY + "px";

    const elementSousCurseur = document.elementFromPoint(sourisX, sourisY);
    const estCliquable =
      elementSousCurseur &&
      elementSousCurseur.closest("button, a, .bouton-planete");
    document.body.classList.toggle("curseur--survol", !!estCliquable);
  });

  function animerAnneau() {
    anneauXPrev = anneauX;
    anneauYPrev = anneauY;

    anneauX += (sourisX - anneauX) * 0.11;
    anneauY += (sourisY - anneauY) * 0.11;

    anneau.style.left = anneauX + "px";
    anneau.style.top = anneauY + "px";

    // Calcul du vecteur de déplacement de l'anneau
    const dx = anneauX - anneauXPrev;
    const dy = anneauY - anneauYPrev;
    const vitesse = Math.sqrt(dx * dx + dy * dy);

    // On met à jour l'angle seulement si l'anneau bouge vraiment
    if (vitesse > 0.05) {
      angleActuel = Math.atan2(dy, dx) * (180 / Math.PI);
    }

    const angleRad = (angleActuel * Math.PI) / 180;

    // Position de la fusée = centre anneau + vecteur de rayon dans la direction du mouvement
    const fuseeX = anneauX + Math.cos(angleRad) * RAYON_ANNEAU;
    const fuseeY = anneauY + Math.sin(angleRad) * RAYON_ANNEAU;

    fusee.style.left = fuseeX + "px";
    fusee.style.top = fuseeY + "px";
    // +90 car la fusée pointe vers le haut par défaut
    fusee.style.transform = `translate(-50%, -50%) rotate(${angleActuel + 90}deg)`;

    requestAnimationFrame(animerAnneau);
  }
  animerAnneau();

  document.addEventListener("mouseleave", () => {
    point.style.opacity = "0";
    anneau.style.opacity = "0";
    fusee.style.opacity = "0";
  });
  document.addEventListener("mouseenter", () => {
    point.style.opacity = "1";
    anneau.style.opacity = "1";
    fusee.style.opacity = "1";
  });
}

/* 
   2. HORLOGE
   Met à jour l'heure affichée dans le coin supérieur gauche. */

function initialiserHorloge() {
  const elementHeure = document.getElementById("affichage-horloge");
  const affichageAnnee = document.getElementById("affichage-annee");

  affichageAnnee.textContent = new Date().getFullYear();

  function mettreAJourHeure() {
    const maintenant = new Date();
    const h = String(maintenant.getHours()).padStart(2, "0");
    const m = String(maintenant.getMinutes()).padStart(2, "0");
    const s = String(maintenant.getSeconds()).padStart(2, "0");
    elementHeure.textContent = `${h}:${m}:${s}`;
  }

  mettreAJourHeure(); /*execute la fonction mettreaJourHeure toutes les 1000 ms/1sec */
  setInterval(mettreAJourHeure, 1000);
}

/* 
   3. INITIALISATION GLOBALE */

document.addEventListener("DOMContentLoaded", () => {
  initialiserCurseur();
  initialiserHorloge();
});

/* NB :
padStart : ajoute des caractères (ici des 0) devant un texte pour qu'il atteigne une longueur minimale donnée(longueurVoulue, "caractèreÀAjouter") fonctionne uniquement sur des chaines de caracteres. On utilise donc String
setinterval : fonction qui exécute une autre fonction de manière répétée, à intervalles réguliers.
DOMContentLoaded attends que toute la page HTML soit construite avant d'exécuter le code pour être sûr que les éléments qu'il faut manipuler existent déjà*/