From 8f4516920958abd2babe2c8be66630e2046a1d7b Mon Sep 17 00:00:00 2001 From: william Date: Thu, 27 Aug 2026 10:04:09 +0200 Subject: [PATCH] =?UTF-8?q?Retire=20le=20fil=20d'Ariane,=20centre/r=C3=A9o?= =?UTF-8?q?rdonne=20la=20barre=20de=20nav,=20refait=20le=20dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- routes/games/game_dashboard.py | 17 +++- static/style.css | 30 +++++-- templates/base.html | 28 +++---- templates/data_form.html | 5 -- templates/data_list.html | 4 - templates/element_types.html | 4 - templates/game_dashboard.html | 139 +++++++++++++++++++++------------ templates/game_variables.html | 4 - templates/index.html | 1 - templates/object_edit.html | 5 -- templates/object_form.html | 4 - templates/screen_edit.html | 4 - templates/screens_list.html | 4 - 13 files changed, 137 insertions(+), 112 deletions(-) diff --git a/routes/games/game_dashboard.py b/routes/games/game_dashboard.py index f46eb42d..de93aaee 100644 --- a/routes/games/game_dashboard.py +++ b/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/") 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, + ) diff --git a/static/style.css b/static/style.css index 8e048fdc..23dd0df4 100644 --- a/static/style.css +++ b/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; } diff --git a/templates/base.html b/templates/base.html index 594a1966..b5f0602f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,30 +15,24 @@ {% if game is defined and game %} - + {% endif %} -{% block breadcrumb_wrap %} - -{% endblock %}
{% block content %}{% endblock %}
diff --git a/templates/data_form.html b/templates/data_form.html index 88cc759c..da8898a0 100644 --- a/templates/data_form.html +++ b/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 %} -
  • {{ game.name }}
    • -
  • {{ definition.name }}
    • -
  • {{ 'Modifier #' ~ row.id if row else 'Nouvelle entrée' }}
    • -{% endblock %} {% block content %}

    {{ 'Modifier l\'entrée #' ~ row.id if row else 'Ajouter une entrée' }} — {{ definition.name }}

    diff --git a/templates/data_list.html b/templates/data_list.html index 0f9855e1..8a045664 100644 --- a/templates/data_list.html +++ b/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 %} -
  • {{ game.name }}
    • -
  • {{ definition.name }}
    • -{% endblock %} {% block content %}

    {{ definition.name }} ✏️ diff --git a/templates/element_types.html b/templates/element_types.html index 7e0c26bb..6cdf30e2 100644 --- a/templates/element_types.html +++ b/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 %} -
  • {{ game.name }}
    • -
  • Éléments de jeu
    • -{% endblock %} {% block content %}

    Éléments de jeu

    Un élément de jeu est un conteneur réutilisable.

    diff --git a/templates/game_dashboard.html b/templates/game_dashboard.html index 54fb5922..aae0ef67 100644 --- a/templates/game_dashboard.html +++ b/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 %}
  • {{ game.name }}
    • {% endblock %} +{% block content_class %}content-wide{% endblock %} {% block content %}

    {{ game.name }}

    Base de données : projects/{{ game.slug }}/game.db

    -
    -
    -

    Créer

    -
    - 🖥️ Écrans du jeu - 🧩 Éléments de jeu - 🔧 Variables - ▶️ Jouer - 🗂️ Objet -
    - -
    -

    Paramètres du jeu

    -
    - -
    - - -
    -
    -
    - -
    -
    -
    - -
    -

    Objets définis

    - {% if definitions %} -
    - - - - - - {% for d in definitions %} - - - - - - {% endfor %} - -
    NomTable SQL
    {{ d.name }}{{ d.table_name }} - ✏️ -
    +
    +
    +

    🖥️ Écrans du jeu {{ screen_list|length }}

    + {% if screen_list %} +
    + {% for s in screen_list %} + + {{ s.name }} + {% if loop.first %}★ Départ{% endif %} + + {% endfor %}
    {% else %} -

    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.

    +

    Aucun écran pour l'instant.

    {% endif %} +
    + Gérer les écrans → +
    +
    + +
    +

    🗂️ Objets {{ definitions|length }}

    + {% if definitions %} +
    + {% for d in definitions %} + + {{ d.name }} + {{ d.table_name }} + + {% endfor %} +
    + {% else %} +

    Aucun objet pour l'instant.

    + {% endif %} +
    + + Nouvel objet → +
    +
    + +
    +

    🧩 Éléments de jeu {{ element_types|length }}

    + {% if element_types %} +
    + {% for t in element_types %} + + {{ t.icon or '🧩' }} {{ t.name }} + {{ element_type_usage.get(t.id, 0) }} instance(s) + + {% endfor %} +
    + {% else %} +

    Aucun élément de jeu pour l'instant.

    + {% endif %} +
    + Gérer les éléments de jeu → +
    +
    + +
    +

    🔧 Variables {{ variables|length }}

    + {% if variables %} +
    + {% for v in variables %} +
    + {{ v.name }} + {{ v.value or '' }} +
    + {% endfor %} +
    + {% else %} +

    Aucune variable pour l'instant.

    + {% endif %} +
    + Gérer les variables → +
    + +
    +

    Paramètres du jeu

    +
    + +
    + + +
    +
    +
    + +
    +
    {% endblock %} diff --git a/templates/game_variables.html b/templates/game_variables.html index 5af74bcf..ff0e0994 100644 --- a/templates/game_variables.html +++ b/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 %} -
  • {{ game.name }}
    • -
  • Variables
    • -{% endblock %} {% block content %}

    Variables globales

    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).

    diff --git a/templates/index.html b/templates/index.html index 0f1b71fa..0beacafb 100644 --- a/templates/index.html +++ b/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 %} diff --git a/templates/object_edit.html b/templates/object_edit.html index 8f6db622..a7cd4718 100644 --- a/templates/object_edit.html +++ b/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 %} -
  • {{ game.name }}
    • -
  • {{ definition.name }}
    • -
  • Modifier
    • -{% endblock %} {% block content %}

    Modifier l'objet « {{ definition.name }} »

    Table SQL : {{ definition.table_name }}

    diff --git a/templates/object_form.html b/templates/object_form.html index 4d0fa670..4569e23f 100644 --- a/templates/object_form.html +++ b/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 %} -
  • {{ game.name }}
    • -
  • Nouvel objet
    • -{% endblock %} {% block content %}

    Définir un nouvel objet

    diff --git a/templates/screen_edit.html b/templates/screen_edit.html index 45a873e0..13dd33e0 100644 --- a/templates/screen_edit.html +++ b/templates/screen_edit.html @@ -6,10 +6,6 @@ {% endblock %} - -{% block breadcrumb_wrap %}{% endblock %} {% block content %} {% if screen.is_template %}

    diff --git a/templates/screens_list.html b/templates/screens_list.html index ad429be1..2224d52e 100644 --- a/templates/screens_list.html +++ b/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 %} -

  • {{ game.name }}
    • -
  • Écrans
    • -{% endblock %} {% block content %}

    Écrans du jeu

    {% if request.args.get('blocked_screen') %}