Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Dev #2

Merged
w-vandal merged 24 commits from dev into main 2026-08-27 13:00:44 +00:00
Conversation 0 Commits 24 Files Changed 49
+216 -91
3 changed files with 216 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 65450a5719 - Show all commits
routes/games/game_dashboard.py
+1
View File
@@ -24,4 +24,5 @@ def game_dashboard(slug):
"game_dashboard.html", game=game, definitions=definitions,
screen_list=screen_list, element_types=element_types,
element_type_usage=element_type_usage, variables=variables,
variable_types=db.GLOBAL_VARIABLE_TYPES,
)
static/style.css
+13 -13
View File
@@ -494,16 +494,16 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
.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; }
/* Une seule fenêtre, un onglet par catégorie (écrans/objets/éléments de
jeu/variables) — réutilise .builderTabs/.builderTabBtn/.builderTabPanel
(voir plus bas, éditeur d'écran) pour la même sensation de "fenêtre à
onglets" qu'ailleurs dans l'outil, plutôt que d'inventer un 2e système.
Contrairement à leur usage dans l'éditeur d'écran, ici la page défile
normalement (pas de hauteur figée) : une liste peut être longue, pas
besoin d'un défilement interne séparé par panneau. */
.dashTabCount{ font-size:10px; color:var(--text-dim); background:var(--panel2); border-radius:999px; padding:1px 6px; margin-left:4px; }
.dashPanelHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.dashPanelHeader h2{ margin:0; }
.dashCreateBar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.dashCreateBar input, .dashCreateBar select{ width:auto; flex:1 1 160px; }
.dashDangerZone{ margin-top:28px; }
templates/game_dashboard.html
+202 -78
View File
@@ -3,87 +3,192 @@
{% 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>
<p class="hint mb-3">Base de données : projects/{{ game.slug }}/game.db</p>
<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 é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>
<!-- Une seule fenêtre, un onglet par catégorie (même principe que les
onglets "Écran / Logique / Timeline" de l'éditeur d'écran, voir
.builderTabs/.builderTabBtn/.builderTabPanel dans style.css) — pour
naviguer entre écrans/objets/éléments de jeu/variables sans jamais
changer de page, avec à chaque fois un vrai tableau (dense, colonnes
nettes) plutôt que des cartes compactes. -->
<div class="builderTabs" id="dashTabs">
<button type="button" class="builderTabBtn active" data-tab="screens" onclick="switchDashTab('screens')">🖥️ Écrans du jeu <span class="dashTabCount">{{ screen_list|length }}</span></button>
<button type="button" class="builderTabBtn" data-tab="objects" onclick="switchDashTab('objects')">🗂️ Objets <span class="dashTabCount">{{ definitions|length }}</span></button>
<button type="button" class="builderTabBtn" data-tab="element_types" onclick="switchDashTab('element_types')">🧩 Éléments de jeu <span class="dashTabCount">{{ element_types|length }}</span></button>
<button type="button" class="builderTabBtn" data-tab="variables" onclick="switchDashTab('variables')">🔧 Variables <span class="dashTabCount">{{ variables|length }}</span></button>
</div>
<div class="dangerZone" style="margin-top:24px;">
<!-- ---------- Écrans ---------- -->
<div class="builderTabPanel active" data-tab-panel="screens">
<div class="dashPanelHeader">
<h2>Écrans du jeu</h2>
<button type="button" class="button is-small primary" onclick="toggleDashCreate('screens')">+ Créer 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. Accueil, Scène 1...)" required autocomplete="off">
<button type="submit" class="primary">Créer</button>
</form>
{% if screen_list %}
<div class="fieldsTableWrap">
<table class="table is-fullwidth is-hoverable fieldsTable">
<thead><tr><th>#</th><th>Nom</th><th></th></tr></thead>
<tbody>
{% for s in screen_list %}
<tr>
<td>{{ loop.index }}</td>
<td>
<a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">{{ s.name }}</a>
{% if loop.first %} <span class="tag is-info is-light">★ Départ</span>{% endif %}
</td>
<td class="fieldsTableActions">
<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" {{ '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" {{ 'disabled' if loop.last else '' }}>↓</button></form>
<a class="button is-small" href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}">✏️</a>
<form method="post" action="{{ url_for('screen_delete', slug=game.slug, screen_id=s.id) }}"
onsubmit="return confirm('Supprimer l\'écran « {{ s.name }} » et tous ses éléments ?');">
<button type="submit" class="button is-small is-danger">🗑️</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="hint">Aucun écran pour l'instant.</p>
{% endif %}
</div>
<!-- ---------- Objets ---------- -->
<div class="builderTabPanel" data-tab-panel="objects">
<div class="dashPanelHeader">
<h2>Objets</h2>
<a class="button is-small primary" href="{{ url_for('object_new', slug=game.slug) }}">+ Nouvel objet</a>
</div>
<p class="hint mb-2">Un objet a des champs typés (nombre, texte, relation...) — sa création se fait sur sa propre page.</p>
{% 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 pour l'instant.</p>
{% endif %}
</div>
<!-- ---------- Éléments de jeu ---------- -->
<div class="builderTabPanel" data-tab-panel="element_types">
<div class="dashPanelHeader">
<h2>Éléments de jeu</h2>
<button type="button" class="button is-small primary" onclick="toggleDashCreate('element_types')">+ Créer un élément de jeu</button>
</div>
<form method="post" action="{{ url_for('element_types', slug=game.slug) }}" class="dashCreateBar" id="dashCreate-element_types" style="display:none;">
<input type="text" name="icon" value="🧩" maxlength="4" style="max-width:60px;" title="Icône">
<input type="text" name="name" placeholder="Nom (ex. Personnage, Carte mail...)" required autocomplete="off">
<select name="bound_definition_id">
<option value="">(aucun objet lié)</option>
{% for d in definitions %}
<option value="{{ d.id }}">{{ d.name }}</option>
{% endfor %}
</select>
<button type="submit" class="primary">Créer</button>
</form>
{% if element_types %}
<div class="fieldsTableWrap">
<table class="table is-fullwidth is-hoverable fieldsTable">
<thead><tr><th>Nom</th><th>Usage</th><th></th></tr></thead>
<tbody>
{% for t in element_types %}
<tr>
<td>{{ t.icon or '🧩' }} {{ t.name }}</td>
<td class="has-text-grey">
{{ element_type_usage.get(t.id, 0) }} instance(s)
{% if t.bound_definition_id %}
{% for d in definitions %}{% if d.id == t.bound_definition_id %} · « {{ d.name }} »{% endif %}{% endfor %}
{% endif %}
</td>
<td class="fieldsTableActions">
<a class="button is-small" href="{{ url_for('screen_edit', slug=game.slug, screen_id=t.template_screen_id) }}" title="Modifier le contenu de cet élément de jeu">✏️</a>
<form method="post" action="{{ url_for('element_type_delete', slug=game.slug, element_type_id=t.id) }}"
onsubmit="return confirm('Supprimer l\'élément de jeu « {{ t.name }} » du catalogue (et tout son contenu) ?');">
<button type="submit" class="button is-small is-danger" {{ 'disabled title="Utilisé sur un écran — retire-le des écrans d\'abord"' if element_type_usage.get(t.id, 0) > 0 else '' }}>🗑️</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="hint">Aucun élément de jeu pour l'instant.</p>
{% endif %}
</div>
<!-- ---------- Variables ---------- -->
<div class="builderTabPanel" data-tab-panel="variables">
<div class="dashPanelHeader">
<h2>Variables</h2>
<button type="button" class="button is-small primary" onclick="toggleDashCreate('variables')">+ Créer une variable</button>
</div>
<form method="post" action="{{ url_for('create_global_var', slug=game.slug) }}" class="dashCreateBar" id="dashCreate-variables" style="display:none;">
<input type="text" name="name" placeholder="Nom (ex. porte_ouverte)" required autocomplete="off">
<select name="type">
{% for key, val in variable_types.items() %}
<option value="{{ key }}">{{ val.label }}</option>
{% endfor %}
</select>
<input type="text" name="default_value" placeholder="Valeur de départ">
<button type="submit" class="primary">Créer</button>
</form>
{% if variables %}
{% 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>
{% endfor %}
<div class="fieldsTableWrap">
<table class="table is-fullwidth is-hoverable fieldsTable">
<thead><tr><th>Nom</th><th>Type</th><th>Valeur</th><th></th></tr></thead>
<tbody>
{% for v in variables %}
<tr>
<td>{{ v.name }}</td>
<td>
<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>
</td>
<td><input type="text" form="varEditForm{{ v.id }}" name="value" value="{{ v.value or '' }}" aria-label="Valeur de « {{ v.name }} »"></td>
<td class="fieldsTableActions">
<button type="submit" form="varEditForm{{ v.id }}" class="button is-small">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="button is-small is-danger">🗑️</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="hint">Aucune variable pour l'instant.</p>
{% endif %}
</div>
<div class="dangerZone dashDangerZone">
<h3>Paramètres du jeu</h3>
<form method="post" action="{{ url_for('game_rename', slug=game.slug) }}">
<label for="rename">Renommer le jeu</label>
@@ -97,4 +202,23 @@
<button type="submit" class="danger">🗑️ Supprimer ce jeu</button>
</form>
</div>
<script>
function switchDashTab(tab) {
document.querySelectorAll('#dashTabs .builderTabBtn').forEach(function (btn) {
btn.classList.toggle('active', btn.dataset.tab === tab);
});
document.querySelectorAll('.builderTabPanel').forEach(function (panel) {
panel.classList.toggle('active', panel.dataset.tabPanel === tab);
});
}
function toggleDashCreate(tab) {
var bar = document.getElementById('dashCreate-' + tab);
bar.style.display = bar.style.display === 'none' ? 'flex' : 'none';
if (bar.style.display === 'flex') {
var firstInput = bar.querySelector('input, select');
if (firstInput) firstInput.focus();
}
}
</script>
{% endblock %}