Fix "+ Réplique" qui remplaçait la bulle au lieu d'en ajouter une
Build and deploy / test-python (push) Successful in 7m9s
Build and deploy / test-js (push) Successful in 1m2s
Build and deploy / build-and-push (push) Skipped
Build and deploy / deploy (push) Skipped

Bug : questSaveDialogues() adoptait la réponse du serveur comme nouvel
état local après chaque enregistrement. Une bulle fraîchement ajoutée a
un texte encore vide (rien tapé) — sanitize_quest_dialogues.py la
rejette légitimement (jamais de réplique sans texte persistée) — donc
la réponse renvoyait un tableau amputé de cette bulle, que le client
adoptait aveuglément, effaçant la bulle en cours d'écriture. Le clic
suivant sur "+ Réplique" repartait donc du même état qu'avant, semblant
"remplacer" la bulle plutôt que d'en ajouter une seconde. Le client ne
resynchronise plus jamais son état depuis la réponse d'enregistrement —
il est déjà la seule source de vérité pendant l'édition.

Colonnes de dialogue : occupent maintenant toute la hauteur disponible
de la modale plein écran et défilent chacune indépendamment (titre et
bouton "+ Réplique" restent fixes), au lieu d'une hauteur minimale fixe.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-03 12:08:41 +02:00
co-authored by Claude Sonnet 5
parent 521792fe00
commit 077af2234d
2 changed files with 26 additions and 11 deletions
+10 -3
View File
@@ -321,12 +321,19 @@ function questUpdateField(questId, field, value) {
// Dialogues : toujours les 3 colonnes ENTIÈRES postées ensemble (voir // Dialogues : toujours les 3 colonnes ENTIÈRES postées ensemble (voir
// db/quests/set_quest_dialogues.py) — jamais une réplique isolée. // db/quests/set_quest_dialogues.py) — jamais une réplique isolée.
// N'ADOPTE JAMAIS la réponse du serveur comme nouvel état local (bug
// corrigé : sanitize_quest_dialogues.py rejette toute réplique au texte
// encore vide — juste ajoutée, pas encore tapée — donc chaque
// enregistrement renvoyait un tableau amputé de la bulle en cours
// d'écriture ; l'adopter effaçait silencieusement la bulle que l'auteur
// venait d'ajouter, et le clic suivant sur "+ Réplique" semblait la
// "remplacer" au lieu d'en ajouter une seconde). L'état local, construit
// par des mutations client explicites, est déjà la seule source de
// vérité pendant l'édition.
function questSaveDialogues(quest) { function questSaveDialogues(quest) {
fetch('/game/' + GAME_SLUG + '/quests/' + quest.id + '/dialogues', { fetch('/game/' + GAME_SLUG + '/quests/' + quest.id + '/dialogues', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ dialogues: quest.dialogues }), method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ dialogues: quest.dialogues }),
}) });
.then(function (r) { return r.json(); })
.then(function (json) { if (json.dialogues) quest.dialogues = json.dialogues; });
} }
// Alterne "Joueur" <-> le premier personnage nommé (ou "PNJ" faute de // Alterne "Joueur" <-> le premier personnage nommé (ou "PNJ" faute de
+16 -8
View File
@@ -805,23 +805,31 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
plutôt qu'une boîte centrée, pour laisser toute la place aux 3 plutôt qu'une boîte centrée, pour laisser toute la place aux 3
colonnes de répliques. */ colonnes de répliques. */
.questDialogueModal .modal-content{ width:100vw; height:100vh; max-width:100vw; max-height:100vh; margin:0; } .questDialogueModal .modal-content{ width:100vw; height:100vh; max-width:100vw; max-height:100vh; margin:0; }
.questDialogueModal .box{ width:100%; height:100%; border-radius:0; overflow-y:auto; } /* La modale entière est une colonne flex (jamais un scroll global, voir
overflow:hidden ici) : le header/la fiche restent fixes en haut, les 3
colonnes de répliques se partagent TOUT le reste de la hauteur
(demandé explicitement) et défilent CHACUNE indépendamment (voir
.questDialogueColumnBubbles plus bas), jamais toute la page. */
.questDialogueModal .box{ width:100%; height:100%; border-radius:0; overflow:hidden; display:flex; flex-direction:column; }
.questDialogueModalContent{ width:100%; height:100%; max-width:100%; } .questDialogueModalContent{ width:100%; height:100%; max-width:100%; }
.questDialogueModalHeader{ margin-bottom:10px; } #questDialogueModalBody{ display:flex; flex-direction:column; flex:1; min-height:0; }
.questDialogueModalHeader{ flex:0 0 auto; margin-bottom:10px; }
.questFieldsGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:14px; } .questFieldsGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:14px; }
.questField{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; } .questField{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; }
.questField-wide{ grid-column:span 2; } .questField-wide{ grid-column:span 2; }
.questDialogueColumns{ display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:14px; overflow-x:auto; } .questDialogueColumns{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:14px; }
.questDialogueColumn{ .questDialogueColumn{
background:rgba(0,0,0,.15); border:1px solid var(--border); border-radius:12px; padding:10px; background:rgba(0,0,0,.15); border:1px solid var(--border); border-radius:12px; padding:10px;
display:flex; flex-direction:column; gap:8px; min-height:160px; display:flex; flex-direction:column; gap:8px; height:100%; min-height:0;
} }
.questDialogueColumnTitle{ margin:0 0 2px; font-size:13px; text-align:center; } .questDialogueColumnTitle{ flex:0 0 auto; margin:0 0 2px; font-size:13px; text-align:center; }
/* Bulles alignées VERTICALEMENT, centrées dans la colonne, reliées par un /* Bulles alignées VERTICALEMENT, centrées dans la colonne, reliées par un
trait entre chacune (voir ::before sur .questBubbleRow ci-dessous) — trait entre chacune (voir ::before sur .questBubbleRow ci-dessous) —
demandé explicitement plutôt qu'un alignement gauche/droite. */ demandé explicitement plutôt qu'un alignement gauche/droite. Seule
.questDialogueColumnBubbles{ display:flex; flex-direction:column; align-items:center; flex:1; padding-top:4px; } CETTE zone défile (flex:1 + overflow-y:auto) — le titre de colonne et
.questDialogueAddBtn{ align-self:center; padding:6px 14px; font-size:12px; margin-top:4px; } 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; }
.questBubbleRow{ display:flex; justify-content:center; width:100%; position:relative; } .questBubbleRow{ display:flex; justify-content:center; width:100%; position:relative; }
.questBubbleRow:not(:first-child)::before{ .questBubbleRow:not(:first-child)::before{