mumuki-laboratory 7.12.0 → 7.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6139ebdb5d0f4a7148fb6fd64c07a2b7c28ea534fdafe4593cb185ab2b95371
-  data.tar.gz: cea3b7ec16acc73e48a58a9257194a22ad5cf6c46e4dc0530d2b2a92c93dc0cd
+  metadata.gz: e025a36f6aa947e6a39b8372e2a0f257d473143a9c5bef32575885fcf375312b
+  data.tar.gz: 81428a5522e48781ed29cde5b8f2c219f3388a8d36e1ae466f91ee412e69b246
 SHA512:
-  metadata.gz: 95b409773eb897492565a17980ae66cb30e8fbb341edc2034b83d01f117b1f6d6ac1a47c7367179cbf67c430b3c02208c2bda9e5dbc347cd19e3de91ee4d3543
-  data.tar.gz: d58e05c853128d3d12b188160066231494945cc571704b588899f4bf61a88b69054d7c50ffca51478328a39110cc346f24008dbccdd907c22a197515a60987b9
+  metadata.gz: 374aec02893b3e31880b6bb3bbaf1031e0c2b567ee1b25b8d03bb7a30bda810aa72f5ff9974d70cab6637cede23a8e734e95ec5e9a1357d14772300e64a0fc6f
+  data.tar.gz: 70637e35aa57f98661f78f787a15e181ed4737d4b1d3080adcf06e90f4564e5cec9b642055106cccf6ae29fbaa90b1695367c7ac424c89b225166f80ab007557

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

@@ -9,8 +9,10 @@ mumuki.load(() => {
   });
 
   function placeKidsAnimations() {
+    placeAnimation('.mu-kids-character-result-aborted', 'failure');
     placeAnimation('.mu-kids-character-animation', 'blink');
     placeAnimation('.mu-kids-character-context', 'context');
+    placeAnimation('.mu-kids-character-result', 'blink');
   }
 
   function placeAnimation(selector, clip) {
@@ -20,7 +22,7 @@ mumuki.load(() => {
 
   function atRandom(array) {
     return array[Math.floor(Math.random() * array.length)];
-  }  
+  }
 
   mumuki.characters = characters;
 });

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

