Remplace la création inline de variable par une page de gestion dédiée, redesign du tableau de bord du jeu

Retrait de la création rapide de variable globale depuis le sélecteur de
la Condition de visibilité (bouton "+ Créer") : une variable globale est
désormais gérée comme un objet "jeu" à part entière, avec une vraie page
CRUD ("Variables", nouvelle entrée du menu de gauche) - création, édition
du type/valeur, suppression. Le nom reste volontairement immuable après
création (c'est par ce nom qu'une condition de visibilité ou une action
"Modifier une variable" la référence - la renommer casserait ces réglages
en silence), d'où db.update_global_variable qui ne touche que type/valeur.

Redesign du tableau de bord du jeu (game_dashboard.html) en deux
colonnes : à gauche tout ce qu'on peut créer (écrans, éléments de jeu,
variables, jouer, nouvel objet) plus les paramètres du jeu (renommer/
supprimer) ; à droite ce qui a déjà été créé (objets définis). Remplace
les cartes Bulma par le système de mise en page compact déjà défini dans
style.css (.twoCol/.listRow/.dangerZone/.addBtn) mais jamais utilisé
jusqu'ici - plus dense et cohérent avec le reste de l'éditeur.

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

db/__init__.py

@@ -20,7 +20,7 @@ exécute un vrai CREATE TABLE, et remplir le formulaire généré exécute un
 vrai INSERT dans cette table.
 """
 
-from .constants import PROJECTS_DIR, FIELD_TYPES
+from .constants import PROJECTS_DIR, FIELD_TYPES, GLOBAL_VARIABLE_TYPES
 from .slugify import slugify
 from .table_name_for import table_name_for
 from .game_dir import game_dir
@@ -56,10 +56,12 @@ from .global_vars.list_global_variables import list_global_variables
 from .global_vars.get_global_variable import get_global_variable
 from .global_vars.create_global_variable import create_global_variable
 from .global_vars.update_global_variable_value import update_global_variable_value
+from .global_vars.update_global_variable import update_global_variable
 from .global_vars.delete_global_variable import delete_global_variable
+from .global_vars.delete_global_variable_by_id import delete_global_variable_by_id
 
 __all__ = [
-    "PROJECTS_DIR", "FIELD_TYPES",
+    "PROJECTS_DIR", "FIELD_TYPES", "GLOBAL_VARIABLE_TYPES",
     "slugify", "table_name_for", "game_dir", "db_path", "connect",
     "list_games", "game_meta", "create_game", "update_game_name", "delete_game",
     "list_definitions", "get_definition", "create_definition", "rename_definition",
@@ -68,5 +70,6 @@ __all__ = [
     "list_rows", "relation_options", "insert_row", "get_row", "update_row",
     "update_row_field", "delete_row", "rows_referencing",
     "list_global_variables", "get_global_variable", "create_global_variable",
-    "update_global_variable_value", "delete_global_variable",
+    "update_global_variable_value", "update_global_variable", "delete_global_variable",
+    "delete_global_variable_by_id",
 ]

db/constants.py

@@ -14,3 +14,14 @@ FIELD_TYPES = {
     "date": {"label": "Date", "sql": "TEXT"},
     "relation": {"label": "Relation vers un autre objet", "sql": "INTEGER"},
 }
+
+# Types disponibles pour une variable globale (voir db/global_vars/) — un
+# sous-ensemble de FIELD_TYPES : ni "relation" (une variable globale n'a pas
+# d'objet à pointer) ni "texte_long"/"date" (pas gérés par
+# apply_variable_action.py, qui ne coerce que ces 4 types).
+GLOBAL_VARIABLE_TYPES = {
+    "texte": FIELD_TYPES["texte"],
+    "nombre_entier": FIELD_TYPES["nombre_entier"],
+    "nombre_decimal": FIELD_TYPES["nombre_decimal"],
+    "booleen": FIELD_TYPES["booleen"],
+}

db/global_vars/delete_global_variable_by_id.py

@@ -0,0 +1,14 @@
+from ..connection import connect
+from .ensure_global_vars_schema import ensure_global_vars_schema
+
+
+def delete_global_variable_by_id(slug, var_id):
+    """Version par id de delete_global_variable — utilisée par la page de
+    gestion des variables (game_variables.html), où chaque ligne connaît son
+    id technique mais pas nécessairement un nom encore garanti unique côté
+    formulaire d'URL (espaces, accents...)."""
+    ensure_global_vars_schema(slug)
+    conn = connect(slug)
+    conn.execute("DELETE FROM _global_variables WHERE id = ?", (var_id,))
+    conn.commit()
+    conn.close()

db/global_vars/update_global_variable.py

