Retire le fil d'Ariane, centre/réordonne la barre de nav, refait le dashboard

Trois demandes distinctes de l'utilisateur, regroupées car elles touchent
toutes à la navigation d'un jeu :

1. Fil d'Ariane retiré (devenu redondant avec la barre de navigation du
   jeu ajoutée au commit précédent) : bloc breadcrumb_wrap retiré de
   base.html, et son override ({% block breadcrumb %}) retiré des 9
   templates qui le définissaient encore. .breadcrumbBar (CSS) retiré,
   y compris des règles flex:0 0 auto de body.objectEditBody/builderBody.

2. Liens de .gameNavBar centrés (justify-content:center).

3. "Jouer" déplacé en dernier lien (c'est une action à part — ouvre
   l'aperçu jouable dans un nouvel onglet — pas un éditeur de plus comme
   les 4 autres).

4. game_dashboard.html devient un vrai tableau de bord : une grille de
   cartes (Écrans/Objets/Éléments de jeu/Variables), chacune listant les
   entrées existantes avec un accès direct (clic = éditeur concerné) et
   un lien "Gérer" vers la page dédiée pour créer/réorganiser. Remplace
   l'ancien panneau "Créer" (redondant avec la barre de navigation
   persistante) et la simple table "Objets définis". routes/games/
   game_dashboard.py alimente maintenant aussi screen_list, element_types
   (+ usage) et variables, en réutilisant list_screens/
   list_element_types/element_type_usage_count/list_global_variables déjà
   utilisés ailleurs.

Vérifié en rendant toutes les pages concernées via le client de test
Flask : barre de nav présente partout où un `game` est dans le contexte
(absente sur l'accueil), fil d'Ariane absent partout, ordre des liens
avec "Jouer" en dernier.

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

routes/games/game_dashboard.py

@@ -1,12 +1,27 @@
 from flask import render_template
 
 import db
+import screens
 
 from core.flask_app import app
 
 
 @app.route("/game/<slug>")
 def game_dashboard(slug):
+    """Vue d'ensemble du jeu : tout ce qui a été créé (écrans, objets,
+    éléments de jeu réutilisables, variables), en un coup d'œil, avec un
+    accès direct à chaque élément — la barre de navigation du jeu (voir
+    base.html) permet déjà de sauter directement vers chaque éditeur, cette
+    page sert donc de résumé/point d'entrée plutôt que de répéter les mêmes
+    liens."""
     game = db.game_meta(slug)
     definitions = db.list_definitions(slug)
-    return render_template("game_dashboard.html", game=game, definitions=definitions)
+    screen_list = screens.list_screens(slug)
+    element_types = screens.list_element_types(slug)
+    element_type_usage = {t["id"]: screens.element_type_usage_count(slug, t["id"]) for t in element_types}
+    variables = db.list_global_variables(slug)
+    return render_template(
+        "game_dashboard.html", game=game, definitions=definitions,
+        screen_list=screen_list, element_types=element_types,
+        element_type_usage=element_type_usage, variables=variables,
+    )

static/style.css

@@ -14,18 +14,17 @@ input[type=text], input[type=number], input[type=date], textarea, select{
 }
 input[type=checkbox]{ width:auto; margin-top:6px; }
 
-/* .topbar/.breadcrumbBar : Bulma fournit déjà la mise en page (navbar,
+/* .topbar : Bulma fournit déjà la mise en page (navbar) — cette classe ne
-   breadcrumb) — ces classes ne servent plus qu'à les repérer dans les
+   sert plus qu'à la repérer dans les layouts plein-écran
-   layouts plein-écran (body.builderBody/objectEditBody, voir plus bas) et à
+   (body.builderBody/objectEditBody, voir plus bas) et à la rattacher au
-   les rattacher au thème sombre. */
+   thème sombre. */
 .topbar{ border-bottom:1px solid var(--border); }
-.breadcrumbBar{ padding:10px 20px; background:transparent; border-bottom:1px solid var(--border); margin-bottom:0; }
 
 /* Barre de navigation d'UN JEU (voir base.html) — toujours visible entre
    les différents éditeurs d'un même jeu, en ligne (contrairement à
    .navList/.navRow ci-dessous, empilés verticalement dans le panneau
    "Créer" du tableau de bord). */
-.gameNavBar{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 20px; background:transparent; border-bottom:1px solid var(--border); }
+.gameNavBar{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:8px 20px; background:transparent; border-bottom:1px solid var(--border); }
 .gameNavLink{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; }
 .gameNavLink:hover{ background:var(--panel2); border-color:var(--accent); }
 .gameNavLink.active{ background:var(--panel2); border-color:var(--accent); color:var(--accent); }
@@ -105,7 +104,7 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
    a beaucoup de champs, pour garder une vue d'ensemble sans perdre le
    formulaire "Ajouter un champ" hors de l'écran. */
 body.objectEditBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
-body.objectEditBody > .topbar, body.objectEditBody > .gameNavBar, body.objectEditBody > .breadcrumbBar{ flex:0 0 auto; }
+body.objectEditBody > .topbar, body.objectEditBody > .gameNavBar{ flex:0 0 auto; }
 body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
 
 .content-objectEdit{ width:100%; display:flex; flex-direction:column; min-height:0; }
@@ -140,7 +139,7 @@ body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden
    ce sont les zones internes (panneaux, écran, panneau de logique) qui
    défilent chacune de leur côté si besoin. */
 body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; }
