mumuki-laboratory 7.11.1 → 8.1.0

data/app/assets/javascripts/mumuki_laboratory/application/kindergarten.js

@@ -1,144 +1,159 @@
 mumuki.load(() => {
-  mumuki.kindergarten = {
+
+  mumuki.isKindergartenExercise = () => !!$('.mu-kindergarten').get(0);
+
+  class MumukiKindergarten extends mumuki.Kids {
+
+    constructor() {
+      super();
+    }
+
     initialize() {
+      super.initialize();
+      this.$contextModalButton = new mumuki.Button($('#mu-kids-context .mu-kids-modal-button.mu-close'));
+
+      this.resultActions.passed = this._showSuccessPopup.bind(this);
+      this.resultActions.passed_with_warnings = this._showSuccessPopup.bind(this);
+      this.resultActions.failed = this._showFailurePopup.bind(this);
+      this.resultActions.errored = this._showFailurePopup.bind(this);
+      this.resultActions.pending = this._showFailurePopup.bind(this);
+      this.resultActions.aborted = this.showAbortedPopup.bind(this);
+
       this.speech.verifyBrowserSupport();
       this.hint.showOrHideExpandHintButton();
       this.context.showNextOrCloseButton();
-      this.result.configureCallbacks();
-    },
-    speech: {
-      _isPlaying: false,
-      click(selector, locale) {
-        if (this._isPlaying) {
-          this.stop();
-        } else {
-          this.play(selector, locale);
-        }
-      },
-      play(selector, locale) {
-        const msg = new SpeechSynthesisUtterance();
-        msg.text = $(selector).text();
-        msg.lang = locale.split('_')[0];
-        msg.pitch = 0;
-        msg.onend = () => this.stop();
-        this._action('play', 'stop', true, (speech) => speech.speak(msg))
-      },
-      stop() {
-        this._action('stop', 'play', false, (speech) => speech.cancel())
-      },
-      _action(add, remove, isPlaying, callback = () => {}) {
-        callback(window.speechSynthesis);
-        const $button = $('.mu-kindergarten-play-description')
-        $button.find(`.mu-kindergarten-${add}`).addClass('hidden');
-        $button.find(`.mu-kindergarten-${remove}`).removeClass('hidden');
-        this._isPlaying = isPlaying;
-      },
-      verifyBrowserSupport() {
-        if (!window.speechSynthesis) {
-          const $button = $('.mu-kindergarten-play-description')
-          $button.prop('disabled', true);
-          $button.css('cursor', 'not-allowed');
-          this._action('play', 'stop', false)
-        }
-      }
-    },
-    hint: {
-      toggle() {
-        $('.mu-kindergarten-light-speech-bubble').toggleClass('open');
-      },
-      toggleMedia() {
-        const $hintMedia = $('.mu-kindergarten-hint-media');
-        const $i = $('.expand-or-collapse-hint-media').children('i');
-        $i.toggleClass('fa-caret-up').toggleClass('fa-caret-down');
-        $hintMedia.toggleClass('closed');
-      },
-      showOrHideExpandHintButton() {
-        const $button = $('.expand-or-collapse-hint-media');
-        const $hintMedia = $('.mu-kindergarten-hint-media');
-        if (!$hintMedia.get(0)) $button.addClass('hidden');
-      },
-    },
-    context: {
-      showContext() {
-        mumuki.kids.showContext();
-        this._showFirstSlideImage();
-      },
-      nextSlide() {
-        this._clickButton('next');
-      },
-      prevSlide() {
-        this._clickButton('prev');
-      },
-      _imageSlides() {
-        return $('.mu-kindergarten-context-image-slides');
-      },
-      _activeSlideImage() {
-        return this._imageSlides().find('.active');
-      },
-      _clickButton(prevOrNext) {
-        this._activeSlideImage().removeClass('active')[prevOrNext]().addClass('active');
-        this.showNextOrCloseButton();
-        this._hidePreviousButtonIfFirstImage();
-      },
-      showNextOrCloseButton() {
-        const $next = $('.mu-kindergarten-modal-button.mu-next');
-        const $close = $('.mu-kindergarten-modal-button.mu-close');
-        const isLastChild = this._activeSlideImage().is(':last-child');
-        this._addClassIf($next, 'hidden', () => isLastChild);
-        this._addClassIf($close, 'hidden', () => !isLastChild);
-      },
-      _hidePreviousButtonIfFirstImage() {
-        const $prev = $('.mu-kindergarten-modal-button.mu-previous');
-        this._addClassIf($prev, 'hidden', () => this._activeSlideImage().is(':first-child'))
-      },
-      _showFirstSlideImage() {
-        this._imageSlides().find('img').each((i, el) => this._addClassIf($(el), 'active', () => i === 0))
-        this.showNextOrCloseButton();
-        this._hidePreviousButtonIfFirstImage();
-      },
-      _addClassIf(element, clazz, criteria) {
-        if (criteria()) {
-          element.addClass(clazz)
-        } else {
-          element.removeClass(clazz);
-        }
-      }
-    },
-    result: {
-      configureCallbacks() {
-        mumuki.kids.resultAction.passed = this._showOnSuccessPopup;
-        mumuki.kids.resultAction.passed_with_warnings = this._showOnSuccessPopup;
-
-        mumuki.kids.resultAction.failed = this._showOnFailurePopup;
-        mumuki.kids.resultAction.errored = this._showOnFailurePopup;
-        mumuki.kids.resultAction.pending = this._showOnFailurePopup;
-      },
-      _showOnSuccessPopup(data) {
-        $('.submission-results').html(data.title_html);
-        mumuki.kids._showOnSuccessPopup(data);
-        $('#kids-results .modal-content').addClass(data.status);
-      },
-      _showOnFailurePopup() {
-        mumuki.kids.submitButton.disable();
-        mumuki.kids._getResultsAbortedModal().modal();
-        mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
-      }
     }
-  };
 
-  $(document).ready(() => {
+    // ================
+    // == Public API ==
+    // ================
+
+    showNonAbortedPopup(data, animation_name) {
+      this.$submissionResult.html(data.title_html);
+      this.$resultsModal.find('.modal-content').removeClass().addClass('modal-content kindergarten').addClass(data.status);
+      super.showNonAbortedPopup(data, animation_name);
+    }
+
+    showAbortedPopup(data) {
+      const $closeResultAbortedModalButton = new mumuki.Button(this.$resultsAbortedModal.find('.mu-close'));
+      $closeResultAbortedModalButton.setWaiting();
+      mumuki.presenterCharacter.playAnimation('failed', $('.mu-kids-character-result-aborted'));
+      super.showAbortedPopup(data);
+      setTimeout(() => $closeResultAbortedModalButton.enable(), 2500);
+    }
 
-    if ($('.mu-kindergarten').get(0)) {
+    // ==================
+    // == Hook Methods ==
+    // ==================
 
-      mumuki.resize(() => {
-        mumuki.kids.scaleState($('.mu-kids-states'), 100);
-        mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
-      })
+    _showSuccessPopup(data) {
+      this.showNonAbortedPopup(data, 'success2_l');
+    }
+
+    _showFailurePopup(data) {
+      this.showNonAbortedPopup(data, 'failure');
+    }
 
-      mumuki.kindergarten.initialize()
+    // ====================
+    // == Event Callback ==
+    // ====================
 
+    onReady() {
+      mumuki.resize(this.onResize.bind(this));
     }
 
-  })
+    onResize() {
+      this.scaleState(this.$states, 50);
+      this.scaleBlocksArea(this.$blocks);
+    }
+
+    // ==========================
+    // == Called by the runner ==
+    // ==========================
+
+    showResult(data) {
+      data.guide_finished_by_solution = false;
+      super.showResult(data);
+    }
+
+    restart() {
+      mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
+    }
+
+    // =======================
+    // == Specific Behavior ==
+    // =======================
+
+    get speech() {
+      return {
+        _isPlaying: false,
+        click(selector, locale) {
+          if (this._isPlaying) {
+            this.stop();
+          } else {
+            this.play(selector, locale);
+          }
+        },
+        play(selector, locale) {
+          const msg = new SpeechSynthesisUtterance();
+          msg.text = $(selector).text();
+          msg.lang = locale.split('_')[0];
+          msg.pitch = 0;
+          msg.onend = () => this.stop();
+          this._action('play', 'stop', true, (speech) => {
+            mumuki.presenterCharacter.playAnimation('talk', mumuki.kids.$bubbleCharacterAnimation);
+            speech.speak(msg);
+          })
+        },
+        stop() {
+          this._action('stop', 'play', false, (speech) => speech.cancel())
+        },
+        _action(add, remove, isPlaying, callback) {
+          callback(window.speechSynthesis);
+          const $button = $('.mu-kindergarten-play-description')
+          $button.find(`.mu-kindergarten-${add}`).addClass('hidden');
+          $button.find(`.mu-kindergarten-${remove}`).removeClass('hidden');
+          this._isPlaying = isPlaying;
+        },
+        verifyBrowserSupport() {
+          if (!window.speechSynthesis) {
+            const $button = $('.mu-kindergarten-play-description')
+            $button.prop('disabled', true);
+            $button.css('cursor', 'not-allowed');
+            this._action('play', 'stop', false)
+          }
+        }
+      }
+
+    }
+
+    get hint() {
+      return {
+        toggle() {
+          $('.mu-kindergarten-light-speech-bubble').toggleClass('open');
+        },
+        toggleMedia() {
+          const $hintMedia = $('.mu-kindergarten-hint-media');
+          const $i = $('.expand-or-collapse-hint-media').children('i');
+          $i.toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+          $hintMedia.toggleClass('closed');
+        },
+        showOrHideExpandHintButton() {
+          const $button = $('.expand-or-collapse-hint-media');
+          const $hintMedia = $('.mu-kindergarten-hint-media');
+          if (!$hintMedia.get(0)) $button.addClass('hidden');
+        },
+      }
+    }
+
+    get context() {
+      return new mumuki.ModalCarrousel('.mu-kindergarten-context-image-slides', () => mumuki.kids.showContext());
+    }
+
+  }
+
+  if (mumuki.isKindergartenExercise()) {
+    mumuki.kids = new MumukiKindergarten();
+  }
 
 });

data/app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js

@@ -0,0 +1,63 @@
+mumuki.ModalCarrousel = (() => {
+
+  class MuModalCarrousel {
+    constructor(containerSelector, onShow = () => {}) {
+      this.$container = $(containerSelector);
+      this.onShow = onShow;
+    }
+
+    show() {
+      this.onShow();
+      this._showFirstSlide();
+    }
+
+    nextSlide() {
+      this._clickButton('next');
+    }
+
+    prevSlide() {
+      this._clickButton('prev');
+    }
+
+    _activeSlide() {
+      return this.$container.find('.active');
+    }
+
+    _clickButton(prevOrNext) {
+      this._activeSlide().removeClass('active')[prevOrNext]().addClass('active');
+      this.showNextOrCloseButton();
+      this._hidePreviousButtonIfFirstSlide();
+    }
+
+    showNextOrCloseButton() {
+      const $next = $('.mu-kids-modal-button.mu-next');
+      const $close = $('.mu-kids-modal-button.mu-close');
+      const $footer = $('.modal-footer');
+      const isLastChild = this._activeSlide().is(':last-child');
+      this._addClassIf($next, 'hidden', () => isLastChild);
+      this._addClassIf($close, 'hidden', () => !isLastChild);
+      this._addClassIf($footer, 'hidden', () => !isLastChild);
+    }
+
+    _hidePreviousButtonIfFirstSlide() {
+      const $prev = $('.mu-kids-modal-button.mu-previous');
+      this._addClassIf($prev, 'hidden', () => this._activeSlide().is(':first-child'))
+    }
+
+    _showFirstSlide() {
+      this.$container.children().each((i, el) => this._addClassIf($(el), 'active', () => i === 0));
+      this.showNextOrCloseButton();
+      this._hidePreviousButtonIfFirstSlide();
+    }
+
+    _addClassIf(element, clazz, criteria) {
+      if (criteria()) {
+        element.addClass(clazz);
+      } else {
+        element.removeClass(clazz);
+      }
+    }
+  }
+
+  return MuModalCarrousel;
+})();

data/app/assets/javascripts/mumuki_laboratory/application/number-counter.js

@@ -0,0 +1,18 @@
+mumuki.animateNumberCounter = (selector, valueTo, seconds = 1) => {
+  const $numberCounter = $(selector);
+
+  if ($numberCounter.text()) return;
+
+  const millis = seconds * 1000;
+  const incrementStep = valueTo / (millis / 10);
+
+  _increment();
+
+  function _increment(initValue = 0, delay = 10) {
+    if (initValue >= valueTo) return;
+    const nextValue = initValue + incrementStep;
+    // TODO: this one should be xp agnostic
+    $numberCounter.text(`+${Math.min(Math.round(nextValue), valueTo)}exp`);
+    setTimeout(() => _increment(nextValue), delay);
+  }
+};

data/app/assets/javascripts/mumuki_laboratory/application/primary.js

@@ -0,0 +1,258 @@
+mumuki.load(() => {
+
+  mumuki.isPrimaryExercise = () => !!$('.mu-kids-exercise').get(0) && !$('.mu-kindergarten').get(0);
+
+  class MumukiPrimary extends mumuki.Kids {
+
+    constructor() {
+      super();
+    }
+
+    // ================
+    // == Public API ==
+    // ================
+
+    initialize() {
+      super.initialize();
+      this.$characterSpeechBubble = $('.mu-kids-character-speech-bubble');
+      this.$characterSpeechBubbleNormal = this.$characterSpeechBubble.children('.mu-kids-character-speech-bubble-normal');
+      this.$overlay = $('.mu-kids-overlay');
+      this.$contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
+
+      this._paragraphHeight = undefined;
+      this._currentParagraphIndex = 0;
+      this._paragraphCount = 1;
+      this._paragraphsLines = 2;
+      this._availableTabs = ['.description', '.hint'];
+      this._$speechParagraphs = undefined;
+      this._paragraphHeight = undefined;
+      this._scrollHeight = undefined;
+      this._nextSpeechBlinking = undefined;
+      this._$prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
+      this._$nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
+      this._$speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
+      this._$texts = this.$characterSpeechBubbleNormal.children(this._availableTabs.join(", "));
+      this._$hint = $('.mu-kids-hint');
+      this._$description = $('.mu-kids-description');
+
+      this.resultActions.passed = this._showSuccessPopup.bind(this);
+      this.resultActions.passed_with_warnings = this._showOnCharacterBubble.bind(this);
+      this.resultActions.failed = this._showOnCharacterBubble.bind(this);
+      this.resultActions.errored = this._showOnCharacterBubble.bind(this);
+      this.resultActions.pending = this._showOnCharacterBubble.bind(this);
+      this.resultActions.aborted = this.showAbortedPopup.bind(this);
+
+      this.$contextModal.on('hidden.bs.modal', this.animateSpeech.bind(this));
+    }
+
+    showAbortedPopup(data) {
+      super.showAbortedPopup(data);
+      mumuki.submission.animateTimeoutError(this.submitButton);
+    }
+
+    // ==================
+    // == Hook Methods ==
+    // ==================
+
+    _showSuccessPopup(data) {
+      this.showNonAbortedPopup(data, 'success2_l', 4000);
+    }
+
+    _showFailurePopup(data) {
+      this._showOnCharacterBubble(data);
+    }
+
+    // ====================
+    // == Event Callback ==
+    // ====================
+
+    onReady() {
+      mumuki.resize(this.onResize.bind(this));
+
+      this._availableTabs.forEach((selector) => this._tabParagraphs(selector).contents().unwrap().wrapAll('<p>'));
+
+      this._updateSpeechParagraphs();
+      this._resizeSpeechParagraphs();
+
+      this._$speechTabs.each((i) => {
+        const $tab = $(this._$speechTabs[i]);
+        if ($tab.data('target')) {
+          $tab.click(() => {
+            this._$speechTabs.removeClass('active');
+            $tab.addClass('active');
+            this._$texts.hide();
+            this.$characterSpeechBubbleNormal.children('.' + $tab.data('target')).show();
+            this._updateSpeechParagraphs();
+          })
+        }
+      });
+
+      if (this._paragraphCount > 1) {
+        this._nextSpeechBlinking = mumuki.setInterval(() => this._$nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
+      }
+
+      this._$nextSpeech.click(this._showNextParagraph.bind(this));
+      this._$prevSpeech.click(this._showPrevParagraph.bind(this));
+      this._$description.click(this.animateSpeech.bind(this));
+
+      this._$hint.click(() => {
+        this.animateHint();
+        this._$hint.removeClass('blink');
+      });
+    }
+
+    onResize() {
+      const FULL_MARGIN = 30;
+
+      distributeAreas(this.$stateImage, this.$states, this.$blocks, FULL_MARGIN);
+
+      if (!this.$exerciseDescription.hasClass('mu-kids-exercise-description-fixed')) {
+        this.$exerciseDescription.width(this.$exercise.width() - this.$states.width() - FULL_MARGIN / 2);
+      }
+
+      this.$state.each((_index, state) => this.scaleState($(state), FULL_MARGIN));
+      this.scaleBlocksArea(this.$blocks);
+
+      if (this._paragraphCount <= 1) clearInterval(this._nextSpeechBlinking);
+
+      this._updateSpeechParagraphs();
+      this._resizeSpeechParagraphs();
+    }
+
+    onNonAbortedPopupCall(data) {
+      this._showMessageOnCharacterBubble(data);
+    }
+
+    onSubmissionResultModalOpen(data) {
+      this._showCorollaryCharacter();
+      super.onSubmissionResultModalOpen(data);
+    }
+
+    // ==========================
+    // == Called by the runner ==
+    // ==========================
+
+    restart() {
+      this._hideMessageOnCharacterBubble();
+      const $bubble = this.$characterSpeechBubble;
+      Object.keys(this.resultActions).forEach($bubble.removeClass.bind($bubble));
+      mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
+    }
+
+    // =======================
+    // == Specific Behavior ==
+    // =======================
+
+    _hideMessageOnCharacterBubble() {
+      const $bubble = this.$characterSpeechBubble;
+      $bubble.find('.mu-kids-character-speech-bubble-tabs').show();
+      $bubble.find('.mu-kids-character-speech-bubble-normal').show();
+      $bubble.find('.mu-kids-character-speech-bubble-failed').hide();
+      $bubble.find('.mu-kids-discussion-link').remove();
+      Object.keys(this.resultActions).forEach($bubble.removeClass.bind($bubble));
+      this.$overlay.hide();
+    }
+
+    _showMessageOnCharacterBubble(data) {
+      const renderer = new mumuki.renderers.speechBubble.SpeechBubbleRenderer(this.$characterSpeechBubble);
+      renderer.setDiscussionsLinkHtml($('#mu-kids-discussion-link-html').html());
+      renderer.setResponseData(data);
+      renderer.render();
+      this.$overlay.show();
+    }
+
+    _showOnCharacterBubble(data) {
+      mumuki.presenterCharacter.playAnimation('failure', this.$bubbleCharacterAnimation);
+      this._showMessageOnCharacterBubble(data);
+    }
+
+    _showCorollaryCharacter() {
+      mumuki.characters.magnifying_glass.playAnimation('show', $('.mu-kids-corollary-animation'));
+    }
+
+    animateSpeech() {
+      mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
+    }
+
+    animateHint() {
+      mumuki.presenterCharacter.playAnimation('hint', this.$bubbleCharacterAnimation);
+    }
+
+    _showPrevParagraph() {
+      this.animateSpeech();
+      this._showParagraph(this._currentParagraphIndex - 1);
+    }
+
+    _showNextParagraph() {
+      this.animateSpeech();
+      this._showParagraph(this._currentParagraphIndex + 1);
+      clearInterval(this._nextSpeechBlinking);
+    }
+
+    _resizeSpeechParagraphs(paragraphIndex) {
+      const previousParagraphCount = this._paragraphCount;
+      this._scrollHeight = this.$characterSpeechBubbleNormal[0].scrollHeight;
+      this._paragraphHeight = floatFromPx(this._$speechParagraphs.css('line-height')) * this._paragraphsLines;
+      this._paragraphCount = Math.ceil(this._scrollHeight / this._paragraphHeight);
+      const newParagraphIndex = Math.floor((this._paragraphCount / previousParagraphCount) * this._currentParagraphIndex);
+      this._showParagraph(paragraphIndex || newParagraphIndex);
+    }
+
+    _showParagraph(index) {
+      this.$characterSpeechBubbleNormal[0].scrollTop = index * this._paragraphHeight;
+      this._currentParagraphIndex = index;
+      this._checkArrowsSpeechVisibility();
+    }
+
+    _checkArrowsSpeechVisibility() {
+      this._setVisibility(this._$prevSpeech, this._currentParagraphIndex !== 0);
+      this._setVisibility(this._$nextSpeech, this._currentParagraphIndex !== this._paragraphCount - 1);
+    }
+
+    _setVisibility(element, isVisible) {
+      isVisible ? element.show() : element.hide();
+    }
+
+    _tabParagraphs(selector) {
+      return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
+    }
+
+    _updateSpeechParagraphs() {
+      this._$speechParagraphs = this._tabParagraphs('.' + this._getSelectedTabName());
+      this._resizeSpeechParagraphs(0);
+    }
+
+    _getSelectedTabName() {
+      return this._$speechTabs.filter('.active').data('target') || 'description';
+    }
+
+  }
+
+  /**
+   * Assigns propert widths to the states and blocks areas
+   * depending on the presence and type of available states
+   *
+   * @param {*} $muKidsStateImage
+   * @param {*} $muKidsStatesContainer
+   * @param {*} $muKidsBlocks
+   * @param {number} fullMargin
+   */
+  function distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin) {
+    if ($muKidsStateImage.children().length) {
+      const ratio = $muKidsStatesContainer.hasClass('mu-kids-single-state') ? 1 : 2;
+      $muKidsStatesContainer.width($muKidsStatesContainer.height() / ratio * 1.25 - fullMargin);
+    } else {
+      $muKidsStatesContainer.width(0);
+      $muKidsBlocks.width('100%');
+    }
+  }
+
+  function floatFromPx(value) {
+    return parseFloat(value.substring(0, value.length - 2));
+  }
+
+  if (mumuki.isPrimaryExercise()) {
+    mumuki.kids = new MumukiPrimary();
+  }
+
+});