mumuki-laboratory 7.12.3 → 8.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26c8eb799e96cc5d8e68fc6d5b9ae0e268fcc77fa99156db5051b373b6aee412
-  data.tar.gz: 4dde09623edc6d26430bbd6bc86bcd6e85347e73bcd444df00d8f7b47274859c
+  metadata.gz: 6c5e8b0b9d50cec890d396b4d9fdc32191fb2083adb4b2519784051c497e7900
+  data.tar.gz: 0fa8577f8f65a8b3565980ee8678da46d9514f7d49cd4b4044cc07a6605c4271
 SHA512:
-  metadata.gz: efef98352ef78664e8aac7493a70546b824b54e97ed556d18ae1068c532564dcf509f2878e2c8105d9e5a0e318222b3aa0b1894d43fe2d1d48da397137ea6329
-  data.tar.gz: fb241340ebe7994e84ab86c08275304c74cd5669bbc2ca3b7c8bcf616d1186b088ecd3da59fe8abb80b65a1f9dfd8538eccbf31cba4f55dbd83f7a2838601911
+  metadata.gz: 95639b3675a795883b05ca19c746438cbfbfd6bba423561f9b8c17aefde40fad23495a9a242bbcc0274cb5b1116d5335c968aeea60ddbe298865210b1727aadd
+  data.tar.gz: 4b0032d3733982144a681d8728cc193182aa989022b7af3b9ae736552079eea001a1e484f680a7a75d3fe62e4f53c6cd48569493cd154c41f036b86e3c7afd7f

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

@@ -5,22 +5,9 @@ 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() {
@@ -51,8 +38,8 @@ mumuki.gamification = (() => {
       return Math.floor((-b + Math.sqrt(Math.pow(b, 2) - 4 * a * (c - exp))) / (2 * a));
     }
 
-    triggersLevelChange(newExp) {
-      return this.levelFor(this.currentExp + newExp) !== this.currentLevel();
+    triggersLevelChange(exp) {
+      return this.levelFor(exp) !== this.currentLevel();
     }
 
     currentLevelProgress() {
@@ -63,87 +50,23 @@ mumuki.gamification = (() => {
       return this.expFor(this.currentLevel());
     }
 
-    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();
+    setExpMessage(exp) {
+      let expGained = exp - this.currentExp;
 
+      if (expGained > 0) {
         this.currentExp = exp;
-        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);
+        $('#mu-exp-points').html(expGained);
+        $('#mu-level-number').html(this.currentLevel());
       }
     }
-
-    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() {
-    if (_gamificationEnabled()) {
-      mumuki.gamification.currentLevelProgression = new LevelProgression(currentExp());
-    } else {
-      mumuki.gamification.currentLevelProgression = new DummyLevelProgression();
-    }
-  }
-
-  function _gamificationEnabled() {
-    return $('#mu-current-exp').length;
+    mumuki.gamification._currentLevelProgression = new LevelProgression(currentExp());
   }
 
   function currentExp() {
-    return parseInt($('#mu-current-exp').val());
+    return $('#mu-current-exp').val();
   }
 
   return {
@@ -152,12 +75,11 @@ mumuki.gamification = (() => {
 
     _setUpCurrentLevelProgression,
 
-    /** @type {LevelProgression|DummyLevelProgression} */
-    currentLevelProgression: null
+    /** @type {LevelProgression} */
+    _currentLevelProgression: null
   };
 })();
 
 mumuki.load(() => {
   mumuki.gamification._setUpCurrentLevelProgression();
-  mumuki.gamification.currentLevelProgression.updateLevel();
 });

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

@@ -21,20 +21,9 @@ 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() {
@@ -85,7 +74,7 @@ mumuki.Kids = class {
   }
 
   onSubmissionResultModalOpen(_data) {
-    this.resultsCarrousel.show();
+    // SubClasses may override this method
   }
 
   // =================
@@ -93,10 +82,9 @@ mumuki.Kids = class {
   // =================
 
   _openSubmissionResultModal(data) {
-    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);
+    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)
     $('.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-kids-modal-button.mu-close'));
+      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);
@@ -29,9 +29,10 @@ 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 kindergarten').addClass(data.status);
-      super.showNonAbortedPopup(data, animation_name);
+      this.$resultsModal.find('.modal-content').removeClass().addClass('modal-content').addClass(data.status);
+      super.showNonAbortedPopup(data, animation_name, 1000);
     }
 
     showAbortedPopup(data) {
@@ -71,11 +72,6 @@ mumuki.load(() => {
     // == Called by the runner ==
     // ==========================
 
-    showResult(data) {
-      data.guide_finished_by_solution = false;
-      super.showResult(data);
-    }
-
     restart() {
       mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
     }
@@ -147,7 +143,52 @@ mumuki.load(() => {
     }
 
     get context() {
-      return new mumuki.ModalCarrousel('.mu-kindergarten-context-image-slides', () => mumuki.kids.showContext());
+      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);
+          }
+        }
+      }
     }
 
   }

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

@@ -123,9 +123,8 @@ 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);
+      mumuki.gamification._currentLevelProgression.setExpMessage(data.current_exp);
     }
     error(submitButton) {
       this.submissionsResultsArea.html('');

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

@@ -1,14 +1,3 @@
-@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 {
@@ -58,109 +47,3 @@ $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;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -87,69 +87,155 @@ $modal-footer-height: 95px;
   }
 }
 