@@ -1,379 +1,205 @@
-mumuki.load(() => {
-  let $bubble = $('.mu-kids-character-speech-bubble').children('.mu-kids-character-speech-bubble-normal');
-
-  let availableTabs = ['.description', '.hint'];
-  let $speechParagraphs, paragraphHeight, scrollHeight, nextSpeechBlinking;
-  let currentParagraphIndex = 0;
-  let paragraphCount = 1;
-  let paragraphsLines = 2;
-  let $prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
-  let $nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
-  let $speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
-  let $defaultSpeechTabName = 'description';
-  let $texts = $bubble.children(availableTabs.join(", "));
-  let $hint = $('.mu-kids-hint');
-  let $description = $('.mu-kids-description');
-  let discussionsLinkHtml = $('#mu-kids-discussion-link-html').html();
-  let $kidsContext = $('#mu-kids-context');
-  let contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
-
-  // It is important that context is shown as early as possible
-  // in order to display the loading animation
-  function showContext() {
-    $kidsContext.modal({
+mumuki.Kids = class {
+
+  constructor() {
+    this.initialize();
+    this.showContext();
+    $(document).ready(this.onReady.bind(this));
+  }
+
+  // ================
+  // == Public API ==
+  // ================
+
+  initialize() {
+    this.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
+    this.resultActions = {};
+    this.$states = $('.mu-kids-states');
+    this.$state = $('.mu-kids-state');
+    this.$blocks = $('.mu-kids-blocks');
+    this.$exercise = $('.mu-kids-exercise');
+    this.$exerciseDescription = $('.mu-kids-exercise-description');
+    this.$stateImage = $('.mu-kids-state-image');
+    this.$contextModal = $('#mu-kids-context');
+    this.$resultsModal = $('#kids-results');
+    this.$resultsAbortedModal = $('#kids-results-aborted');
+    this.$bubbleCharacterAnimation = $('.mu-kids-character-animation');
+    this.$submissionResult =  $('.submission-results');
+  }
+
+  showContext() {
+    this.$contextModal.modal({
       backdrop: 'static',
       keyboard: false
     });
   }
 
-  $kidsContext.on('hidden.bs.modal', function () {
-    animateSpeech();
-  });
-
-  showContext();
-
-  function floatFromPx(value) {
-    return parseFloat(value.substring(0, value.length - 2));
+  showNonAbortedPopup(data, animation_name, open_modal_delay_ms = 0) {
+    this.$submissionResult.html(data.html);
+    mumuki.presenterCharacter.playAnimation(animation_name, $('.mu-kids-character-result'));
+    setTimeout(() => this._openSubmissionResultModal(data), open_modal_delay_ms);
+    this.onNonAbortedPopupCall(data);
   }
 
-  function resizeSpeechParagraphs(paragraphIndex) {
-    var previousParagraphCount = paragraphCount;
-    scrollHeight = $bubble[0].scrollHeight;
-    paragraphHeight = floatFromPx($speechParagraphs.css('line-height')) * paragraphsLines;
-    paragraphCount = Math.ceil(scrollHeight / paragraphHeight);
-    var newParagraphIndex = Math.floor((paragraphCount / previousParagraphCount) * currentParagraphIndex);
-    showParagraph(paragraphIndex || newParagraphIndex);
+  showAbortedPopup(_data) {
+    this.submitButton.disable();
+    this.$resultsAbortedModal.modal();
   }
 
-  function tabParagraphs(selector) {
-    return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
-  }
+  // ==================
+  // == Hook Methods ==
+  // ==================
 
-  function updateSpeechParagraphs() {
-    $speechParagraphs = tabParagraphs('.' + getSelectedTabName());
-    resizeSpeechParagraphs(0);
+  _showSuccessPopup() {
+    this._mustImplementThisMethod()
   }
 
-  function getSelectedTabName() {
-    return $speechTabs.filter(".active").data('target') || $defaultSpeechTabName;
+  _showFailurePopup() {
+    this._mustImplementThisMethod()
   }
 
-  function showParagraph(index) {
-    $bubble[0].scrollTop = index * paragraphHeight;
-    currentParagraphIndex = index;
-    checkArrowsSpeechVisibility();
-  }
+  // ====================
+  // == Event Callback ==
+  // ====================
 
-  function checkArrowsSpeechVisibility() {
-    setVisibility($prevSpeech, currentParagraphIndex !== 0);
-    setVisibility($nextSpeech, currentParagraphIndex !== paragraphCount - 1);
+  onReady() {
+    // SubClasses may override this method
   }
 
-  function setVisibility(element, isVisible) {
-    isVisible ? element.show() : element.hide();
+  onResize() {
+    // SubClasses may override this method
   }
 
-  /**
-   * 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) {
-      var ratio = $muKidsStatesContainer.hasClass('mu-kids-single-state') ? 1 : 2;
-      $muKidsStatesContainer.width($muKidsStatesContainer.height() / ratio * 1.25 - fullMargin);
-    } else {
-      $muKidsStatesContainer.width(0);
-      $muKidsBlocks.width('100%');
-    }
+  onNonAbortedPopupCall(_data) {
+    // SubClasses may override this method
   }
 
-  mumuki.kids = {
-
-    // ==========
-    // Public API
-    // ==========
-
-    // Sets a function that will be called each
-    // time the states need to be resized. The function takes:
-    //
-    // * $state: a single state area
-    // * fullMargin
-    // * preferredWidth
-    // * preferredHeight
-    //
-    // Runners must call this method on within the runner's editor.js extension
-    registerStateScaler: function (scaler) {
-      this._stateScaler = scaler;
-    },
-
-    // Sets a function that will be called each
-    // time the blocks area needs to be resized. The function takes:
-    //
-    // * $blocks: the blocks area
-    //
-    // Runners must call this method on within the runner's editor.js extension
-    registerBlocksAreaScaler: function (scaler) {
-      this._blocksAreaScaler = scaler;
-    },
-
-    // Scales a single state.
-    //
-    // This method is called by the kids code, but the runner's editor.js extension may need
-    // to perform additional calls to it.
-    scaleState: function ($state, fullMargin) {
-      const preferredWidth = $state.width() - fullMargin * 2;
-      const preferredHeight = $state.height() - fullMargin * 2;
-      this._stateScaler($state, fullMargin, preferredWidth, preferredHeight);
-    },
-
-    // Scales the blocks area.
-    //
-    // This method is called by the kids code, but the runner's editor.js extension may need
-    // to perform additional calls to it.
-    scaleBlocksArea: function ($blocks) {
-      this._blocksAreaScaler($blocks);
-    },
-
-    // Displays the kids results, updating the progress bar
-    // firing the modal and running appropriate animations.
-    //
-    // This method needs to be called by the runner's editor.html extension
-    // in order to finish an exercise
-    showResult: function (data) {
-      mumuki.updateProgressBarAndShowModal(data);
-      if (data.guide_finished_by_solution) return;
-      mumuki.kids.resultAction[data.status](data);
-    },
-
-    // Restarts the kids exercise.
-    //
-    // This method may need to be called by the runner's editor.html extension
-    // in order to recover from a failed submission
-    restart: function () {
-      mumuki.kids._hideMessageOnCharacterBubble();
-      var $bubble = mumuki.kids._getCharacterBubble();
-      Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharacterImage());
-    },
-
-    disableContextModalButton: function () {
-      contextModalButton.setWaiting();
-    },
-
-    enableContextModalButton: function () {
-      contextModalButton.enable();
-    },
-
-    showContext,
-
-    // ===========
-    // Private API
-    // ===========
-
-    _updateSubmissionResult: function (html) {
-      return $('.submission-results').html(html);
-    },
-
-    _getResultsModal: function () {
-      return $('#kids-results');
-    },
-
-    _getResultsAbortedModal: function () {
-      return $('#kids-results-aborted');
-    },
-
-    _getCharacterImage: function () {
-      return $('.mu-kids-character > img');
-    },
-
-    _getCharacterBubble: function () {
-      return $('.mu-kids-character-speech-bubble');
-    },
-
-    _getOverlay: function () {
-      return $('.mu-kids-overlay');
-    },
-
-    _hideMessageOnCharacterBubble: function () {
-      var $bubble = mumuki.kids._getCharacterBubble();
-      $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(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.kids._getOverlay().hide()
-    },
-
-    _showMessageOnCharacterBubble: function (data) {
-      const renderer = new mumuki.renderers.SpeechBubbleRenderer(mumuki.kids._getCharacterBubble());
-      renderer.setDiscussionsLinkHtml(discussionsLinkHtml);
-      renderer.setResponseData(data);
-      renderer.render();
-      mumuki.kids._getOverlay().show();
-    },
-
-    _showOnSuccessPopup: function (data) {
-      mumuki.kids._updateSubmissionResult(data.html);
-      mumuki.presenterCharacter.playAnimation('success_l', mumuki.kids._getCharacterImage());
-      mumuki.kids._showMessageOnCharacterBubble(data);
-      mumuki.presenterCharacter.playAnimation('success2_l', $('.mu-kids-character-success'));
-      setTimeout(function () {
-        var $resultsKidsModal = mumuki.kids._getResultsModal();
-        if ($resultsKidsModal) {
-          $resultsKidsModal.modal({
-            backdrop: 'static',
-            keyboard: false
-          });
-          $resultsKidsModal.find('.modal-header').first().html(data.title_html);
-          $resultsKidsModal.find('.modal-footer').first().html(data.button_html);
-          mumuki.kids._showCorollaryCharacter();
-          $('.mu-close-modal').click(() => mumuki.kids._getResultsModal().modal('hide'));
-        }
-      }, 1000 * 4);
-    },
-
-    _showOnFailurePopup: function () {
-      mumuki.kids.submitButton.disable();
-      mumuki.kids._getResultsAbortedModal().modal();
-      mumuki.submission.animateTimeoutError(mumuki.kids.submitButton);
-    },
-
-    _showOnCharacterBubble: function (data) {
-      mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
-      mumuki.kids._showMessageOnCharacterBubble(data);
-    },
-
-    _showCorollaryCharacter: function () {
-      mumuki.characters.magnifying_glass.playAnimation('show', $('.mu-kids-corollary-animation'));
-    },
-
-    _stateScaler: function ($state, fullMargin, preferredWidth, preferredHeight) {
-      var $table = $state.find('gs-board > table');
-      if (!$table.length) return setTimeout(() => this.scaleState($state, fullMargin));
-
-      console.warn("You are using the default states scaler, which is gobstones-specific. Please register your own scaler in the future");
-
-      $table.css('transform', 'scale(1)');
-      var scaleX = preferredWidth / $table.width();
-      var scaleY = preferredHeight / $table.height();
-      $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
-    },
-
-    _blocksAreaScaler: function ($blocks) {
-      console.warn("You are using the default blocks scaler, which is blockly-specific. Please register your own scaler in the future");
-
-      var $blockArea = $blocks.find('#blocklyDiv');
-      var $blockSvg = $blocks.find('.blocklySvg');
-
-      $blockArea.width($blocks.width());
-      $blockArea.height($blocks.height());
-
-      $blockSvg.width($blocks.width());
-      $blockSvg.height($blocks.height());
-    },
-
-    resultAction: {}
-
-  };
-
-  mumuki.kids.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
-
-  function showPrevParagraph() {
-    animateSpeech();
-    showParagraph(currentParagraphIndex - 1);
+  onSubmissionResultModalOpen(_data) {
+    // SubClasses may override this method
   }
 
-  function showNextParagraph() {
-    animateSpeech();
-    showParagraph(currentParagraphIndex + 1);
-    clearInterval(nextSpeechBlinking);
+  // =================
+  // == Private API ==
+  // =================
+
+  _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)
+    $('.mu-close-modal').click(() => this.$resultsModal.modal('hide'));
+    this.onSubmissionResultModalOpen(data);
   }
 
-  function animateSpeech() {
-    mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharacterImage());
+  // ==========================
+  // == Called by the runner ==
+  // ==========================
+
+  // Displays the exercise results, updating the progress bar
+  // firing the modal and running appropriate animations.
+  //
+  // This method needs to be called by the runner's editor.html extension
+  // in order to finish an exercise
+  showResult(data) {
+    mumuki.progress.updateProgressBarAndShowModal(data);
+    if (data.guide_finished_by_solution) return;
+    this.resultActions[data.status](data);
   }
 
-  function animateHint() {
-    mumuki.presenterCharacter.playAnimation('hint', mumuki.kids._getCharacterImage());
+  // Restarts the kids exercise.
+  //
+  // This method may need to be called by the runner's editor.html extension
+  // in order to recover from a failed submission
+  restart() {
+    this._mustImplementThisMethod();
   }
 
-  mumuki.kids.resultAction.passed = mumuki.kids._showOnSuccessPopup;
-  mumuki.kids.resultAction.passed_with_warnings = mumuki.kids._showOnCharacterBubble;
+  // =================================
+  // == Called by the assets loader ==
+  // =================================
 
-  mumuki.kids.resultAction.aborted = mumuki.kids._showOnFailurePopup;
+  disableContextModalButton() {
+    this.$contextModalButton.setWaiting();
+  }
 
-  mumuki.kids.resultAction.failed = mumuki.kids._showOnCharacterBubble;
-  mumuki.kids.resultAction.errored = mumuki.kids._showOnCharacterBubble;
-  mumuki.kids.resultAction.pending = mumuki.kids._showOnCharacterBubble;
+  enableContextModalButton() {
+    this.$contextModalButton.enable();
+  }
 
+  // ============
+  // == Helper ==
+  // ============
 
-  $(document).ready(() => {
-    // Speech initialization
-    if (!$bubble.length) return;
+  _mustImplementThisMethod() {
+    throw new Error('TODO: implement method')
+  }
 
-    availableTabs.forEach(function (tabSelector) {
-      tabParagraphs(tabSelector).contents().unwrap().wrapAll('<p>');
-    });
+  // ============
+  // == Scaler ==
+  // ============
+
+  // Sets a function that will be called each
+  // time the states need to be resized. The function takes:
+  //
+  // * $state: a single state area
+  // * fullMargin
+  // * preferredWidth
+  // * preferredHeight
+  //
+  // Runners must call this method on within the runner's editor.js extension
+  registerStateScaler(scaler) {
+    this._stateScaler = scaler;
+  }
 
-    updateSpeechParagraphs();
-
-    resizeSpeechParagraphs();
-
-    $speechTabs.each(function (i) {
-      var $tab = $($speechTabs[i]);
-      if ($tab.data('target')) {
-        $tab.click(function () {
-          $speechTabs.removeClass('active');
-          $tab.addClass('active');
-          $texts.hide();
-          $bubble.children('.' + $tab.data('target')).show();
-          updateSpeechParagraphs();
-        })
-      }
-    });
+  // Sets a function that will be called each
+  // time the blocks area needs to be resized. The function takes:
+  //
+  // * $blocks: the blocks area
+  //
+  // Runners must call this method on within the runner's editor.js extension
+  registerBlocksAreaScaler(scaler) {
+    this._blocksAreaScaler = scaler;
+  }
 
-    if (paragraphCount > 1) {
-      nextSpeechBlinking = mumuki.setInterval(() => $nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
-    }
+  // Scales a single state.
+  //
+  // This method is called by the kids code, but the runner's editor.js extension may need
+  // to perform additional calls to it.
+  scaleState($state, fullMargin) {
+    const preferredWidth = $state.width() - fullMargin * 2;
+    const preferredHeight = $state.height() - fullMargin * 2;
+    this._stateScaler($state, fullMargin, preferredWidth, preferredHeight);
+  }
 
-    $nextSpeech.click(showNextParagraph);
-    $prevSpeech.click(showPrevParagraph);
-    $description.click(animateSpeech);
+  // Scales the blocks area.
+  //
+  // This method is called by the kids code, but the runner's editor.js extension may need
+  // to perform additional calls to it.
+  scaleBlocksArea($blocks) {
+    this._blocksAreaScaler($blocks);
+  }
 
-    $hint.click(function () {
-      animateHint();
-      this.classList.remove('blink');
-    });
+  _stateScaler($state, fullMargin, preferredWidth, preferredHeight) {
+    const $table = $state.find('gs-board > table');
+    if (!$table.length) return setTimeout(() => this.scaleState($state, fullMargin));
 
-    // States initial resizing
-    mumuki.resize(function () {
-      var margin = 15;
-      var fullMargin = margin * 2;
+    console.warn("You are using the default states scaler, which is gobstones-specific. Please register your own scaler in the future");
 
-      let $muKidsStatesContainer = $('.mu-kids-states');
-      let $muKidsStates = $('.mu-kids-state');
-      let $muKidsBlocks = $('.mu-kids-blocks');
-      let $muKidsExercise = $('.mu-kids-exercise');
-      let $muKidsExerciseDescription = $('.mu-kids-exercise-description');
-      let $muKidsStateImage = $('.mu-kids-state-image');
+    $table.css('transform', 'scale(1)');
+    const scaleX = preferredWidth / $table.width();
+    const scaleY = preferredHeight / $table.height();
+    $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
+  }
 
-      distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin);
+  _blocksAreaScaler($blocks) {
+    console.warn("You are using the default blocks scaler, which is blockly-specific. Please register your own scaler in the future");
 
-      if (!$muKidsExerciseDescription.hasClass('mu-kids-exercise-description-fixed')) {
-        $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
-      }
+    const $blockArea = $blocks.find('#blocklyDiv');
+    const $blockSvg = $blocks.find('.blocklySvg');
 
-      $muKidsStates.each((index, state) => mumuki.kids.scaleState($(state), fullMargin));
-      mumuki.kids.scaleBlocksArea($muKidsBlocks);
+    $blockArea.width($blocks.width());
+    $blockArea.height($blocks.height());
 
-      if (paragraphCount <= 1) clearInterval(nextSpeechBlinking);
+    $blockSvg.width($blocks.width());
+    $blockSvg.height($blocks.height());
+  }
 
-      resizeSpeechParagraphs();
-    });
-  })
-});
+}