-body.builderBody > .topbar, body.builderBody > .gameNavBar, body.builderBody > .breadcrumbBar{ flex:0 0 auto; }
+body.builderBody > .topbar, body.builderBody > .gameNavBar{ flex:0 0 auto; }
 body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
 
 .content-builder{
@@ -493,3 +492,18 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
 .animClipResizeHandle{ position:absolute; right:0; top:0; width:8px; height:100%; cursor:ew-resize; }
 .animKeyframeRow{ align-items:flex-start; }
 .animKeyframeRow textarea{ font-family:monospace; font-size:11px; }
+
+/* ---------- Tableau de bord d'un jeu (game_dashboard.html) ---------- */
+/* Résumé/point d'entrée : une carte par catégorie (écrans, objets,
+   éléments de jeu, variables), toutes de même hauteur dans leur ligne
+   (align-items:stretch, par défaut en grid) pour un rendu net même quand
+   une carte a beaucoup plus d'entrées qu'une autre. */
+.dashboardGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:8px; }
+.dashboardCard{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--panel); }
+.dashboardCard h2{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; }
+.dashboardCardCount{ font-size:11px; color:var(--text-dim); background:var(--panel2); border-radius:999px; padding:2px 8px; text-transform:none; letter-spacing:0; }
+.dashboardCardList{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; }
+.dashboardCardItem{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:6px; text-decoration:none; color:var(--text); font-size:12.5px; }
+a.dashboardCardItem:hover{ background:var(--panel2); }
+.dashboardCardItem span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.dashboardCardFooter{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:12.5px; }

templates/base.html

@@ -15,30 +15,24 @@
   </div>
 </nav>
 {% if game is defined and game %}
