Onboarding guidé systématique + tableau de bord simplifié

Comportement SYSTÉMATIQUE à chaque création de jeu (admin compris), pas
une formalité réservée à l'inscription : /onboarding (routes/onboarding/)
devient le point d'entrée unique — 4 cartes retournables (survol =
explication au dos), défilement horizontal animé vers le nom du jeu. Un
admin y repasse à volonté (pas de project_slug dédié, jamais bloqué/
redirigé vers un projet précédent) ; un compte "user" n'en a plus qu'un
créé d'office (routes/auth/register_2fa.py), guidé ici à la place.

- db/games/game_type_catalog.py : catalogue des 4 types (Quiz/
  Embranchement-escape game/RPG/Créer mon jeu de A à Z), _meta['onboarding_type']
  décide du "kind" du premier écran créé et si le tableau de bord complet
  reste accessible.
- routes/games/game_dashboard.py, templates/game_dashboard_simple.html :
  un type restreint (quiz/embranchement/rpg) voit désormais SON tableau
  de bord (même route que "custom"), rendu en version simplifiée — juste
  ses écrans en cartes avec un aperçu RÉEL du contenu (scène mise à
  l'échelle par container query CSS, adaptée à la largeur réelle de la
  carte). "+ Ajouter un écran" n'y propose pas de choix de type : imposé
  par le projet (routes/screens/screens_new.py), verrouillé aussi côté
  serveur.
- core/auth_guard.py : plus de blocage de game_dashboard par type — la
  restriction se fait au rendu, pas à l'accès à la route.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

templates/base.html

@@ -48,7 +48,11 @@
      délibérément le DERNIER lien — une action à part (ouvre l'aperçu
      jouable dans un nouvel onglet), pas une page de gestion de plus. -->
 <nav class="gameNavBar" aria-label="Navigation du jeu">
-  <a href="{{ url_for('game_dashboard', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path == '/game/' ~ game.slug else '' }}" title="Écrants, objets, templates, variables">📊 Tableau de bord</a>
+  <!-- Onboarding guidé (voir routes/onboarding/onboarding_new.py) : même
+       route pour tous les comptes — routes/games/game_dashboard.py y rend
+       une version simplifiée (juste les écrans) pour un type "restreint"
+       (quiz/embranchement/rpg), la version complète pour "custom". -->
+  <a href="{{ url_for('game_dashboard', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path == '/game/' ~ game.slug else '' }}" title="{{ 'Écrans du jeu' if game.onboarding_type in ('quiz', 'embranchement', 'rpg') else 'Écrans, objets, templates, variables' }}">📊 Tableau de bord</a>
   <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="gameNavLink" title="Aperçu jouable du jeu (une seule partie partagée, pour la conception)">▶️ Jouer</a>
   <button type="button" class="gameNavLink" onclick="window.forgeOpenPublishModal && window.forgeOpenPublishModal()" title="Exporte le jeu en exécutable Windows autonome (zip)">📦 Publier</button>
   <!-- "Publier en ligne" (état par joueur, Phase 1) : distinct de

