mumuki-laboratory 7.12.1 → 8.1.2

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

@@ -1,7 +1,7 @@
 mumuki.load(() => {
   var Chat = {
     $body: function () {
-      return $('body')
+      return $('body');
     },
     $newMessageModal: function () {
       return $('.new-message-modal');
@@ -18,7 +18,7 @@ mumuki.load(() => {
       $('.notifications-box').toggleClass('notifications-box-empty', !data.has_messages);
       $('.pending-messages-filter').removeClass('pending-messages-filter');
       $('button.btn-submit').removeClass('disabled');
-      $('.pending-messages-text').remove()
+      $('.pending-messages-text').remove();
     },
     readMessages: function (url) {
       Chat.tokenRequest({
@@ -26,10 +26,10 @@ mumuki.load(() => {
         method: 'POST',
         success: Chat.setMessages,
         xhrFields: {withCredentials: true}
-      })
+      });
     },
     tokenRequest: function (data) {
-      $.ajax(Chat.token.newRequest(data))
+      $.ajax(Chat.token.newRequest(data));
     },
     getMessages: function () {
       if ($('.badge-messages').length == 0) {
@@ -74,7 +74,7 @@ mumuki.load(() => {
         success: success,
         error: error,
         xhrFields: {withCredentials: true}
-      })
+      });
     },
     openNewMessageModal: function () {
       Chat.$newMessageModal().modal({backdrop: false, keyboard: false});
@@ -89,5 +89,5 @@ mumuki.load(() => {
   Chat.setMessagesInterval();
   mumuki.Chat = Chat;
 
-})
+});
 

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/multiple-choice.js

@@ -1,7 +1,7 @@
 mumuki.load(() => {
 	function dumpChoices(_evt) {
 		var indexes = $('.solution-choice:checked').map(function () {
-			return $(this).data('index')
+			return $(this).data('index');
 		}).get().join(':');
 		$('#solution_content').attr('value', indexes);
 	}

data/app/assets/javascripts/mumuki_laboratory/application/multiple-files.js

@@ -103,11 +103,11 @@ mumuki.load(() => {
     }
 
     get highlightModes() {
-      return this._getDataFromHiddenInput('#highlight-modes')
+      return this._getDataFromHiddenInput('#highlight-modes');
     }
 
     get locales() {
-      return this._getDataFromHiddenInput('#multifile-locales')
+      return this._getDataFromHiddenInput('#multifile-locales');
     }
 
     setUpAddFile() {
@@ -131,7 +131,7 @@ mumuki.load(() => {
 
       this._setVisibility(this._addFileButton, filesCount < this.MAX_TABS);
       this.files.toArray().forEach(file => {
-        this._setVisibility(file.deleteButton, file.name !== this.mainFile && filesCount > 1)
+        this._setVisibility(file.deleteButton, file.name !== this.mainFile && filesCount > 1);
       });
     }
 

data/app/assets/javascripts/mumuki_laboratory/application/multiple-scenarios.js

@@ -73,7 +73,7 @@ mumuki.MultipleScenarios = (() => {
         if (this.validScenarioIndex(newScenarioIndex)) {
           this.setActiveIndex(newScenarioIndex);
         }
-      })
+      });
     }
 
     createControls () {

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/pin.js

@@ -11,5 +11,5 @@ mumuki.pin = (() => {
         smoothScrollToElement(scrollPin);
       }
     }
-  }
+  };
 })();

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

@@ -83,7 +83,7 @@ mumuki.load(() => {
             this._$texts.hide();
             this.$characterSpeechBubbleNormal.children('.' + $tab.data('target')).show();
             this._updateSpeechParagraphs();
-          })
+          });
         }
       });
 
@@ -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/progress.js

@@ -17,7 +17,7 @@ mumuki.progress = (() => {
   function updateWholeProgressBar(f) {
     $('.progress-list-item').each((_, it) => {
       const $anchor = $(it);
-      $anchor.attr('class', f($anchor))
+      $anchor.attr('class', f($anchor));
     });
   }
 

data/app/assets/javascripts/mumuki_laboratory/application/results-renderer.js

@@ -49,7 +49,7 @@ mumuki.renderers.results = (() => {
     classForStatus,
     iconForStatus,
     progressListItemClassForStatus
-  }
+  };
 })();
 
 /** @deprecated use {@code mumuki.renderers.results.classForStatus} instead */