-<!-- Barre toujours visible entre les différents éditeurs d'UN MÊME jeu (voir
+<!-- Barre toujours visible entre les différents éditeurs d'UN MÊME jeu —
-     "Créer" sur game_dashboard.html, dont elle reprend exactement les
+     sans elle, changer d'éditeur (écrans, éléments de jeu, variables,
-     liens) — sans elle, changer d'éditeur (écrans, éléments de jeu,
+     objets) obligeait à repasser par le tableau de bord du jeu à chaque
-     variables, objets) obligeait à repasser par le tableau de bord du jeu à
+     fois. Remplace le fil d'Ariane (retiré, devenu redondant avec elle) :
-     chaque fois. N'apparaît que si la route a mis un `game` dans le
+     N'apparaît que si la route a mis un `game` dans le contexte du
-     contexte du template (toutes les pages d'un jeu le font déjà, pour la
+     template (déjà fait par toutes les pages d'un jeu) — absente sur
-     miette de pain) — absente sur l'accueil (liste des jeux), où il n'y a
+     l'accueil (liste des jeux), où il n'y a pas de jeu courant. "Jouer"
-     pas de jeu courant. -->
+     est délibérément le DERNIER lien (les autres sont des éditeurs, celui-
+     ci ouvre l'aperçu jouable dans un nouvel onglet — une action à part,
+     pas un éditeur de plus). -->
 <nav class="gameNavBar" aria-label="Navigation du jeu">
   <a href="{{ url_for('screens_list', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/screens') else '' }}" title="Créer et enchaîner les écrans jouables">🖥️ Écrans du jeu</a>
   <a href="{{ url_for('element_types', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/element-types') else '' }}" title="Catalogue réutilisable (Personnage, Outil, IA...)">🧩 Éléments de jeu</a>
   <a href="{{ url_for('game_variables', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/variables') else '' }}" title="Valeurs globales au jeu entier">🔧 Variables</a>
-  <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="gameNavLink" title="Aperçu jouable du jeu">▶️ Jouer</a>
   <a href="{{ url_for('object_new', slug=game.slug) }}" class="gameNavLink {{ 'active' if request.path.startswith('/game/' ~ game.slug ~ '/objects') else '' }}" title="Comme une table de base de données : un nom, et des champs typés">🗂️ Objet</a>
+  <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="gameNavLink" title="Aperçu jouable du jeu">▶️ Jouer</a>
 </nav>
 {% endif %}
-{% block breadcrumb_wrap %}
-<nav class="breadcrumb breadcrumbBar" aria-label="breadcrumbs">
-  <ul>
-    <li><a href="{{ url_for('index') }}">🛠️ Mes jeux</a></li>
-    {% block breadcrumb %}{% endblock %}
-  </ul>
-</nav>
-{% endblock %}
 <main class="content {% block content_class %}{% endblock %}">
   {% block content %}{% endblock %}
 </main>

templates/data_form.html

@@ -2,11 +2,6 @@
 {% block title %}{{ 'Modifier' if row else 'Ajouter' }} — {{ definition.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li><a href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">{{ definition.name }}</a></li>
-<li class="is-active"><a>{{ 'Modifier #' ~ row.id if row else 'Nouvelle entrée' }}</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">{{ 'Modifier l\'entrée #' ~ row.id if row else 'Ajouter une entrée' }} — {{ definition.name }}</h1>
 

templates/data_list.html

@@ -2,10 +2,6 @@
 {% block title %}{{ definition.name }} — {{ game.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li class="is-active"><a>{{ definition.name }}</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">{{ definition.name }}
   <a class="button is-small" href="{{ url_for('object_edit', slug=game.slug, definition_id=definition.id) }}" title="Modifier cet objet">✏️</a>

templates/element_types.html

@@ -2,10 +2,6 @@
 {% block title %}Éléments de jeu — {{ game.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li class="is-active"><a>Éléments de jeu</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">Éléments de jeu</h1>
 <p class="hint mb-4">Un élément de jeu est un conteneur réutilisable.</p>

templates/game_dashboard.html

@@ -1,24 +1,89 @@
 {% extends "base.html" %}
 {% block title %}{{ game.name }} — Forge Engine{% endblock %}
-{% block content_class %}content-wide content-objectEdit{% endblock %}
+{% block content_class %}content-wide{% endblock %}
-{% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}<li class="is-active"><a>{{ game.name }}</a></li>{% endblock %}
 {% block content %}
 <h1 class="title">{{ game.name }}</h1>
 <p class="hint mb-4">Base de données : projects/{{ game.slug }}/game.db</p>
 
-<div class="twoCol">
+<div class="dashboardGrid">
-  <div class="colLeft">
+  <div class="dashboardCard">
-    <h2>Créer</h2>
+    <h2>🖥️ Écrans du jeu <span class="dashboardCardCount">{{ screen_list|length }}</span></h2>
-    <div class="navList">
+    {% if screen_list %}
-      <a href="{{ url_for('screens_list', slug=game.slug) }}" class="navRow" title="Créer et enchaîner les écrans jouables">🖥️ Écrans du jeu</a>
+    <div class="dashboardCardList">
-      <a href="{{ url_for('element_types', slug=game.slug) }}" class="navRow" title="Catalogue réutilisable (Personnage, Outil, IA...)">🧩 Éléments de jeu</a>
+      {% for s in screen_list %}
-      <a href="{{ url_for('game_variables', slug=game.slug) }}" class="navRow" title="Valeurs globales au jeu entier">🔧 Variables</a>
+      <a class="dashboardCardItem" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">
-      <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="navRow" title="Aperçu jouable du jeu">▶️ Jouer</a>
+        <span>{{ s.name }}</span>
-      <a href="{{ url_for('object_new', slug=game.slug) }}" class="navRow" title="Comme une table de base de données : un nom, et des champs typés">🗂️ Objet</a>
+        {% if loop.first %}<span class="tag is-info is-light">★ Départ</span>{% endif %}
+      </a>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="hint">Aucun écran pour l'instant.</p>
+    {% endif %}
+    <div class="dashboardCardFooter">
+      <a href="{{ url_for('screens_list', slug=game.slug) }}">Gérer les écrans →</a>
+    </div>
   </div>
 
-    <div class="dangerZone">
+  <div class="dashboardCard">
+    <h2>🗂️ Objets <span class="dashboardCardCount">{{ definitions|length }}</span></h2>
+    {% if definitions %}
+    <div class="dashboardCardList">
+      {% for d in definitions %}
+      <a class="dashboardCardItem" href="{{ url_for('object_view', slug=game.slug, definition_id=d.id) }}">
+        <span>{{ d.name }}</span>
+        <span class="has-text-grey">{{ d.table_name }}</span>
+      </a>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="hint">Aucun objet pour l'instant.</p>
+    {% endif %}
+    <div class="dashboardCardFooter">
+      <a href="{{ url_for('object_new', slug=game.slug) }}">+ Nouvel objet →</a>
+    </div>
+  </div>
+
+  <div class="dashboardCard">
+    <h2>🧩 Éléments de jeu <span class="dashboardCardCount">{{ element_types|length }}</span></h2>
+    {% if element_types %}
+    <div class="dashboardCardList">
+      {% for t in element_types %}
+      <a class="dashboardCardItem" href="{{ url_for('screen_edit', slug=game.slug, screen_id=t.template_screen_id) }}">
+        <span>{{ t.icon or '🧩' }} {{ t.name }}</span>
+        <span class="has-text-grey">{{ element_type_usage.get(t.id, 0) }} instance(s)</span>
+      </a>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="hint">Aucun élément de jeu pour l'instant.</p>
+    {% endif %}
+    <div class="dashboardCardFooter">
+      <a href="{{ url_for('element_types', slug=game.slug) }}">Gérer les éléments de jeu →</a>
+    </div>
+  </div>
+
+  <div class="dashboardCard">
+    <h2>🔧 Variables <span class="dashboardCardCount">{{ variables|length }}</span></h2>
+    {% if variables %}
+    <div class="dashboardCardList">
+      {% for v in variables %}
+      <div class="dashboardCardItem">
+        <span>{{ v.name }}</span>
+        <span class="has-text-grey">{{ v.value or '' }}</span>
+      </div>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="hint">Aucune variable pour l'instant.</p>
+    {% endif %}
+    <div class="dashboardCardFooter">
+      <a href="{{ url_for('game_variables', slug=game.slug) }}">Gérer les variables →</a>
+    </div>
+  </div>
+</div>
+
+<div class="dangerZone" style="margin-top:24px;">
   <h3>Paramètres du jeu</h3>
   <form method="post" action="{{ url_for('game_rename', slug=game.slug) }}">
     <label for="rename">Renommer le jeu</label>
@@ -31,33 +96,5 @@
         onsubmit="return confirm('Supprimer définitivement le jeu « {{ game.name }} », son dossier et sa base de données ? Cette action est irréversible.');">
     <button type="submit" class="danger">🗑️ Supprimer ce jeu</button>
   </form>
-    </div>
-  </div>
-
-  <div class="colRight">
-    <h2>Objets définis</h2>
-    {% if definitions %}
-    <div class="fieldsTableWrap">
-      <table class="table is-fullwidth is-hoverable fieldsTable">
-        <thead>
-          <tr><th>Nom</th><th>Table SQL</th><th></th></tr>
-        </thead>
-        <tbody>
-          {% for d in definitions %}
-          <tr>
-            <td><a href="{{ url_for('object_view', slug=game.slug, definition_id=d.id) }}">{{ d.name }}</a></td>
-            <td class="has-text-grey">{{ d.table_name }}</td>
-            <td class="fieldsTableActions">
-              <a class="button is-small" href="{{ url_for('object_edit', slug=game.slug, definition_id=d.id) }}" title="Modifier cet objet">✏️</a>
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-    {% else %}
-    <p class="hint">Aucun objet défini pour l'instant — un objet, c'est comme une table de base de données : un nom, et des champs typés.</p>
-    {% endif %}
-  </div>
 </div>
 {% endblock %}

templates/game_variables.html

@@ -2,10 +2,6 @@
 {% block title %}Variables — {{ game.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li class="is-active"><a>Variables</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">Variables globales</h1>
 <p class="hint mb-4">Des propriétés/valeurs communes à tout le jeu (pas attachées à un objet de données précis) — utile par exemple pour une porte ouverte ou non, un niveau débloqué... Une variable peut être lue dans une "Condition de visibilité" (propriétés d'un élément) et modifiée par une action "Modifier une variable" (Logique de la scène).</p>

templates/index.html

@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% block title %}Forge Engine — Mes jeux{% endblock %}
-{% block breadcrumb_wrap %}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
 {% block content %}

templates/object_edit.html

@@ -2,11 +2,6 @@
 {% block title %}Modifier {{ definition.name }} — {{ game.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li><a href="{{ url_for('object_view', slug=game.slug, definition_id=definition.id) }}">{{ definition.name }}</a></li>
-<li class="is-active"><a>Modifier</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">Modifier l'objet « {{ definition.name }} »</h1>
 <p class="help mb-4">Table SQL : {{ definition.table_name }}</p>

templates/object_form.html

@@ -2,10 +2,6 @@
 {% block title %}Nouvel objet — {{ game.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li class="is-active"><a>Nouvel objet</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">Définir un nouvel objet</h1>
 

templates/screen_edit.html

@@ -6,10 +6,6 @@
 <link rel="stylesheet" href="{{ google_fonts_link }}">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
 {% endblock %}
-<!-- Pas de fil d'Ariane sur cette page : le canevas doit être monté le
-     plus haut possible (voir .content-builder), et le nom de l'écran est
-     de toute façon déjà éditable juste au-dessus (panneau "Éléments"). -->
-{% block breadcrumb_wrap %}{% endblock %}
 {% block content %}
 {% if screen.is_template %}
 <p class="hint" style="background:#1c2130; border:1px solid #2b3140; border-radius:8px; padding:10px 14px; margin:10px 0;">

templates/screens_list.html

@@ -2,10 +2,6 @@
 {% block title %}Écrans — {{ game.name }}{% endblock %}
 {% block content_class %}content-wide content-objectEdit{% endblock %}
 {% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}
-<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
-<li class="is-active"><a>Écrans</a></li>
-{% endblock %}
 {% block content %}
 <h1 class="title">Écrans du jeu</h1>
 {% if request.args.get('blocked_screen') %}