@@ -0,0 +1,16 @@
+from ..connection import connect
+from .ensure_global_vars_schema import ensure_global_vars_schema
+
+
+def update_global_variable(slug, var_id, var_type, value):
+    """Modifie le type et la valeur d'une variable existante depuis la page
+    de gestion (voir game_variables.html) — le NOM reste volontairement
+    immuable après création : c'est par ce nom qu'une condition de
+    visibilité ou une action "Modifier une variable" la référence (voir
+    get_global_variable.py), la renommer casserait ces réglages en
+    silence."""
+    ensure_global_vars_schema(slug)
+    conn = connect(slug)
+    conn.execute("UPDATE _global_variables SET type = ?, value = ? WHERE id = ?", (var_type, str(value), var_id))
+    conn.commit()
+    conn.close()

routes/global_vars/__init__.py

@@ -1 +1,4 @@
 from .create_global_var import create_global_var
+from .game_variables import game_variables
+from .global_var_edit import global_var_edit
+from .global_var_delete import global_var_delete

routes/global_vars/create_global_var.py

@@ -1,19 +1,18 @@
-from flask import jsonify, request
+from flask import request, redirect, url_for
 
 import db
 
 from core.flask_app import app
 
 
-@app.route("/game/<slug>/global-vars", methods=["POST"])
+@app.route("/game/<slug>/variables/new", methods=["POST"])
 def create_global_var(slug):
-    """Création rapide d'une variable globale depuis le sélecteur "Variable"
-    de la Condition de visibilité (voir screen_edit.html, openVisCondVariablePrompt) —
-    évite d'avoir à quitter le panneau de propriétés pour en créer une."""
+    """Depuis la page de gestion des variables (game_variables.html) —
+    idempotent par nom (voir db.create_global_variable), donc sans risque en
+    cas de double soumission."""
     name = (request.form.get("name") or "").strip()
     var_type = request.form.get("type") or "texte"
     default_value = request.form.get("default_value") or ""
-    if not name:
-        return jsonify({"ok": False, "error": "Nom manquant"}), 400
-    var_id = db.create_global_variable(slug, name, var_type, default_value)
-    return jsonify({"ok": True, "id": var_id, "name": name})
+    if name:
+        db.create_global_variable(slug, name, var_type, default_value)
+    return redirect(url_for("game_variables", slug=slug))

routes/global_vars/game_variables.py

@@ -0,0 +1,19 @@
+from flask import render_template
+
+import db
+
+from core.flask_app import app
+
+
+@app.route("/game/<slug>/variables")
+def game_variables(slug):
+    """Page de gestion des variables globales (voir db/global_vars/) : un
+    objet "jeu" implicite dont les propriétés/valeurs sont visibles partout
+    (condition de visibilité, action "Modifier une variable"), plutôt
+    qu'attachées à un objet de données précis."""
+    game = db.game_meta(slug)
+    variables = db.list_global_variables(slug)
+    return render_template(
+        "game_variables.html", game=game, variables=variables,
+        variable_types=db.GLOBAL_VARIABLE_TYPES,
+    )

routes/global_vars/global_var_delete.py

@@ -0,0 +1,11 @@
+from flask import redirect, url_for
+
+import db
+
+from core.flask_app import app
+
+
+@app.route("/game/<slug>/variables/<int:var_id>/delete", methods=["POST"])
+def global_var_delete(slug, var_id):
+    db.delete_global_variable_by_id(slug, var_id)
+    return redirect(url_for("game_variables", slug=slug))

routes/global_vars/global_var_edit.py

@@ -0,0 +1,13 @@
+from flask import request, redirect, url_for
+
+import db
+
+from core.flask_app import app
+
+
+@app.route("/game/<slug>/variables/<int:var_id>/edit", methods=["POST"])
+def global_var_edit(slug, var_id):
+    var_type = request.form.get("type") or "texte"
+    value = request.form.get("value") or ""
+    db.update_global_variable(slug, var_id, var_type, value)
+    return redirect(url_for("game_variables", slug=slug))

templates/game_dashboard.html

@@ -1,81 +1,69 @@
 {% extends "base.html" %}
 {% block title %}{{ game.name }} — Forge Engine{% endblock %}
+{% block content_class %}content-wide{% endblock %}
 {% block breadcrumb %}<li class="is-active"><a>{{ game.name }}</a></li>{% endblock %}
 {% block content %}
 <h1 class="title">{{ game.name }}</h1>
-<p class="help mb-4">Base de données : projects/{{ game.slug }}/game.db</p>
+<p class="hint mb-4">Base de données : projects/{{ game.slug }}/game.db</p>
 
