Forge-Engine/templates/game_dashboard_simple.html

{% extends "base.html" %}
{% block title %}{{ game.name }} — Écrans{% endblock %}
{% block content_class %}content-wide{% endblock %}
{% block content %}
{#- Dashboard simplifié (voir routes/games/game_dashboard.py) — un compte
   "restreint" (quiz/embranchement/rpg, voir db/games/game_type_catalog.py)
   ne voit QUE ses écrans, en cartes avec un aperçu réel de leur contenu
   (pas d'onglets Objets/Éléments de jeu/Variables, réservés à "Créer mon
   jeu de A à Z"). Ajouter un écran n'y demande pas de type : imposé par
   le projet, voir routes/screens/screens_new.py. -#}

{#- Aperçu adapté à la taille RÉELLE de la carte (pas une largeur fixe
   supposée) : container-type:inline-size + l'unité "cqw" (1% de la
   largeur du conteneur le plus proche qui la déclare) permettent à
   .screenPreviewScene de se mettre à l'échelle EXACTEMENT à la largeur
   réelle de .screenPreviewBox, quelle que soit la largeur de la grille
   ou la taille de la fenêtre — sans JS ni recalcul serveur. Le ratio de
   la boîte elle-même vient de la vraie proportion de la scène
   (scene_width/scene_height), pas de preview_aspect (propre aux écrans
   "document", sans rapport avec une scène "jeu_2d"). -#}
{% macro screen_preview(s, preview) %}
{% if preview.kind == 'jeu_2d' %}
<div class="screenPreviewBox" style="aspect-ratio:{{ s.scene_width }} / {{ s.scene_height }};">
  <div class="screenPreviewScene" style="width:{{ s.scene_width }}px; height:{{ s.scene_height }}px; --scene-w:{{ s.scene_width }}px;">
    {% for obj in preview.objects %}{{ obj.rendered_html|safe }}{% endfor %}
  </div>
  {% if not preview.objects %}<div class="screenPreviewEmpty">Écran vide</div>{% endif %}
</div>
{% else %}
<div class="screenPreviewBox" style="aspect-ratio:{{ (s.preview_aspect or '9/16')|replace('/', ' / ') }};">
  {% for el in preview.elements if not el.parent_id %}
  <div style="{{ el|elstyle }}"><div style="{{ el|eltransform }}">{{ el.rendered_html|safe }}</div></div>
  {% endfor %}
  {% if not preview.elements %}<div class="screenPreviewEmpty">Écran vide</div>{% endif %}
</div>
{% endif %}
{% endmacro %}

<div class="dashPanelHeader">
  <h2 class="title is-4 mb-0">{{ game.name }}</h2>
  <button type="button" class="button is-small primary" onclick="toggleDashCreate('screens')">+ Ajouter 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. Question 2, Scène 2...)" required autocomplete="off">
  <button type="submit" class="primary">Créer</button>
</form>

{% if screen_list %}
<div class="screenCardGrid">
  {% for s in screen_list %}
  <div class="screenCard">
    <a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}" class="screenCardPreviewLink">
      {{ screen_preview(s, previews[s.id]) }}
    </a>
    <div class="screenCardFooter">
      <a href="{{ url_for('screen_edit', slug=game.slug, screen_id=s.id) }}" class="screenCardName">
        {{ s.name }}{% if loop.first %} <span class="tag is-info is-light">★ Départ</span>{% endif %}
      </a>
      <div class="screenCardActions">
        <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" title="Monter" {{ '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" title="Descendre" {{ 'disabled' if loop.last else '' }}>↓</button></form>
        <form method="post" action="{{ url_for('screen_delete', slug=game.slug, screen_id=s.id) }}"
              onsubmit="return confirm('Supprimer l\'écran « {{ s.name }} » et tout son contenu ?');">
          <button type="submit" class="button is-small is-danger" title="Supprimer">🗑️</button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<p class="hint">Aucun écran pour l'instant — clique sur "+ Ajouter un écran" pour commencer.</p>
{% endif %}
<script src="{{ url_for('static', filename='js/game_dashboard_simple.js') }}"></script>
{% endblock %}