mumuki-laboratory 7.12.1 → 7.12.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e025a36f6aa947e6a39b8372e2a0f257d473143a9c5bef32575885fcf375312b
-  data.tar.gz: 81428a5522e48781ed29cde5b8f2c219f3388a8d36e1ae466f91ee412e69b246
+  metadata.gz: 26c8eb799e96cc5d8e68fc6d5b9ae0e268fcc77fa99156db5051b373b6aee412
+  data.tar.gz: 4dde09623edc6d26430bbd6bc86bcd6e85347e73bcd444df00d8f7b47274859c
 SHA512:
-  metadata.gz: 374aec02893b3e31880b6bb3bbaf1031e0c2b567ee1b25b8d03bb7a30bda810aa72f5ff9974d70cab6637cede23a8e734e95ec5e9a1357d14772300e64a0fc6f
-  data.tar.gz: 70637e35aa57f98661f78f787a15e181ed4737d4b1d3080adcf06e90f4564e5cec9b642055106cccf6ae29fbaa90b1695367c7ac424c89b225166f80ab007557
+  metadata.gz: efef98352ef78664e8aac7493a70546b824b54e97ed556d18ae1068c532564dcf509f2878e2c8105d9e5a0e318222b3aa0b1894d43fe2d1d48da397137ea6329
+  data.tar.gz: fb241340ebe7994e84ab86c08275304c74cd5669bbc2ca3b7c8bcf616d1186b088ecd3da59fe8abb80b65a1f9dfd8538eccbf31cba4f55dbd83f7a2838601911

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

