[FEATURE] Affiche les bulles une à une puis l'épreuves avec un délai (PIX-14571)

junior/app/components/bubble.gjs

@@ -1,17 +1,32 @@
 import Component from '@glimmer/component';
+import {tracked} from '@glimmer/tracking';
 import MarkdownToHtml from 'junior/components/markdown-to-html';
 import * as markdownConverter from 'junior/utils/markdown-converter';
 
 import OralizationButton from './oralization-button';
 
 export default class Bubble extends Component {
+  @tracked display = false;
+
+  constructor() {
+    super(...arguments);
+    setTimeout(() => {
+      this.display = true;
+    }, this.args.shouldDisplayIn);
+  }
   get getClasses() {
     let className = 'bubble';
     if (this.args.status) {
       className += ` bubble--${this.args.status}`;
     }
     return className;
   }
+  get getDelayedClass() {
+    if (typeof this.args.shouldDisplayIn === 'number' || this.args.withTransition) {
+      return 'bubble-container__delayed';
+    }
+    return '';
+  }
 
   get textToRead() {
     const parser = new DOMParser();
@@ -20,7 +35,7 @@ export default class Bubble extends Component {
   }
 
   <template>
-    <div class="bubble-container">
+    <div class="bubble-container {{this.getDelayedClass}} {{if this.display 'display' ''}}">
       <MarkdownToHtml ...attributes @markdown={{@message}} @class={{this.getClasses}} />
       {{#if @oralization}}
         <OralizationButton @text={{this.textToRead}} />

junior/app/components/challenge/component.js

@@ -10,8 +10,21 @@ export default class Challenge extends Component {
   @tracked answer = null;
   @tracked answerValue = null;
   @tracked displayValidationWarning = false;
+  @tracked displayChallenge = false;
   validationWarning = null;
 
+  constructor() {
+    super(...arguments);
+    setTimeout(() => {
+      this.displayChallenge = true;
+    }, this.args.challenge.instruction.length * 1500);
+  }
+
+  @action
+  displayBubbleWithDelay(index) {
+    return (index || 0) * 1500;
+  }
+
   get disableCheckButton() {
     return this.answerValue === null || this.answerValue === '';
   }

junior/app/components/challenge/item/template.hbs

@@ -1,4 +1,6 @@
-<div class="challenge-item {{unless this.isMediaWithForm 'challenge-item--single-display'}}">
+<div
+  class="challenge-item {{unless this.isMediaWithForm 'challenge-item--single-display'}} {{if @display 'display' ''}}"
+>
   {{#if this.hasMedia}}
     <div class="challenge-item__media {{unless this.isMediaWithForm 'challenge-item__media--single-display'}}">
       {{#if @challenge.illustrationUrl}}

junior/app/components/challenge/template.hbs

@@ -1,15 +1,20 @@
 {{page-title (t "pages.challenge.title")}}
 <div class="container">
   <RobotDialog @class={{this.robotMood}}>
-    {{#each @challenge.instruction as |instruction|}}
-      <Bubble @message={{instruction}} @oralization={{@oralization}} />
+    {{#each @challenge.instruction as |instruction index|}}
+      <Bubble
+        @message={{instruction}}
+        @oralization={{@oralization}}
+        @shouldDisplayIn={{this.displayBubbleWithDelay index}}
+      />
     {{/each}}
     {{#if (eq this.answer.result "ok")}}
       <Bubble
         @message={{t "pages.challenge.messages.correct-answer"}}
         @status="success"
         @oralization={{@oralization}}
         aria-live="polite"
+        @withTransition={{true}}
       />
     {{/if}}
     {{#if (eq this.answer.result "ko")}}
@@ -18,13 +23,21 @@
         @oralization={{@oralization}}
         @status="error"
         aria-live="polite"
+        @withTransition={{true}}
       />
     {{/if}}
     {{#if this.displayValidationWarning}}
-      <Bubble @message={{this.validationWarning}} @status="warning" aria-live="polite" @oralization={{@oralization}} />
+      <Bubble
+        @message={{this.validationWarning}}
+        @status="warning"
+        aria-live="polite"
+        @oralization={{@oralization}}
+        @withTransition={{true}}
+      />
     {{/if}}
   </RobotDialog>
   <Challenge::Item
+    @display={{this.displayChallenge}}
     @setAnswerValue={{this.setAnswerValue}}
     @setValidationWarning={{this.setValidationWarning}}
     @validateAnswer={{this.validateAnswer}}

junior/app/styles/components/bubble.scss

@@ -1,6 +1,15 @@
 .bubble-container {
   display: flex;
   align-items: center;
+  opacity: 0;
+
+  &.display {
+    opacity: 1;
+  }
+
+  &__delayed {
+    transition: all 2s;
+  }
 }
 
 .bubble {

junior/app/styles/components/challenge/challenge-item.scss

@@ -2,6 +2,12 @@
   display: flex;
   align-content: center;
   margin: 0 140px;
+  opacity: 0;
+  transition: all 1s;
+
+  &.display {
+    opacity:1;
+  }
 
   @include device-is('tablet') {
     margin: 0 120px;