-.modal-content.kindergarten {
-  $width-lg: 800px;
-  $height-lg: $width-lg * 0.625;
+.mu-kindergarten-context {
 
-  width: $width-lg;
-  height: $height-lg;
+  .modal-dialog {
 
-  top: calc(50vh - #{$height-lg} / 2);
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
 
-  @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
-    $height-sm: 85vh;
-    $width-sm: $height-sm / 0.625;
+    .modal-content {
+      position: absolute;
 
-    width: $width-sm;
-    height: $height-sm;
+      $width-lg: 800px;
+      $height-lg: $width-lg * 0.625;
 
-    top: calc(50vh - #{$height-sm} / 2);
-    left: calc(50vw - #{$width-sm} / 2);
-  }
+      width: $width-lg;
+      height: $height-lg;
 
-  @media (orientation: portrait) {
-    $height-sm: 85vh;
-    $width-sm: 85vw;
+      top: calc(50vh - #{$height-lg} / 2);
+      left: calc(50vw - #{$width-lg} / 2);
 
-    width: $width-sm;
-    height: $height-sm;
+      @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
+        $height-sm: 85vh;
+        $width-sm: $height-sm / 0.625;
 
-    top: calc(50vh - #{$height-sm} / 2);
-    left: calc(50vw - #{$width-sm} / 2);
-  }
+        width: $width-sm;
+        height: $height-sm;
 
-  .modal-header,
-  .modal-footer {
-    text-align: center;
-    text-transform: uppercase;
-  }
+        top: calc(50vh - #{$height-sm} / 2);
+        left: calc(50vw - #{$width-sm} / 2);
+      }
 
-  .modal-body.mu-kids-context-body {
-    height: 100%;
-    div img, p img {
-      width: 100%;
-      height: 100%;
-      object-position: center;
-      object-fit: contain;
+      @media (orientation: portrait) {
+        $height-sm: 85vh;
+        $width-sm: 85vw;
+
+        width: $width-sm;
+        height: $height-sm;
+
+        top: calc(50vh - #{$height-sm} / 2);
+        left: calc(50vw - #{$width-sm} / 2);
+      }
+
+      $border-width: 16px;
+      border-width: $border-width;
+      border-style: solid;
+      border-color: $mu-color-link;
+      border-radius: $border-width;
+      box-shadow: none;
+
+      .modal-header,
+      .modal-footer {
+        text-align: center;
+        text-transform: uppercase;
+      }
+
+      .modal-body {
+        height: 100%;
+        div, p {
+          height: 100%;
+          .mu-kindergarten-context-image-slides {
+            img:not(.active) {
+              display: none;
+            }
+          }
+          img {
+            width: 100%;
+            height: 100%;
+            object-position: center;
+            object-fit: contain;
+          }
+        }
+      }
+
+      .mu-kindergarten-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-kindergarten-modal-button {
+            background: $color;
+          }
+        }
+        .submission-results {
+          width: 100%;
+          height: 100%;
+          .mu-kids-callout-#{$class},
+          p {
+            display: none;
+          }
+          .mu-kids-default-#{$class} {
+            width: 100%;
+            height: 100%;
+            img {
+              width: 100%;
+              height: 100%;
+              object-position: center;
+              object-fit: contain;
+            }
+          }
+        }
+      }
     }
   }
 }
 
-#kids-results.mu-kids-modal-border {
+#kids-results.mu-kindergarten-context {
   .modal-body{
     height: calc(100% - #{$modal-header-height} - #{$modal-footer-height});
   }
 }
-
-#kids-results-aborted.mu-kids-modal-border {
-  .modal-content.kindergarten {
-    .modal-body {
-      height: calc(100% - #{$modal-header-height});
-    }
-
-    h4.modal-header {
-      margin: 0;
-    }
+#kids-results-aborted.mu-kindergarten-context {
+  .modal-body{
+    height: calc(100% - #{$modal-header-height});
+  }
+  h4.modal-header {
+    margin: 0;
   }
 }
 

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

@@ -31,37 +31,7 @@
   }
 }
 
-.mu-profile-info-left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-
-  .mu-level-progress {
-    position: relative;
-    top: -275px;
-    margin-bottom: -275px;
-  }
-}
-
-.mu-level {
-  .mu-level-number {
-    position: absolute;
-    margin-top: 11px;
-    margin-left: -86px;
-    width: 87px;
-
-    text-align: center;
-    font-size: 1.5em;
-    font-weight: bold;
-    color: white;
-
-    user-select: none;
-    pointer-events: none;
-  }
-}
-
-.mu-profile-info-right {
+.mu-profile-info {
   font-size: 20px;
   margin-top: 5px;
   div {
@@ -70,4 +40,6 @@
       font-style: italic;
     }
   }
+
+
 }

data/app/controllers/api/courses_controller.rb

@@ -5,7 +5,6 @@ module Api
 
     def create
       @course.save!
-      @course.notify!
       render json: @course
     end
 
@@ -23,4 +22,4 @@ module Api
       @course.slug
     end
   end
-end
+end