mumuki-laboratory 7.10.5 → 8.0.0

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

@@ -0,0 +1,200 @@
+mumuki.load(() => {
+
+  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-kindergarten-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();
+    }
+
+    // ================
+    // == Public API ==
+    // ================
+
+    showNonAbortedPopup(data, animation_name) {
+      data.guide_finished_by_solution = false;
+      this.$submissionResult.html(data.title_html);
+      this.$resultsModal.find('.modal-content').removeClass().addClass('modal-content').addClass(data.status);
+      super.showNonAbortedPopup(data, animation_name, 1000);
+    }
+
+    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);
+    }
+
+    // ==================
+    // == Hook Methods ==
+    // ==================
+
+    _showSuccessPopup(data) {
+      this.showNonAbortedPopup(data, 'success2_l');
+    }
+
+    _showFailurePopup(data) {
+      this.showNonAbortedPopup(data, 'failure');
+    }
+
+    // ====================
+    // == Event Callback ==
+    // ====================
+
+    onReady() {
+      mumuki.resize(this.onResize.bind(this));
+    }
+
+    onResize() {
+      this.scaleState(this.$states, 50);
+      this.scaleBlocksArea(this.$blocks);
+    }
+
+    // ==========================
+    // == Called by the runner ==
+    // ==========================
+
+    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 {
+        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);
+          }
+        }
+      }
+    }
+
+  }
+
+  if (mumuki.isKindergartenExercise()) {
+    mumuki.kids = new MumukiKindergarten();
+  }
+
+});

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

@@ -0,0 +1,257 @@
+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();
+    }
+
+    // ==========================
+    // == 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();
+  }
+
+});