Forge-Engine/static/js/onboarding/onboarding_new.js

// Onboarding guidé (templates/onboarding/onboarding_new.html) — interactions
// pures DOM, aucune logique métier ici (voir routes/onboarding/
// onboarding_new.py pour la validation réelle, côté serveur). Deux
// "pages" (choix du type / nom du jeu) posées côte à côte dans
// #onboardingTrack, révélées par un défilement horizontal animé en CSS
// (voir .onboardingTrack--step2 dans static/style.css) plutôt qu'un vrai
// changement de page — pas de rechargement, pas d'aller-retour serveur
// tant que le formulaire n'est pas soumis pour de vrai.

function forgeOnboardingGoToStep(step) {
  const track = document.getElementById('onboardingTrack');
  if (track) track.classList.toggle('onboardingTrack--step2', step === 2);
  if (step === 2) {
    const nameField = document.getElementById('onboardingNameInput');
    // Après la fin de l'animation de défilement (voir la durée de
    // transition posée sur .onboardingTrack) — focus immédiat plus tôt
    // ferait sauter le scroll du champ à moitié visible.
    if (nameField) setTimeout(() => { nameField.focus(); }, 500);
  }
}

function forgeOnboardingChooseType(card) {
  document.querySelectorAll('.onboardingCard').forEach((c) => {
    c.classList.toggle('is-selected', c === card);
  });
  const hiddenType = document.getElementById('onboardingTypeHidden');
  if (hiddenType) hiddenType.value = card.dataset.type || '';
  forgeOnboardingUpdateSubmitState();
  forgeOnboardingGoToStep(2);
}

function forgeOnboardingUpdateSubmitState() {
  const nameField = document.getElementById('onboardingNameInput');
  const hiddenType = document.getElementById('onboardingTypeHidden');
  const submitBtn = document.getElementById('onboardingSubmitBtn');
  if (!nameField || !hiddenType || !submitBtn) return;
  submitBtn.disabled = !(hiddenType.value && nameField.value.trim());
}

function forgeOnboardingInit() {
  // Appelé directement (pas de DOMContentLoaded) : ce fichier est chargé
  // par un <script src> posé à la fin du contenu de la page — les
  // éléments dont on a besoin existent déjà à ce stade. Nécessaire aussi
  // pour la navigation pjax (voir static/pjax.js — runScriptsIn
  // ré-exécute ce script à chaque page swappée, mais DOMContentLoaded,
  // lui, ne se redéclenche jamais après le tout premier chargement réel).

  // Entrée en cascade des cartes — délai posé en JS plutôt qu'en CSS pur
  // (nth-child) pour rester correct quel que soit le nombre de types
  // affichés (voir db.ONBOARDING_TYPES, appelé à générer la liste).
  document.querySelectorAll('.onboardingCard').forEach((card, i) => {
    card.style.animationDelay = `${i * 70}ms`;
    card.addEventListener('click', () => { forgeOnboardingChooseType(card); });
  });

  const backBtn = document.getElementById('onboardingBackBtn');
  if (backBtn) backBtn.addEventListener('click', () => { forgeOnboardingGoToStep(1); });

  const nameField = document.getElementById('onboardingNameInput');
  if (nameField) nameField.addEventListener('input', forgeOnboardingUpdateSubmitState);

  forgeOnboardingUpdateSubmitState();
}

forgeOnboardingInit();