@@ -5,9 +5,22 @@ mumuki.gamification = (() => {
     static get CONSTANT_TERM()          { return -125; }
   }
 
+  class DummyLevelProgression {
+    setExpMessage() {}
+
+    registerLevelUpAction() {}
+
+    registerGainedExperienceAction() {}
+
+    updateLevel() {}
+  }
+
   class LevelProgression {
     constructor(currentExp) {
       this.currentExp = currentExp;
+      this.lastEarnedExp = 0;
+      this._levelUpAction = this.defaultLevelUpAction;
+      this._gainedExperienceAction = this.defaultGainedExperienceAction;
     }
 
     expToLevelUp() {
@@ -38,8 +51,8 @@ mumuki.gamification = (() => {
       return Math.floor((-b + Math.sqrt(Math.pow(b, 2) - 4 * a * (c - exp))) / (2 * a));
     }
 
-    triggersLevelChange(exp) {
-      return this.levelFor(exp) !== this.currentLevel();
+    triggersLevelChange(newExp) {
+      return this.levelFor(this.currentExp + newExp) !== this.currentLevel();
     }
 
     currentLevelProgress() {
@@ -50,23 +63,87 @@ mumuki.gamification = (() => {
       return this.expFor(this.currentLevel());
     }
 
-    setExpMessage(exp) {
-      let expGained = exp - this.currentExp;
+    exercisesToNextLevel() {
+      return Math.ceil(this.expToLevelUp() / 100);
+    }
+
+    setExpMessage(data) {
+      const exp = data.current_exp;
+      this.lastEarnedExp = exp - this.currentExp;
+
+      if (this.lastEarnedExp > 0) {
+        this.levelUpActionIfLevelUp(data.level_up_html);
+        this._gainedExperienceAction();
 
-      if (expGained > 0) {
         this.currentExp = exp;
-        $('#mu-exp-points').html(expGained);
-        $('#mu-level-number').html(this.currentLevel());
+        this.updateLevel();
+      }
+    }
+
+    defaultGainedExperienceAction() {
+      $('#mu-exp-points').html(this.lastEarnedExp);
+      $('#mu-exp-earned-message').removeClass('hidden');
+    }
+
+    defaultLevelUpAction(_levelUpHtml) {
+      $('#mu-level-up').modal();
+    }
+
+    registerLevelUpAction(action) {
+      this._levelUpAction = action;
+    }
+
+    registerGainedExperienceAction(action) {
+      this._gainedExperienceAction = action;
+    }
+
+    levelUpActionIfLevelUp(levelUpHtml) {
+      if (this.triggersLevelChange(this.lastEarnedExp)) {
+        this._levelUpAction(levelUpHtml);
       }
     }
+
+    animateExperienceCounter(selector) {
+      mumuki.animateNumberCounter(selector, this.lastEarnedExp);
+    }
+
+    updateLevel() {
+      const $muLevelProgress = $('#mu-level-progress');
+
+      $('#mu-solve-more-exercises span').text(this.exercisesToNextLevel());
+      $('.mu-level-number').html(this.currentLevel());
+      $('.mu-level-tooltip').attr("title", (_, value) => `${value} ${this.currentLevel()}`);
+
+      if (this.currentLevelProgress() === 0) {
+        $muLevelProgress.attr("display", "none");
+      }
+
+      $muLevelProgress.animate(
+        {'progress': this.currentLevelProgress() * 250},
+        {
+          step: function(progress) {
+            let pattern = progress + ", 999";
+            $(this).attr("stroke-dasharray", pattern);
+          },
+          duration: 1000
+        });
+    }
   }
 
   function _setUpCurrentLevelProgression() {
-    mumuki.gamification._currentLevelProgression = new LevelProgression(currentExp());
+    if (_gamificationEnabled()) {
+      mumuki.gamification.currentLevelProgression = new LevelProgression(currentExp());
+    } else {
+      mumuki.gamification.currentLevelProgression = new DummyLevelProgression();
+    }
+  }
+
+  function _gamificationEnabled() {
+    return $('#mu-current-exp').length;
   }
 
   function currentExp() {
-    return $('#mu-current-exp').val();
+    return parseInt($('#mu-current-exp').val());
   }
 
   return {
@@ -75,11 +152,12 @@ mumuki.gamification = (() => {
 
     _setUpCurrentLevelProgression,
 
-    /** @type {LevelProgression} */
-    _currentLevelProgression: null
+    /** @type {LevelProgression|DummyLevelProgression} */
+    currentLevelProgression: null
   };
 })();
 
 mumuki.load(() => {
   mumuki.gamification._setUpCurrentLevelProgression();
+  mumuki.gamification.currentLevelProgression.updateLevel();
 });

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

@@ -21,9 +21,20 @@ mumuki.Kids = class {
     this.$stateImage = $('.mu-kids-state-image');
     this.$contextModal = $('#mu-kids-context');
     this.$resultsModal = $('#kids-results');
+    this.resultsCarrousel = new mumuki.ModalCarrousel('.mu-kids-results-carrousel');
     this.$resultsAbortedModal = $('#kids-results-aborted');
     this.$bubbleCharacterAnimation = $('.mu-kids-character-animation');
     this.$submissionResult =  $('.submission-results');
+    mumuki.gamification.currentLevelProgression.registerLevelUpAction(this.levelUpAction);
+    mumuki.gamification.currentLevelProgression.registerGainedExperienceAction(this.gainedExperienceAction);
+  }
+
+  gainedExperienceAction() {
+    mumuki.gamification.currentLevelProgression.animateExperienceCounter('.mu-kids-results .mu-experience');
+  }
+
+  levelUpAction(levelUpHtml) {
+    $('.mu-kids-results-carrousel').append(levelUpHtml);
   }
 
   showContext() {
@@ -74,7 +85,7 @@ mumuki.Kids = class {
   }
 
   onSubmissionResultModalOpen(_data) {
-    // SubClasses may override this method
+    this.resultsCarrousel.show();
   }
 
   // =================
@@ -82,9 +93,10 @@ mumuki.Kids = class {
   // =================
 
   _openSubmissionResultModal(data) {
-    this.$resultsModal.modal({ backdrop: 'static', keyboard: false })
-    this.$resultsModal.find('.modal-header').first().html(data.title_html)
-    this.$resultsModal.find('.modal-footer').first().html(data.button_html)
+    this.$resultsModal.modal({ backdrop: 'static', keyboard: false });
+    this.$resultsModal.find('.modal-header').first().html(data.title_html);
+    mumuki.gamification.currentLevelProgression.setExpMessage(data);
+    this.$resultsModal.find('.modal-footer').first().html(data.button_html);
     $('.mu-close-modal').click(() => this.$resultsModal.modal('hide'));
     this.onSubmissionResultModalOpen(data);
   }

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

@@ -10,7 +10,7 @@ mumuki.load(() => {
 
     initialize() {
       super.initialize();
-      this.$contextModalButton = new mumuki.Button($('#mu-kids-context .mu-kindergarten-modal-button.mu-close'));
+      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);
@@ -29,10 +29,9 @@ mumuki.load(() => {
     // ================
 
     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);
+      this.$resultsModal.find('.modal-content').removeClass().addClass('modal-content kindergarten').addClass(data.status);
+      super.showNonAbortedPopup(data, animation_name);
     }
 
     showAbortedPopup(data) {
@@ -72,6 +71,11 @@ mumuki.load(() => {
     // == Called by the runner ==
     // ==========================
 
+    showResult(data) {
+      data.guide_finished_by_solution = false;
+      super.showResult(data);
+    }
+
     restart() {
       mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
     }
@@ -143,52 +147,7 @@ mumuki.load(() => {
     }
 
     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);
-          }
-        }
-      }
+      return new mumuki.ModalCarrousel('.mu-kindergarten-context-image-slides', () => mumuki.kids.showContext());
     }
 
   }

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

@@ -123,8 +123,9 @@ mumuki.load(() => {
       this._showMessageOnCharacterBubble(data);
     }
 
-    onSubmissionResultModalOpen(_data) {
+    onSubmissionResultModalOpen(data) {
       this._showCorollaryCharacter();
+      super.onSubmissionResultModalOpen(data);
     }
 
     // ==========================

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

@@ -26,7 +26,7 @@ mumuki.submission = (() => {
       this.submissionsResultsArea.html(data.html);
       data.status === 'aborted' ? this.error(submitButton) : submitButton.enable();
       mumuki.updateProgressBarAndShowModal(data);
-      mumuki.gamification._currentLevelProgression.setExpMessage(data.current_exp);
+      mumuki.gamification.currentLevelProgression.setExpMessage(data);
     }
     error(submitButton) {
       this.submissionsResultsArea.html('');

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kids_results.scss

@@ -1,3 +1,14 @@
+@mixin full-size-character {
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    object-fit: contain;
+  }
+}
+
 @each $class in success, warning, danger, broken {
   .mu-kids-callout-#{$class} {
     h4 {
@@ -47,3 +58,109 @@ $capital-animation-width: 135px;
   }
 }
 
+.mu-kids-modal-border {
+
+  .modal-dialog {
+
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+
+    .modal-content {
+
+      position: absolute;
+
+      $width-lg: 800px;
+
+      width: $width-lg;
+
+      top: 60px;
+      left: calc(50% - #{$width-lg} / 2);
+
+      @media (max-width: $width-lg + 30px) {
+        width: calc(100vw - 30px);
+      }
+
+      $border-width: 16px;
+      border-width: $border-width;
+      border-style: solid;
+      border-color: $mu-color-link;
+      border-radius: $border-width;
+      box-shadow: none;
+
+      .modal-body {
+        div, p {
+          height: 100%;
+          .mu-kids-results-carrousel,
+          .mu-kindergarten-context-image-slides {
+            > :not(.active) {
+              display: none;
+            }
+          }
+        }
+        .mu-level p {
+          height: unset;
+        }
+      }
+
+      .mu-kids-modal-button {
+        $diameter: 64px;
+        position: absolute;
+        border-radius: 50%;
+        height: $diameter;
+        width: $diameter;
+        color: white;
+        font-weight: bold;
+        border: none;
+        padding: 0;
+        background: $mu-color-link;
+        &.mu-next,
+        &.mu-close {
+          top: - $diameter / 2 - $border-width / 2;
+          right: - $diameter / 2 - $border-width / 2;
+        }
+        &.mu-previous {
+          top: - $diameter / 2 - $border-width / 2;
+          left: - $diameter / 2 - $border-width / 2;
+        }
+      }
+
+      $mu-statuses-colors: (
+        'broken': $mu-color-broken,
+        'danger': $mu-color-danger,
+        'success': $mu-color-success,
+        'warning': $mu-color-warning,
+        'passed': $mu-color-success,
+        'passed-with-warnings': $mu-color-warning,
+        'failed': $mu-color-danger,
+        'errored': $mu-color-broken,
+        'aborted': $mu-color-broken,
+        'pending': $mu-color-info
+      );
+
+      @each $class, $color in $mu-statuses-colors {
+        &.#{$class} {
+          border-color: $color;
+          .mu-kids-modal-button {
+            background: $color;
+          }
+        }
+        .mu-kids-character.kindergarten {
+          @include full-size-character;
+        }
+
+        .submission-results.kindergarten {
+          width: 100%;
+          height: 100%;
+          .mu-kids-callout-#{$class},
+          p {
+            display: none;
+          }
+          .mu-kids-default-#{$class} {
+            @include full-size-character;
+          }
+        }
+      }
+    }
+  }
+}