templates/game_dashboard_simple.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+{% block title %}{{ game.name }} — Écrans{% endblock %}
+{% block content_class %}content-wide{% endblock %}
+{% block content %}
+{#- Dashboard simplifié (voir routes/games/game_dashboard.py) — un compte
+   "restreint" (quiz/embranchement/rpg, voir db/games/game_type_catalog.py)
+   ne voit QUE ses écrans, en cartes avec un aperçu réel de leur contenu
+   (pas d'onglets Objets/Éléments de jeu/Variables, réservés à "Créer mon
+   jeu de A à Z"). Ajouter un écran n'y demande pas de type : imposé par
+   le projet, voir routes/screens/screens_new.py. -#}
+
+{#- Aperçu adapté à la taille RÉELLE de la carte (pas une largeur fixe
+   supposée) : container-type:inline-size + l'unité "cqw" (1% de la
+   largeur du conteneur le plus proche qui la déclare) permettent à
+   .screenPreviewScene de se mettre à l'échelle EXACTEMENT à la largeur
+   réelle de .screenPreviewBox, quelle que soit la largeur de la grille
+   ou la taille de la fenêtre — sans JS ni recalcul serveur. Le ratio de
+   la boîte elle-même vient de la vraie proportion de la scène
+   (scene_width/scene_height), pas de preview_aspect (propre aux écrans
+   "document", sans rapport avec une scène "jeu_2d"). -#}
+{% macro screen_preview(s, preview) %}
+{% if preview.kind == 'jeu_2d' %}
+<div class="screenPreviewBox" style="aspect-ratio:{{ s.scene_width }} / {{ s.scene_height }};">
+  <div class="screenPreviewScene" style="width:{{ s.scene_width }}px; height:{{ s.scene_height }}px; --scene-w:{{ s.scene_width }}px;">
+    {% for obj in preview.objects %}{{ obj.rendered_html|safe }}{% endfor %}
+  </div>
+  {% if not preview.objects %}<div class="screenPreviewEmpty">Écran vide</div>{% endif %}
+</div>
+{% else %}
+<div class="screenPreviewBox" style="aspect-ratio:{{ (s.preview_aspect or '9/16')|replace('/', ' / ') }};">
+  {% for el in preview.elements if not el.parent_id %}
+  <div style="{{ el|elstyle }}"><div style="{{ el|eltransform }}">{{ el.rendered_html|safe }}</div></div>
+  {% endfor %}
+  {% if not preview.elements %}<div class="screenPreviewEmpty">Écran vide</div>{% endif %}
+</div>
+{% endif %}
+{% endmacro %}
+
+<div class="dashPanelHeader">
+  <h2 class="title is-4 mb-0">{{ game.name }}</h2>
+  <button type="button" class="button is-small primary" onclick="toggleDashCreate('screens')">+ Ajouter un écran</button>
+</div>
+
+<form method="post" action="{{ url_for('screens_new', slug=game.slug) }}" class="dashCreateBar" id="dashCreate-screens" style="display:none;">
+  <input type="text" name="name" placeholder="Nom du nouvel écran (ex. Question 2, Scène 2...)" required autocomplete="off">
+  <button type="submit" class="primary">Créer</button>
+</form>
+
+{% if screen_list %}
+<div class="screenCardGrid">
+  {% for s in screen_list %}
+  <div class="screenCard">
+    <a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}" class="screenCardPreviewLink">
+      {{ screen_preview(s, previews[s.id]) }}
+    </a>
+    <div class="screenCardFooter">
+      <a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}" class="screenCardName">
+        {{ s.name }}{% if loop.first %} <span class="tag is-info is-light">★ Départ</span>{% endif %}
+      </a>
+      <div class="screenCardActions">
+        <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="up"><button type="submit" class="button is-small" title="Monter" {{ 'disabled' if loop.first else '' }}>↑</button></form>
+        <form method="post" action="{{ url_for('screen_move', slug=game.slug, screen_id=s.id) }}"><input type="hidden" name="direction" value="down"><button type="submit" class="button is-small" title="Descendre" {{ 'disabled' if loop.last else '' }}>↓</button></form>
+        <form method="post" action="{{ url_for('screen_delete', slug=game.slug, screen_id=s.id) }}"
+              onsubmit="return confirm('Supprimer l\'écran « {{ s.name }} » et tout son contenu ?');">
+          <button type="submit" class="button is-small is-danger" title="Supprimer">🗑️</button>
+        </form>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<p class="hint">Aucun écran pour l'instant — clique sur "+ Ajouter un écran" pour commencer.</p>
+{% endif %}
+<script src="{{ url_for('static', filename='js/game_dashboard_simple.js') }}"></script>
+{% endblock %}

templates/index.html

@@ -11,24 +11,17 @@
 <div class="twoCol">
   <div class="colLeft">
     <h2>Créer un jeu</h2>