data/app/assets/javascripts/mumuki_laboratory/application/speech-bubble-renderer.js

@@ -20,7 +20,7 @@ mumuki.renderers.speechBubble = (()=> {
 
     _chooseResultItem() {
       if (this._responseStatus() !== 'passed' && this._hasTips()) {
-        this._appendFirstTip()
+        this._appendFirstTip();
       } else if (this._responseStatus() === 'failed') {
         this._appendFirstFailedTestResultSummary();
       } else if (this._responseStatus() === 'passed_with_warnings') {
@@ -29,7 +29,7 @@ mumuki.renderers.speechBubble = (()=> {
     }
 
     _appendFirstFailedTestResultSummary() {
-      const failedTestResult = this._failedTestResults()[0]
+      const failedTestResult = this._failedTestResults()[0];
       if (failedTestResult && failedTestResult.summary) {
         this._appendResultItem(mumuki.renderers.renderSpeechBubbleResultItem(failedTestResult.summary));
       }
@@ -67,7 +67,7 @@ mumuki.renderers.speechBubble = (()=> {
     }
 
     _hasTips() {
-      return this.responseData.tips && this.responseData.tips.length
+      return this.responseData.tips && this.responseData.tips.length;
     }
 
     _failedTestResults() {
@@ -97,7 +97,7 @@ mumuki.renderers.speechBubble = (()=> {
   return {
     SpeechBubbleRenderer,
     renderSpeechBubbleResultItem
-  }
+  };
 })();
 
 /** @deprecated use {@code mumuki.renderers.speechBubble.SpeechBubbleRenderer} instead */

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('');
@@ -101,7 +101,7 @@ mumuki.submission = (() => {
         });
         mumuki.kids.showResult(data);
       });
-    }
+    };
   }
 
   /** Processor for non-kids layouts */
@@ -118,7 +118,7 @@ mumuki.submission = (() => {
         $(document).renderMuComponents();
         resultsBox.done(data, submitButton);
       });
-    }
+    };
   }
 
   /** Selects the most appropriate solution processor */

data/app/assets/javascripts/mumuki_laboratory/application/submissions-store.js

@@ -96,7 +96,7 @@ mumuki.SubmissionsStore = (() => {
     _keyFor(exerciseId) {
       return `/exercise/${exerciseId}/submission`;
     }
-  };
+  }();
 
   return SubmissionsStore;
 })();
@@ -106,5 +106,5 @@ mumuki.load(() => {
     if (e.detail[0]) {
       mumuki.SubmissionsStore.clear();
     }
-  })
-})
+  });
+});

data/app/assets/javascripts/mumuki_laboratory/application/sync-mode.js

@@ -65,11 +65,11 @@ mumuki.syncMode = (() => {
 
     /** @type {ClientSyncMode|ServerSyncMode}*/
     _current: null
-  }
+  };
 })();
 
 mumuki.load(() => {
   mumuki.syncMode._selectSyncMode();
   mumuki.syncMode._current.syncProgress();
   mumuki.syncMode._current.syncEditorContent();
-})
+});

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

@@ -16,5 +16,5 @@ mumuki.startTimer = (() => {
       }
     }, intervalDuration);
   }
-  return startTimer
+  return startTimer;
 })();

data/app/assets/stylesheets/mumuki_laboratory/application/_layout.scss

@@ -25,13 +25,13 @@ body {
   margin-bottom: 110px;
 }
 
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 110px;
-  .container {
-    margin-top: 33px;
+.mu-footer {
+  &.container {
+    margin-top: 45px;
+  }
+  .mu-footer-terms {
+    font-size: 15px;
+    text-align: center;
   }
 }
 

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;
+          }
+        }
+      }
+    }
+  }
+}