Quêtes/collision : personnages nommés, dialogues qui parlent, boîte de dialogue en jeu

- "ℹ️ Informations" (propriétés d'un personnage) : nom éditable, réutilisé
  comme "qui parle" dans l'éditeur de dialogue de quête (menu déroulant,
  plus "Joueur" toujours disponible) — remplace l'ancien choix binaire
  joueur/pnj. db.sanitize_quest_dialogues accepte maintenant un nom libre.

- Nouveau menu "🖥️ Interface" (palette d'objets) avec le premier widget :
  "💬 Boîte de dialogue" (kind="dialogue_box", screens/rendering/
  dialogue_box_style.py) — position/taille comme tout objet de scène,
  panneau "🎨 Style" dédié (police, taille, épaisseur, couleur du texte,
  couleur header/body/footer). Rendu en <div> à 3 zones, jamais soumis à
  la collision ni à l'éditeur de collision (exclu partout : obstacles,
  liste des règles, payload). Rendu côté jeu dans .sceneUI, une couche
  FIXE au viewport (jamais .sceneWorld, qui défile avec la caméra).

- static/js/play/dialogue-box-controller.js : fait le lien moteur entre
  l'action "quete" de l'éditeur de collision et ce widget — affiche la
  réplique en cours du dialogue correspondant au STATUT ACTUEL de la
  quête (gameData.quests, désormais exposé game-wide par
  full_game_payload.py), avance au clic sur "Suivant" (header = qui
  parle, body = texte, footer = bouton), se masque à la dernière réplique.

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

screens/scenes/render_scene_object.py

@@ -1,6 +1,7 @@
 import html as html_lib
 
 from ..rendering.personnage_data import resolve_personnage_idle_frame
+from ..rendering.dialogue_box_style import resolve_dialogue_box_style
 
 
 def render_scene_object(obj):
@@ -39,6 +40,31 @@ def render_scene_object(obj):
     # remplirait quand même son cadre (width/height:100%, voir la règle
     # `.canvasElementInner > img` dans scene_edit.html) mais DÉFORMÉE,
     # rendant le personnage minuscule/écrasé dans sa boîte de sélection.
+    if obj["kind"] == "dialogue_box":
+        # Widget d'interface (voir "🖥️ Interface" + screens/rendering/
+        # dialogue_box_style.py) : un <div> à 3 zones, pas un <img> — voir
+        # static/js/play/dialogue-box-controller.js pour comment header/
+        # body/footer sont remplis EN JEU (data-dialogue-role sert de
+        # sélecteur), masqué par défaut au jeu (voir static/style.css,
+        # `.playScreen .dialogueBoxWidget`) jusqu'à ce qu'une règle de
+        # collision "quete" ait un dialogue à afficher. Toujours VISIBLE
+        # dans l'éditeur (avec un texte d'exemple) pour pouvoir le
+        # positionner/styliser.
+        style = resolve_dialogue_box_style(obj)
+        box_style = (
+            f"position:absolute; left:{obj['x']}px; top:{obj['y']}px; "
+            f"width:{obj['width']}px; height:{obj['height']}px; z-index:{obj['z_index']}; "
+            f"font-family:{html_lib.escape(style['font_family'])}; font-size:{style['font_size']}px; "
+            f"font-weight:{style['font_weight']}; color:{html_lib.escape(style['text_color'])};"
+        )
+        return (
+            f'<div class="dialogueBoxWidget" data-object-id="{obj["id"]}" data-element-id="{obj["id"]}" style="{box_style}">'
+            f'<div class="dialogueBoxHeader" data-dialogue-role="header" style="background:{html_lib.escape(style["header_bg"])}">Nom du personnage</div>'
+            f'<div class="dialogueBoxBody" data-dialogue-role="body" style="background:{html_lib.escape(style["body_bg"])}">Le texte du dialogue s\'affiche ici.</div>'
+            f'<div class="dialogueBoxFooter" style="background:{html_lib.escape(style["footer_bg"])}">'
+            f'<button type="button" class="dialogueBoxNextBtn" data-dialogue-role="next-btn" onclick="forgeDialogueBoxAdvance({obj["id"]})">Suivant →</button>'
+            f'</div></div>'
+        )
     if obj["kind"] == "personnage":
         src = resolve_personnage_idle_frame(obj)
         src_attr = f' src="{html_lib.escape(src)}"' if src else ""