-<div class="columns">
-  <div class="column">
-    <a href="{{ url_for('screens_list', slug=game.slug) }}" class="card" style="height:100%;">
-      <div class="card-content">
-        <p class="title is-6">🖥️ Écrans du jeu</p>
-        <p class="subtitle is-7 has-text-grey">Créer et enchaîner les écrans jouables (accueil, formulaires, scènes...)</p>
-      </div>
+<div class="twoCol">
+  <div class="colLeft">
+    <h2>Créer</h2>
+    <div class="list">
+      <a href="{{ url_for('screens_list', slug=game.slug) }}" class="listRow">
+        <div class="rowTitle">🖥️ Écrans du jeu</div>
+        <div class="rowSub">Créer et enchaîner les écrans jouables (accueil, formulaires, scènes...)</div>
+      </a>
+      <a href="{{ url_for('element_types', slug=game.slug) }}" class="listRow">
+        <div class="rowTitle">🧩 Éléments de jeu</div>
+        <div class="rowSub">Catalogue réutilisable (Personnage, Outil, IA...)</div>
+      </a>
+      <a href="{{ url_for('game_variables', slug=game.slug) }}" class="listRow">
+        <div class="rowTitle">🔧 Variables</div>
+        <div class="rowSub">Valeurs globales au jeu entier (ex. porte ouverte, niveau débloqué...)</div>
+      </a>
+      <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="listRow">
+        <div class="rowTitle">▶️ Jouer</div>
+        <div class="rowSub">Aperçu jouable du jeu</div>
       </a>
     </div>
-  <div class="column">
-    <a href="{{ url_for('element_types', slug=game.slug) }}" class="card" style="height:100%;">
-      <div class="card-content">
-        <p class="title is-6">🧩 Éléments de jeu</p>
-        <p class="subtitle is-7 has-text-grey">Catalogue réutilisable (Personnage, Outil, IA...)</p>
-      </div>
-    </a>
-  </div>
-  <div class="column">
-    <a href="{{ url_for('game_play', slug=game.slug) }}" target="_blank" class="card" style="height:100%;">
-      <div class="card-content">
-        <p class="title is-6">▶️ Jouer</p>
-        <p class="subtitle is-7 has-text-grey">Aperçu jouable du jeu</p>
-      </div>
-    </a>
-  </div>
-</div>
+    <a href="{{ url_for('object_new', slug=game.slug) }}" class="addBtn">➕ Définir un nouvel objet</a>
 
-<a href="{{ url_for('object_new', slug=game.slug) }}" class="card mb-4" style="display:block;">
-  <div class="card-content">
-    <p class="title is-6">➕ Définir un nouvel objet</p>
-    <p class="subtitle is-7 has-text-grey">Comme une table de base de données : un nom, et des champs typés</p>
-  </div>
-</a>
-
-<h2 class="subtitle">Objets définis</h2>
-{% if definitions %}
-<div class="table-container">
-<table class="table is-fullwidth is-hoverable">
-  <tbody>
-  {% for d in definitions %}
-  <tr>
-    <td class="is-vcentered">
-      <a href="{{ url_for('object_view', slug=game.slug, definition_id=d.id) }}" class="has-text-weight-semibold">{{ d.name }}</a>
-      <br><span class="is-size-7 has-text-grey">table SQL : {{ d.table_name }}</span>
-    </td>
-    <td class="is-vcentered has-text-right">
-      <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="help">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 class="box has-background-danger-dark mt-5">
-  <h3 class="title is-6 has-text-danger-light">⚠️ Paramètres du jeu</h3>
-  <form method="post" action="{{ url_for('game_rename', slug=game.slug) }}" class="field has-addons">
-    <div class="control is-expanded">
-      <label class="label has-text-danger-light" for="rename">Renommer le jeu</label>
-      <input class="input" type="text" id="rename" name="game_name" value="{{ game.name }}" required autocomplete="off">
-    </div>
-    <div class="control" style="align-self:flex-end;">
-      <button type="submit" class="button">Renommer</button>
+    <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="mt-4"
+      <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="button is-danger">🗑️ Supprimer ce jeu</button>
+        <button type="submit" class="danger">🗑️ Supprimer ce jeu</button>
       </form>