-    <form method="post" action="{{ url_for('games_new') }}" class="card">
-      <div class="formField">
-        <label for="name">Nom du nouveau jeu</label>
-        <input type="text" id="name" name="name" placeholder="ex. CyberQuest RGPD" required>
-      </div>
-      <!-- Fondations multi-éditeurs : le type choisi ici gate quel éditeur
-           (générique ou scène 2D) et quel rendu jouable ce jeu utilisera,
-           voir db/games/get_game_type.py — non modifiable ensuite. -->
-      <div class="formField">
-        <label for="game_type">Type de jeu</label>
-        <select id="game_type" name="game_type">
-          <option value="document">Document — quiz, formulaire, contenu (éditeur actuel)</option>
-          <option value="jeu_2d">Jeu 2D — RPG/serious game (scène, personnages, collision)</option>
-        </select>
-      </div>
-      <div class="actionsRow"><button type="submit" class="primary">+ Créer le jeu</button></div>
-      <p class="hint" style="margin-top:6px;">Crée un dossier avec index.html / index.css / index.js reliés entre eux, et une base de données dédiée à ce jeu.</p>
-    </form>
+    <!-- Onboarding guidé (voir routes/onboarding/onboarding_new.py) :
+         comportement SYSTÉMATIQUE à chaque création de jeu, pas une
+         formalité réservée à l'inscription — un admin y repasse à
+         volonté (illimité, pas de project_slug dédié qui bloquerait le
+         retour). Choisir un type ici, ce n'est pas juste pour un compte
+         "user" : ça prépare aussi le jour où un admin (ou un compte
+         payant multi-projet) gère plusieurs jeux de types différents. -->
+    <div class="card">
+      <p class="hint" style="margin-top:0;">Choisis un type de jeu, nomme-le : Forge Engine crée le projet et t'envoie directement sur l'éditeur adapté.</p>
+      <div class="actionsRow"><a href="{{ url_for('onboarding_new') }}" class="button primary">+ Créer un jeu</a></div>
+    </div>
   </div>
 
   <div class="colRight">

templates/onboarding/onboarding_new.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+{% block title %}Forge Engine — Créer mon jeu{% endblock %}
+{% block body_class %}objectEditBody{% endblock %}
+{% block content_class %}content-wide onboardingPage{% endblock %}
+{% block content %}
+{% if error %}<p class="hint onboardingError">⚠️ {{ error }}</p>{% endif %}
+
+<form method="post" action="{{ url_for('onboarding_new') }}" id="onboardingForm">
+  <input type="hidden" name="onboarding_type" id="onboardingTypeHidden">
+
+  <div class="onboardingViewport">
+    <div class="onboardingTrack" id="onboardingTrack">
+
+      <section class="onboardingStep onboardingStep--pick">
+        <h2 class="onboardingTitle">Quel jeu veux-tu créer ?</h2>
+        <div class="onboardingGrid">
+          {% for key, info in onboarding_types.items() %}
+          <button type="button" class="onboardingCard" data-type="{{ key }}" data-label="{{ info.label }}">
+            <span class="onboardingCardInner">
+              <span class="onboardingCardFace onboardingCardFront">
+                <span class="onboardingCardIcon">{{ info.icon }}</span>
+                <span class="onboardingCardLabel">{{ info.label }}</span>
+              </span>
+              <span class="onboardingCardFace onboardingCardBack">
+                <span class="onboardingCardDesc">{{ info.description }}</span>
+              </span>
+            </span>
+          </button>
+          {% endfor %}
+        </div>
+      </section>
+
+      <section class="onboardingStep onboardingStep--name">
+        <button type="button" class="onboardingBackBtn" id="onboardingBackBtn">← Changer de type</button>
+        <div class="onboardingNameBox">
+          <label class="onboardingTitle" for="onboardingNameInput">Quel est le nom de votre jeu ?</label>
+          <input type="text" name="name" id="onboardingNameInput" class="onboardingNameInput" placeholder="ex. CyberQuest RGPD" autocomplete="off">
+          <button type="submit" id="onboardingSubmitBtn" class="primary onboardingSubmitBtn" disabled>Créer mon jeu 🚀</button>
+        </div>
+      </section>
+
+    </div>
+  </div>
+</form>
+<script src="{{ url_for('static', filename='js/onboarding/onboarding_new.js') }}"></script>
+{% endblock %}