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,
-   breadcrumb) — ces classes ne servent plus qu'à les repérer dans les
-   layouts plein-écran (body.builderBody/objectEditBody, voir plus bas) et à
-   les rattacher au thème sombre. */
+/* .topbar : Bulma fournit déjà la mise en page (navbar) — cette classe ne
+   sert plus qu'à la repérer dans les layouts plein-écran
+   (body.builderBody/objectEditBody, voir plus bas) et à la rattacher au
+   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
-     "Créer" sur game_dashboard.html, dont elle reprend exactement les
-     liens) — sans elle, changer d'éditeur (écrans, éléments de jeu,
-     variables, objets) obligeait à repasser par le tableau de bord du jeu à
-     chaque fois. N'apparaît que si la route a mis un `game` dans le
-     contexte du template (toutes les pages d'un jeu le font déjà, pour la
-     miette de pain) — absente sur l'accueil (liste des jeux), où il n'y a
-     pas de jeu courant. -->
+<!-- Barre toujours visible entre les différents éditeurs d'UN MÊME jeu —
+     sans elle, changer d'éditeur (écrans, éléments de jeu, variables,
+     objets) obligeait à repasser par le tableau de bord du jeu à chaque
+     fois. Remplace le fil d'Ariane (retiré, devenu redondant avec elle) :
+     N'apparaît que si la route a mis un `game` dans le contexte du
+     template (déjà fait par toutes les pages d'un jeu) — absente sur
+     l'accueil (liste des jeux), où il n'y a pas de jeu courant. "Jouer"
+     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,63 +1,100 @@
 {% extends "base.html" %}
 {% block title %}{{ game.name }} — Forge Engine{% endblock %}
-{% block content_class %}content-wide content-objectEdit{% endblock %}
-{% block body_class %}objectEditBody{% endblock %}
-{% block breadcrumb %}<li class="is-active"><a>{{ game.name }}</a></li>{% endblock %}
+{% block content_class %}content-wide{% 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="colLeft">
-    <h2>Créer</h2>
-    <div class="navList">
-      <a href="{{ url_for('screens_list', slug=game.slug) }}" class="navRow" title="Créer et enchaîner les écrans jouables">🖥️ Écrans du jeu</a>
-      <a href="{{ url_for('element_types', slug=game.slug) }}" class="navRow" title="Catalogue réutilisable (Personnage, Outil, IA...)">🧩 Éléments de jeu</a>
-      <a href="{{ url_for('game_variables', slug=game.slug) }}" class="navRow" title="Valeurs globales au jeu entier">🔧 Variables</a>
-      <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="navRow" title="Aperçu jouable du jeu">▶️ Jouer</a>
-      <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>
-    </div>
-
-    <div class="dangerZone">
-      <h3>Paramètres du jeu</h3>
-      <form method="post" action="{{ url_for('game_rename', slug=game.slug) }}">
-        <label for="rename">Renommer le jeu</label>
-        <div class="fieldRow">
-          <input type="text" id="rename" name="game_name" value="{{ game.name }}" required autocomplete="off">
-          <button type="submit">Renommer</button>
-        </div>
-      </form>
-      <form method="post" action="{{ url_for('game_delete', slug=game.slug) }}" class="actionsRow"
-            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 class="dashboardGrid">
+  <div class="dashboardCard">
+    <h2>🖥️ Écrans du jeu <span class="dashboardCardCount">{{ screen_list|length }}</span></h2>
+    {% if screen_list %}
+    <div class="dashboardCardList">
+      {% for s in screen_list %}
+      <a class="dashboardCardItem" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">
+        <span>{{ s.name }}</span>
+        {% if loop.first %}<span class="tag is-info is-light">★ Départ</span>{% endif %}
+      </a>
+      {% endfor %}
     </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>
+    <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="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>
+    <div class="fieldRow">
+      <input type="text" id="rename" name="game_name" value="{{ game.name }}" required autocomplete="off">
+      <button type="submit">Renommer</button>
+    </div>
+  </form>
+  <form method="post" action="{{ url_for('game_delete', slug=game.slug) }}" class="actionsRow"
+        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>
 {% 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') %}