+    </div>
+  </div>
+
+  <div class="colRight">
+    <h2>Objets définis</h2>
+    {% if definitions %}
+    <div class="list">
+      {% for d in definitions %}
+      <div class="listRow listRowFlex">
+        <a href="{{ url_for('object_view', slug=game.slug, definition_id=d.id) }}" class="rowLink">
+          <div class="rowTitle">{{ d.name }}</div>
+          <div class="rowSub">table SQL : {{ d.table_name }}</div>
+        </a>
+        <div class="rowActions">
+          <a class="button is-small" href="{{ url_for('object_edit', slug=game.slug, definition_id=d.id) }}" title="Modifier cet objet">✏️</a>
+        </div>
+      </div>
+      {% 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>
+    {% endif %}
+  </div>
 </div>
 {% endblock %}

templates/game_variables.html

@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+{% block title %}Variables — {{ game.name }}{% endblock %}
+{% block content_class %}content-wide{% 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>
+
+<form method="post" action="{{ url_for('create_global_var', slug=game.slug) }}" class="card">
+  <h3>Nouvelle variable</h3>
+  <div class="fieldRow">
+    <div class="formField">
+      <label for="new-var-name">Nom</label>
+      <input type="text" id="new-var-name" name="name" placeholder="ex. porte_ouverte" required autocomplete="off">
+    </div>
+    <div class="formField">
+      <label for="new-var-type">Type</label>
+      <select id="new-var-type" name="type">
+        {% for key, val in variable_types.items() %}
+        <option value="{{ key }}">{{ val.label }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="formField">
+      <label for="new-var-value">Valeur de départ</label>
+      <input type="text" id="new-var-value" name="default_value" placeholder="ex. 0" autocomplete="off">
+    </div>
+  </div>
+  <div class="actionsRow"><button type="submit" class="primary">+ Créer la variable</button></div>
+</form>
+
+<h2>Variables définies</h2>
+{% if variables %}
+<div class="list">
+  {% for v in variables %}
+  <form method="post" action="{{ url_for('global_var_edit', slug=game.slug, var_id=v.id) }}" id="varEditForm{{ v.id }}"></form>
+  <div class="listRow">
+    <div class="listRowFlex">
+      <div class="rowLink">
+        <div class="rowTitle">{{ v.name }}</div>
+        <div class="rowSub">valeur actuelle : {{ v.value if v.value is not none and v.value != '' else '(vide)' }}</div>
+      </div>
+      <div class="rowActions">
+        <select form="varEditForm{{ v.id }}" name="type" aria-label="Type de « {{ v.name }} »">
+          {% for key, val in variable_types.items() %}
+          <option value="{{ key }}" {{ 'selected' if v.type == key else '' }}>{{ val.label }}</option>
+          {% endfor %}
+        </select>
+        <input type="text" form="varEditForm{{ v.id }}" name="value" value="{{ v.value or '' }}" aria-label="Valeur de « {{ v.name }} »" style="width:120px;">
+        <button type="submit" form="varEditForm{{ v.id }}" class="smallBtn">Enregistrer</button>
+        <form method="post" action="{{ url_for('global_var_delete', slug=game.slug, var_id=v.id) }}"
+              onsubmit="return confirm('Supprimer la variable « {{ v.name }} » ? Toute condition de visibilité ou action qui la référence cessera de fonctionner.');">
+          <button type="submit" class="smallBtn danger">🗑️</button>
+        </form>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<p class="hint">Aucune variable pour l'instant — crée la première ci-dessus.</p>
+{% endif %}
+{% endblock %}

templates/screen_edit.html

@@ -449,7 +449,7 @@
             </div>
           </div>
           {% if c.key == 'visibilite_cond_variable' %}
-          <button type="button" class="button is-small is-fullwidth" style="margin-top:6px;" onclick="createVisCondVariable()">+ Créer une nouvelle variable</button>
+          <p class="help">Pas la variable qu'il te faut ? <a href="{{ url_for('game_variables', slug=game.slug) }}" target="_blank">Gérer les variables du jeu ↗</a></p>
           {% endif %}
           {% endif %}
           {% endif %}
@@ -1530,27 +1530,6 @@ function bindJaugeDefinitionSelect() {
 // globale, ou champ d'un objet) — les deux autres restent en base (peu
 // importe, seul le mode courant est lu par is_element_visible()) mais sont
 // masqués pour ne pas embrouiller. ----------
-function createVisCondVariable() {
-  var name = window.prompt("Nom de la nouvelle variable globale (ex. niveau_debloque) :");
-  if (!name || !name.trim()) return;
-  var body = new URLSearchParams({ name: name.trim(), type: 'texte', default_value: '' });
-  fetch("{{ url_for('create_global_var', slug=game.slug) }}", { method: 'POST', body: body })
-    .then(function (r) { return r.json(); })
-    .then(function (json) {
-      if (!json.ok) { window.alert(json.error || "Échec de la création."); return; }
-      var sel = document.getElementById('field-visibilite_cond_variable');
-      if (!sel) return;
-      if (!sel.querySelector('option[value="' + CSS.escape(json.name) + '"]')) {
-        var opt = document.createElement('option');
-        opt.value = json.name;
-        opt.textContent = json.name;
-        sel.appendChild(opt);
-      }
-      sel.value = json.name;
-      submitPropsForm();
-    });
-}
-
 function toggleVisCondFields(sel) {
   var mode = sel.value;
   document.querySelectorAll('.visCondRow').forEach(function (row) {