Quêtes : bulle "❓ Question" à choix multiples, à côté de "+ Réplique"

Nouveau type de ligne dans un dialogue de quête (voir
db/quests/sanitize_quest_dialogues.py) : une bulle JAUNE, dans la même
chaîne verticale que les répliques (même alignement, reliée par un
trait) — header : nombre de choix (2 à 8) + récompense (score, montant
en points) ; body : la question, ses choix et un bouton radio pour
désigner la bonne réponse. Aucune limite au nombre de questions par
colonne, comme pour une réplique.

Les lignes de dialogue portent maintenant explicitement
{"type": "dialogue", ...} (au lieu d'un objet sans type) pour
distinguer les deux formes — migration de forme, tests mis à jour.

Portée de ce commit : l'ÉDITEUR (créer/modifier une question). Le jeu
lui-même (afficher la question au joueur, vérifier la réponse,
attribuer la récompense) reste à construire — le widget "💬 Boîte de
dialogue" ne sait aujourd'hui afficher qu'une réplique.

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

static/js/quests/quest-editor.js

@@ -231,14 +231,66 @@ function questDialogueBubbleHtml(line, status, index) {
   );
 }
 
+function questEscAttr(str) {
+  return (str || '').replace(/"/g, '"');
+}
+
+// "❓ Question" — une bulle JAUNE dans la même chaîne qu'une réplique de
+// dialogue (même colonne, même alignement vertical relié par un trait,
+// voir .questBubbleRow/.questBubble ci-dessus et static/style.css) mais
+// un type de ligne différent (voir db/quests/sanitize_quest_dialogues.py) :
+// header = nombre de choix + récompense (type + montant), body = la
+// question et ses choix, avec la bonne réponse cochée. Aucune limite au
+// nombre de questions par colonne (voir questAddQuestion), comme pour
+// une réplique.
+function questQuestionChoiceRowHtml(choice, choiceIndex, correctIndex, status, index) {
+  var radioName = 'questCorrect-' + status + '-' + index;
+  return (
+    '<div class="questChoiceRow">' +
+      '<input type="radio" name="' + radioName + '" class="questChoiceRadio" title="Bonne réponse" ' +
+        (choiceIndex === correctIndex ? 'checked' : '') +
+        ' onchange="questSetQuestionCorrectIndex(\'' + status + '\', ' + index + ', ' + choiceIndex + ')">' +
+      '<input type="text" class="questChoiceInput" placeholder="Choix ' + (choiceIndex + 1) + '" value="' + questEscAttr(choice) + '" ' +
+        'onchange="questSetQuestionChoiceText(\'' + status + '\', ' + index + ', ' + choiceIndex + ', this.value)">' +
+    '</div>'
+  );
+}
+
+function questQuestionBubbleHtml(line, status, index) {
+  var choicesHtml = line.choices.map(function (c, i) { return questQuestionChoiceRowHtml(c, i, line.correct_index, status, index); }).join('');
+  return (
+    '<div class="questBubbleRow">' +
+      '<div class="questBubble questBubble-question">' +
+        '<div class="questBubbleHeader">' +
+          '<label class="questQuestionHeaderField" title="Nombre de choix">🔢 <input type="number" min="2" max="8" value="' + line.choices.length + '" ' +
+            'onchange="questSetQuestionChoiceCount(\'' + status + '\', ' + index + ', this.value)"></label>' +
+          '<label class="questQuestionHeaderField" title="Récompense (points de score)">🏆 <input type="number" min="0" value="' + line.reward_amount + '" ' +
+            'onchange="questSetQuestionRewardAmount(\'' + status + '\', ' + index + ', this.value)"> pts</label>' +
+          '<button type="button" class="questBubbleDelete" title="Supprimer" onclick="questDeleteBubble(\'' + status + '\', ' + index + ')">✕</button>' +
+        '</div>' +
+        '<div class="questBubbleBody">' +
+          '<input type="text" class="questQuestionText" placeholder="Question..." value="' + questEscAttr(line.text) + '" ' +
+            'onchange="questUpdateQuestionText(\'' + status + '\', ' + index + ', this.value)">' +
+          '<div class="questChoicesList">' + choicesHtml + '</div>' +
+        '</div>' +
+      '</div>' +
+    '</div>'
+  );
+}
+
 function questDialogueColumnHtml(quest, status) {
   var lines = (quest.dialogues && quest.dialogues[status]) || [];
-  var bubblesHtml = lines.map(function (line, i) { return questDialogueBubbleHtml(line, status, i); }).join('');
+  var bubblesHtml = lines.map(function (line, i) {
+    return line.type === 'question' ? questQuestionBubbleHtml(line, status, i) : questDialogueBubbleHtml(line, status, i);
+  }).join('');
   return (
     '<div class="questDialogueColumn">' +
       '<h4 class="questDialogueColumnTitle">' + QUEST_STATUS_LABELS[status] + '</h4>' +
       '<div class="questDialogueColumnBubbles" id="questDialogueColumn-' + status + '">' + bubblesHtml + '</div>' +
-      '<button type="button" class="collisionRuleAddBtn questDialogueAddBtn" onclick="questAddBubble(\'' + status + '\')">✚ Réplique</button>' +
+      '<div class="questDialogueColumnButtons">' +
+        '<button type="button" class="collisionRuleAddBtn questDialogueAddBtn" onclick="questAddBubble(\'' + status + '\')">✚ Réplique</button>' +
+        '<button type="button" class="collisionRuleAddBtn questDialogueAddBtn questQuestionAddBtn" onclick="questAddQuestion(\'' + status + '\')">❓ Question</button>' +
+      '</div>' +
     '</div>'
   );
 }
@@ -351,11 +403,69 @@ function questAddBubble(status) {
   quest.dialogues = quest.dialogues || {};
   var lines = quest.dialogues[status] || (quest.dialogues[status] = []);
   var lastSpeaker = lines.length ? lines[lines.length - 1].speaker : 'PNJ';
-  lines.push({ speaker: questNextDefaultSpeaker(lastSpeaker), text: '' });
+  lines.push({ type: 'dialogue', speaker: questNextDefaultSpeaker(lastSpeaker), text: '' });
   renderQuestDialogueModalBody(quest.id);
   questSaveDialogues(quest);
 }
 
+// "❓ Question" — voir questQuestionBubbleHtml ci-dessus. Défauts : 2
+// choix vides, la 1ère cochée bonne réponse, récompense "score" à 0 pt
+// (l'auteur règle le montant dans le header de la bulle).
+function questAddQuestion(status) {
+  var quest = questById(_currentQuestModalId());
+  if (!quest) return;
+  quest.dialogues = quest.dialogues || {};
+  var lines = quest.dialogues[status] || (quest.dialogues[status] = []);
+  lines.push({ type: 'question', text: '', choices: ['', ''], correct_index: 0, reward_type: 'score', reward_amount: 0 });
+  renderQuestDialogueModalBody(quest.id);
+  questSaveDialogues(quest);
+}
+
+function questUpdateQuestionText(status, index, text) {
+  var quest = questById(_currentQuestModalId());
+  if (!quest) return;
+  quest.dialogues[status][index].text = text;
+  questSaveDialogues(quest);
+}
+
+// Ajuste le NOMBRE de choix (2 à 8, voir db/quests/sanitize_quest_dialogues.py
+// ::_MIN_CHOICES/_MAX_CHOICES) : ajoute des choix vides ou retire les
+// derniers, sans jamais toucher aux choix déjà remplis qui restent dans
+// la nouvelle taille. Recadre la bonne réponse sur le premier choix si
+// elle pointait vers un choix retiré.
+function questSetQuestionChoiceCount(status, index, value) {
+  var quest = questById(_currentQuestModalId());
+  if (!quest) return;
+  var line = quest.dialogues[status][index];
+  var count = Math.max(2, Math.min(8, parseInt(value, 10) || 2));
+  while (line.choices.length < count) line.choices.push('');
+  while (line.choices.length > count) line.choices.pop();
+  if (line.correct_index >= line.choices.length) line.correct_index = 0;
+  renderQuestDialogueModalBody(quest.id);
+  questSaveDialogues(quest);
+}
+
+function questSetQuestionChoiceText(status, index, choiceIndex, text) {
+  var quest = questById(_currentQuestModalId());
+  if (!quest) return;
+  quest.dialogues[status][index].choices[choiceIndex] = text;
+  questSaveDialogues(quest);
+}
+
+function questSetQuestionCorrectIndex(status, index, choiceIndex) {
+  var quest = questById(_currentQuestModalId());
+  if (!quest) return;
+  quest.dialogues[status][index].correct_index = choiceIndex;
+  questSaveDialogues(quest);
+}
+
+function questSetQuestionRewardAmount(status, index, value) {
+  var quest = questById(_currentQuestModalId());
+  if (!quest) return;
+  quest.dialogues[status][index].reward_amount = Math.max(0, parseInt(value, 10) || 0);
+  questSaveDialogues(quest);
+}
+
 function questSetBubbleSpeaker(status, index, speaker) {
   var quest = questById(_currentQuestModalId());
   if (!quest) return;

static/style.css

@@ -854,7 +854,9 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
    CETTE zone défile (flex:1 + overflow-y:auto) — le titre de colonne et
    le bouton "+ Réplique" restent fixes, en haut/en bas. */
 .questDialogueColumnBubbles{ display:flex; flex-direction:column; align-items:center; flex:1; min-height:0; overflow-y:auto; padding-top:4px; }
-.questDialogueAddBtn{ flex:0 0 auto; align-self:center; padding:6px 14px; font-size:12px; margin-top:4px; }
+.questDialogueColumnButtons{ flex:0 0 auto; display:flex; gap:8px; justify-content:center; margin-top:4px; }
+.questDialogueAddBtn{ align-self:center; padding:6px 14px; font-size:12px; }
+.questQuestionAddBtn{ background:linear-gradient(135deg, #e0b93d, #b8890f); }
 
 .questBubbleRow{ display:flex; justify-content:center; width:100%; position:relative; }
 .questBubbleRow:not(:first-child)::before{
@@ -874,6 +876,31 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
 .questBubble-pnj .questBubbleBody{ background:rgba(47,111,237,.16); }
 .questBubble-joueur .questBubbleHeader{ background:#1e9e57; }
 .questBubble-joueur .questBubbleBody{ background:rgba(46,204,113,.16); }
+/* "❓ Question" (voir questQuestionBubbleHtml, static/js/quests/
+   quest-editor.js) — bulle JAUNE distincte des répliques de dialogue,
+   même chaîne/alignement vertical (.questBubbleRow). */
+.questBubble-question .questBubbleHeader{ background:#b8890f; flex-wrap:wrap; row-gap:4px; }
+.questBubble-question .questBubbleBody{ background:rgba(224,185,61,.14); }
+.questQuestionHeaderField{
+  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#fff; white-space:nowrap;
+}
+.questQuestionHeaderField input{
+  width:44px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.3); border-radius:4px;
+  color:#fff; font:inherit; font-size:11px; padding:2px 4px;
+}
+.questQuestionText{
+  width:100%; background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:6px;
+  color:#fff; font:inherit; font-size:13px; padding:6px 8px; margin-bottom:8px;
+}
+.questQuestionText::placeholder{ color:rgba(255,255,255,.5); }
+.questChoicesList{ display:flex; flex-direction:column; gap:6px; }
+.questChoiceRow{ display:flex; align-items:center; gap:6px; }
+.questChoiceRadio{ accent-color:#e0b93d; flex-shrink:0; }
+.questChoiceInput{
+  flex:1; background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:6px;
+  color:#fff; font:inherit; font-size:12.5px; padding:4px 8px;
+}
+.questChoiceInput::placeholder{ color:rgba(255,255,255,.5); }
 .questBubbleSpeaker{
   font-size:11px; font-weight:700; color:#fff; cursor:pointer;
   background:transparent; border:none; padding:0; font-family:inherit; max-width:100%; flex:1;